jQuery初识(20171025)
1.jQuery
1.jQuery
<script>
//alert($);
//alert(jQuery);
//所有函数都有一个原型对象（prototype）
//查看jquery版本
//alert(jQuery.fn.jquery);
//alert( jQuery.prototype );
//alert(jQuery.fn ===jQuery.prototype)
</script>2.入口函数的比较
<script>
//原生js
window.onload = function(){
var FirstP =document.getElementById("first");
FirstP.innerHTML = "hello world";
};
//jq
//$(document).ready()事件发生时表示dom元素已就绪，但是不会等页面的图片等加载
//所以比window.onload要快
$(document).ready(function(){
$("#second").html("hello jquery")
});
//jq简写
$(function(){
$("#third").html("hello today")
})
</script>3.DOM对象与jQuery对象的相互转换
<script>
//dom对象转换为jq对象
//var firstp = document.getElementById("first");
var firstp = document.getElementById("first");
//console.log($(firstp));
//$(firstp).html("hello world!")
//jq对象转换为dom对象
$("#second")[0].innerHTML = "我是第二个标签";
$("#third").get(0).style.background = "blue";
</script>4.jq的循环
<body>
<p id="first"></p>
<p id="second"></p>
<p id = "third"></p>
</body>
<script>
$("p").each(function(index){
//此处的this是dom对象，可以使用$（this）转换为jq对象
$(this).html(index+1);
//this.innerHTML = index+1;
})
</script>
结果：
// 1
// 2
// 35.jq修改css
<style>
#first{
color: red;
}
</style>
<div>
<p id="first">1111</p> //显示的是蓝色
<p id="second">2222</p>
<p id = "third">3333</p>
</div>
<script>
$("#first").css("color","blue");//jq修改样式其实是给元素添加了style属性，即行内样式本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录