一、入门
1.1下载
- https://github.com/jquery/jquery/releases 选择下载版本
- 解压进入dist文件夹下
➢ jquery.min.js：该版本是去除注释后的jQuery库，文件体积较小，实际项目运营时推荐使用该版本。
➢ jquery.js：该版本的jQuery库没有压缩，而且保留了注释。
➢ jquery.slim.min.js：该版本是jquery.min.js的“瘦身”版本，其实 就是去除了Ajax支持等功能的jQuery库。
➢ jquery.slim.js：该版本是 jquery.js 的“瘦身”版本，同样去除了 Ajax 支持等功能，同时保留了注释。 - 放入项目文件夹下引入
<body>
<script type="text/javascript" src="../jquery.min.js"></script>
</body>
1.2 理解
使用jQuery动态更新HTML页面只需如下两个步骤：
4. 获取jQuery对象。jQuery对象通常是对DOM对象的包装。
5. 调用 jQuery对象的方法来改变自身。当 jQuery对象被改变时，jQuery包装的 DOM对象改变，HTML页面的内容也更新。
<body>
<div id="lee"></div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
// target是jQuery对象，可以调用下面方法
var target = $("#lee")
target.html("jquery")
.height(60)
.width(160)
.css("border","2px solid black")
.css("background-color","#ddddff")
.css("padding",20);
</script>
</body>
1.3 让jQuery与其他JavaScript库共存
jQuery中的 （ ） 返 回 的 是 一 个 j Q u e r y 对 象 ， 其 他 J a v a S c r i p t 库 中 的 （）返回的是一个jQuery对象，其他JavaScript库 中的 （）返回的是一个jQuery对象，其他JavaScript库中的（）函数返回的不是jQuery对象（Prototype的$()函数返回的是一个DOM对象），因此必然引起冲突。
解决：
//取消jQuery中的$()函数，lee是起的别名，方便后续调用,用lee代替$
var lee = jQuery.noConflict();
// target是jQuery对象，可以调用下面方法
var target = lee("#lee")
二、获取jQuery对象
从jQuery库中获取jQuery对象主要有如下两种方式：
- 使用$（）函数或用jQuery对象提供的利用父子关系返回的 jQuery对象。
- jQuery对象的调用方法改变自身后将再次返回该jQuery对象。
2.1 jQuery核心函数
<body>
<div id="a"></div>
<div id="b"></div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$("div").append("新增的内容"); //获取所有div，在后面追加内容
$(document.getElementById("a")) //获取id为a，添加样式
.css("border","2px solid black")
.css("background-color","#ddddff");
//使用HTML字符串创建一个按钮，并将其添加到body元素内
$("<input type='button' value='单击我'>").appendTo(document.body);
//使用HTML字符串创建一个按钮，并设置点击弹窗将其添加到body元素内
$("<input/>",
{
type:"button",
value:"有惊喜",
click:function(){
alert("惊喜时刻！");}
})
.appendTo(document.body);
</script>
</body>
2.2 jQuery与jQuery.holdReady
➢ jQuery（callback）：是$（document）.ready（）的缩写，在页面加载完成时自动激发callback，该函数返回将页面document对象包装成的jQuery对象。
➢ jQuery.holdReady（true|false）：指定是否需要延迟 jQuery 的 ready（）事件绑定的事件处理函数。程序可以多次调用holdReady（true）来延迟ready事件的事件处理函数。如果绑定了多个holdReady（true），则需要多次调用holdReady（false）来解 除延迟，否则ready（）事件绑定的事件处理函数将不会被激发。
<script>
$.holdReady(true); //延迟ready事件的事件处理函数
$(() =>{
alert("装载完成"); //5s后才会显示
})
window.setTimeout("$.holdReady(false);",5000); //设置5s后取消延迟ready()事件处理函数
</script>
2.3 CSS选择器访问DOM元素
<body>
<ul>
<li id="java">java</li>
<li id="c" class="test">c</li>
<li id="python">python</li>
<li id="javascript">javascript</li>
<li><span id="android">android</li>
</ul>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$("#java").append("<b> 学习Java</b>"); //获取id为Java，并追加内容
$("li[id]").css("color","red"); //获取li下所有id，并追加内容
$(".test").css("border","2px solid blue"); //获取class为test，并设置样式
$("#python,#javascript").append("<b>学习python和js</b>"); //同时获取python,javascript，并追加内容
$("ul #android").append("这是android"); //获取android元素
$("ul>c").append("这是c"); //获取c元素
$("#c~li").css("background-color","yellow"); //获取c以后li所有元素
</script>
</body>
2.4 伪类选择器访问DOM元素
<body>
<ul>
<li id="java">java</li>
<li id="c" class="test">c</li>
<li id="python">python</li>
<li id="javascript">javascript</li>
<li id
最低0.47元/天 解锁文章
1717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
