这篇博客介绍了jQuery的入门知识，包括下载jQuery库的不同版本，理解如何使用jQuery动态更新HTML页面，以及如何让jQuery与其他JavaScript库共存。接着详细讲解了如何获取jQuery对象，如jQuery核心函数和CSS选择器的使用，以及jQuery操作类数组和事件相关方法的基本应用。
jQuery
一、入门
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="ajax">ajax</li>
<li><span id="android">android</li>
</ul>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$("ul>li:first").append("<b> 学习Java</b>"); //获取ul下第一个li子元素
$("ul>li:last").append("<b> 学习使我快乐</b>"); //获取ul下最后一个li子元素 此时只有android
$("ul>li:not([id])").css("color","red"); //获取li下没有id元素，此时只有android
$("ul>li:even").css("background-color","skyblue"); //获取ul下偶数
$("ul>li:odd").css("background-color","grey"); //获取ul下奇数
$("ul>li:gt(4)").append("<b>学习python和js</b>"); //索引大于4的，从0开始，不包括4
$("ul>li:lt(4)").append("<b>学习python和js</b>"); //索引小于4的，从0开始，不包括4
$("ul>li:eq(2)").append("<b>好好学习</b>"); //找索引为2的
$("ul>li:contains(java)").append("<b>天天向上</b>"); //找文本内容包含javascript，可模糊匹配
$("ul>li:has('span')").append("这是android"); //获取li下包含span的
$("li>span:visible").append("可见span元素"); //获取li元素,且可见span元素
$("li:nth-child(3)").append("访问3元素"); //访问3元素
$("li:nth-last-child(3n+1)").append("访问倒数1，4，7元素"); //访问倒数1，4，7元素
$("span:only-child()").append("唯一span元素"); //唯一span元素
</script>
</body>
2.5 表单相关选择器
<body>
<input id="user" type="text" /><br />
<input id="pwd" type="password" /><br />
<textarea id = "intro"></textarea><br />
<select id="gender" size="3" style="width: 80px;">
<option value="male">男</option>
<option value="female">女</option>
</select><p>
<input id="pwd" type="checkbox" checked value="xx" /><br />
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$(":input:not('select')").val("test"); //获取input,textarea,button元素加test
$(":selected").css("border","2px dashed black"); //指定selected元素属性
$(":checked").prop("checked",false); //指定checked并取消他们状态
</script>
</body>
三、 jQuery操作类数组
<body>
<div>
<div id="java">java</div>
<div id="c"> c </div>
<div id="python">python</div>
<div id="javascript">javascript</div>
<div id="ajax">ajax</div>
<div id="android">android</div>
</div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
// 获取所有div下的div元素，并迭代
$("div>div").each(function(i){
this.innerHTML += " 索引为： " + i;
})
console.log($("div>div").length); //div下div元素个数
console.log($("div>div").get(1).innerHTML); //div下div元素下标为1的打印出来 c 索引为： 1
console.log($("#java").get()[0].innerHTML); //id为Java的div元素 java 索引为： 0 返回是一个数组
console.log($("div>div").index($("#c"))); //c的下标 1
console.log($("div>div").jquery); //jquery版本
</script>
</body>
3.1 过滤
<body>
<div>
<div id="java">java</div>
<div id="c"> c </div>
<div id="python">python</div>
<div id="javascript">javascript</div>
<div id="ajax">ajax</div>
<div id="android">android</div>
</div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
// 获取所有div下的div元素，并迭代
$("div>div").eq(3).css("font-size","24pt"); //第4个元素设置值
$("div>div").filter("#ajax").css("background-color","#aaa"); //ajax设置
$("div>div").filter(function(){ //筛选出长度8
return this.innerHTML.length > 8;
}).css("color","red");
$("div>div").not("#ajax").css("background-color","#skyblue"); //不为ajax的设置
$("div>div").slice(3,5).height(60); //索引3-5，不含3和5
var result = $("div>div").map(i => i); //div映射到另一个jQuery对象
console.log(result);
</script>
</body>
3.2 仿DOM导航查找
<body>
<div>
<div id="java">java</div>
<div id="python">python</div>
<div id="ajax">ajax</div>
<div id="c"> c </div>
<div id="javascript">javascript</div>
<div id="android">android</div>
</div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$("body>div").contents().css("background-color","#ddd"); //获取所有文本内容
$("#ajax").next().css("background-color","red"); //ajax下一个节点
$("#ajax").nextUntil("#android").css("background-color","yellow"); //ajax到android之前
$("#ajax").prev().css("background-color","grey"); //ajax上一个节点
$("#ajax").nextUntil("#java").css("background-color","skyblue"); //ajax到python之 从下往上
$("#ajax").siblings("#java").append("ccc"); //获取id为ajax的节点且id为java的兄弟节点
$("div").parent().each(function(){
alert($(this).html()); //取出所有div元素的父元素，将会输出body元素和一个div元素
})
</script>
</body>
3.3 串联
<script type="text/javascript">
$("#java").add("<p>新加的元素</p>").prependTo("body");
//将查找之前的结果和查找之后的结果混合在一起。
$("#ajax").next().addBack().css("border","2px solid black");
//将jQuery对象恢复到上一次执行过滤、查找方法之前的状态
$("#ajax").next().end().css("background-color","#ffaaaa");
</script>
四、jQuery支持的方法
4.1 jQuery命名空间
<script>
document.writeln("浏览器是否支持创建XMLHttpRequest: "+$.support.ajax+"<br/>");
document.writeln("属性有 withCredentials 属性: "+$.support.cors+"<br/>");
document.writeln("判断value是否为数值: "+$.isNumeric(12.2)+"<br/>");
document.writeln("截断字符串前后的空白: "+$.trim(" 小妇人")+"<br/>");
document.writeln("数组中包含4元素位置是:"+$.inArray(4,[1,2,3,4])+"<br/>");
$.each(["java","python","scale","c++"],function(index,val){
document.writeln("第"+index+"的元素是:"+val+"<br/>");
})
var result = $.grep(["java","python","scale","c++"],function(val,index){
return val.length > 5;
})
document.writeln("大于5的字符: "+result+"<br/>");
var result1 = $.map(["java","python","scale","c++"],function(val,index){
return val + index; //数组元素和索引值连缀在一起作新的数组元素
})
document.writeln("将array数组转换为另一个数组: "+result1+"<br/>"); //java0,python1,scale2,c++3
var div = $("<div>aa<div>"); //创建div元素
var divArr = [div div]; //以相同的两个div创建数组
document.writeln("divArr.length的值为："+divArr.length+"<br/>");
document.writeln("divArr.length的值为："+uniqueSort(divArr).length+"<br/>");
var result2 = $.parseJSON('[{"name":"孙悟空","age":500},'+'{"name":"白骨精","age":21}]');
for(var i = 0,len = result2.length;i<len;i++){
document.writeln("第"+i+"个角色姓名是:"+result2[i].name+"年龄是:"+result2[i].age+"<br/>");
}
</script>
4.2 数据存储
<div>
最有趣的人物是<span></span>
它的年龄是：<span></span>
</div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
var target = $("<div>java</div>");
target.data("book","java"); //添加name,value
console.log(target.data("book"));
target.removeData("book"); //删除book
console.log(target.data("book")); //undefined
var div = $("body>div")[0]; //获取页面上第一个div元素
$.data(div,"test",{name:"孙悟空",age:500}); //向div中存多个k,v对
$("span:first").text(jQuery.data(div,"test").name);
$("span:last").text(jQuery.data(div,"test").age); //访问
$.removeData(div); // 删除div元素中数据
console.log($.hasData(div)); //判断是否还有数据
</script>
4.3 操作属性
<body>
<img/><img/>
<div>
<img/><img/><img/>
</div>
<script type="text/javascript"src="../jquery-3.1.1.js">
</script>
<script type="text/javascript">
//获取body下的img元素，并为这些img元素设置src属性
$("body>img").attr ("src","logo.jpg").attr("alt","Java")；
//获取div下的img元素，并为这些img元素设置src属性
$("div>img").prop("src",function(index)
return index 1 ".gif";
});
</script>
</body>
4.4 操作CSS属性
<body>
<div id="testl">整体添加CSS样式的元素</div><br/>
<div id="test2">采用css(properties)方法添加CSS样式的元素</div><br/>
<div id="test3"style="position:absolute;">可以自由移动的元素</div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$("#test1").addClass("test");
$("#test2").css({border:"1px solid black",color:"#888"});
var target = $("#test3")
target.html("jquery")
.height(60)
.width(160)
.css("border","2px solid black")
.css("background-color","#ddddff")
.css("padding",20);
var pos = target.position();
console.log("x坐标为:"+pos.left+"\n"+"y坐标为:"+pos.top);
</script>
</body>
4.5 操作元素
<body>
<div></div><div></div>
<input id="book"name="book"type="text"/><br />
<input id="desc"name="desc"type="text"/><br/>
<select id="gender">
<option value=-"male">男</option>
<option value=-"female">女</option>
</select><br />
<select id="publish"multiple="multiple">
<option value="phei">电子工业出版社</option>
<option value=-"ptpress">人民邮电出版社</option>
</select><br />
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$("body>div").html("java"); //设置div的值
$(":input").val("xml"); //设置input，select，textarea的值
$("select").val("female","m"); //对select设置value的值
console.log($("<div>java:<span>java</java></div>").text()); //获取text
</script>
</body>
<body>
<div>1</div><div>2</div><div>3</div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
var books =[
{name:"疯狂Java讲义",price:109},
{name:"轻量级Java EE企业应用实战",price:89},
{name:"疯狂Android讲义",price:89}]
$("body>div").append(function(i){
return books[i].name + books[i].price;
});
</script>
五、jQuery事件相关方法
5.1 绑定事件处理函数
<body>
<input id="test1"type="button"value="单击我"/><br/>
<input id="test2"type="button"value="切换右边复选框的勾选状态"/>
<input id="check"type="checkbox"value=""/><br />
<input id="test3"type="button"value="toggle"/><br />
<div id="tg"style="width:300px;height:120px;background-color:gray;"></div>
<script type="text/javascript"src="../jquery.min.js">
</script>
<script>
// 指定页面加载完成时执行的函数
$(document).ready(function(){
alert("页面加载完成!");
})
// id为test1的元素click事件绑定事件处理函数
$("#test1").on("click",{book:"java"},function(event){
alert("事件为:"+event+"book属性为:"+event.data.book);
});
// id为test2的元素click事件绑定事件处理函数
$("#test2").on("click",function(event){
// 使用id为check元素单击事件，而且执行默认
$("#check").trigger("click");
});
// id为test3的元素click事件绑定事件处理函数
$("#test3").on("click",function(event){
// 使用id为tg元素显示/隐藏状态,linear切换效果
$("#tg").toggle("slow","linear",function(){
console.log("动画完成!")
});
});
</script>
</body>
5.2 特定事件相关的方法
<body>
<input id="test1"type="button"value="单击我"/><br/>
<div id="test2">鼠标悬停</div>
<script type="text/javascript"src="../jquery.min.js"></script>
<script>
$("#test1").click(function(event){
alert("test1鼠标被单击:"+event);
}).click();
//使用hover为id为test2的元素绑定两个事件处理函数
//当鼠标移入该元素时触发第一个函数，移出该元素时触发第二个函数
$("#test2").css("border","1px solid black")
.css("background-color","cccccc")
.width (200)
.height(80)
.hover(function(event){
alert("鼠标移入元素内");
}),
function(){
alert("鼠标移入元素!");
}
};
</script>
</body>
5.3 事件对象
which：对于鼠标、键盘事件，该属性返回激发该事件的鼠标 键或键盘键。
扫一扫
1824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
