文章目录
一、jQuery简介
1. 介绍
jQuery是JS的工具库,对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善,更便捷的方法。
2. 使用
1)引入
先引入jquery文件,才能使用jquery语法
1. CDN 有网
2. 本地文件(常用)
2)工厂函数 - $()
"$()"函数用于获取元素节点,创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象,包含了一系列 jQuery 操作的方法。
例 :
//$()获取元素节点,需传入字符串的选择器
$("h1")
$("#d1")
$(".c1")
$("body,h1,p")
3)原生JS对象与jQuery对象
原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要,互相转换 :
-
原生JS转换jQuery对象
$(原生对象),返回 jQuery 对象 -
jQuery对象转换原生JS对象
- 方法一 : 根据下标取元素,取出即为原生对象
var div = $(“div”)[0]; - 方法二 : 使用jQuery的get(index)取原生对象
var div2 = $(“div”).get(0);
<div id="top">哈哈哈</div> <script> // 原生JS转换jQuery对象 $("#top").html("<div>啦啦啦</div>") // jQuery对象转换原生JS对象 console.log($("#top")[0].innerText) </script>
- 方法一 : 根据下标取元素,取出即为原生对象
4)jQuery获取元素
jQuery通过选择器获取元素,$(“选择器”)
选择器分类 :
- 基础选择器
标签选择器:$("div")
ID 选择器:$("#d1")
类选择器:$(".c1")
群组选择器:$("body,p,h1")
- 层级选择器
后代选择器: $("div .c1")
子代选择器: $("div>span")
相邻兄弟选择器: $("h1+p") 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器: $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素
- 过滤选择器
需要结合其他选择器使用。
:first
匹配第一个元素 例:$("p:first")
:last
匹配最后一个元素 例:$("p:last")
:odd
匹配奇数下标对应的元素
:even
匹配偶数下标对应的元素
:eq(index)
匹配指定下标的元素
:lt(index)
匹配下标小于index的元素
:gt(index) (index:从0开始)
匹配下标大于index的元素
:not(选择器)
否定筛选,除()中选择器外,其他元素
e.g.
// JQ写法
$("li:eq(1)").css("color","red")
$("li:eq(1)").css({"color":"red","background- color":"blue"})
//隐藏样式
$("li:eq(1)").css({"color":"red","background- color":"blue"}).hide()
// 奇数背景颜色变蓝色,偶数背景红色
$("li:odd").css("background-color","blue")
$("li:even").css("background-color","red")
- 子元素过滤选择器
:first-child
匹配第一个子元素
:last-child
匹配最后一个子元素
:nth-child(n)
匹配第n个子元素(n从1开始计数)
5)操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value属性
jq对象.tetx("abs") //赋值
jq对象.tetx() //读取
jq对象.html("<b>abs</b>") //赋值
jq对象.html() //读取
jq对象.val("abs") //赋值
jq对象.val() //读取
e.g.
console.log($("#top").text())
$("#top").html("<div>啦啦啦</div>")
e.g.
//点击按钮获取输入文本值
<input type="text">
<div>
<button id="btn">获取值</button>
</div>
<div id="top"></div>
<script>
$("#btn")[0].onclick=function(){
$("#top").text($("input").val())
}
</script>
6)操作标签属性
-
attr(“attrName”,“value”)
设置或读取标签属性 -
prop(“attrName”,“value”)
设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写$("#btn").on("click",function(){ //设置或读取标签属性 console.log($("#ch").prop("checked")); })
-
removeAttr(“attrName”)
移除指定属性
7)操作标签样式
- 为元素添加id/class属性,对应选择器样式
- 针对类选择器,提供操作class属性值的方法
addClass("className") //添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
e.g.
<style>
.red{
color: aliceblue;
background-color: red;
width: 200px;
cursor: pointer;
}
</style>
***********************************************
<div id="top">变色器</div>
<script>
$("#top").on("click",function(){
$(this).toggleClass("red");
})
</script>
- 操作行内样式
css("属性名","属性值") //设置行内样式
css(JSON对象) //设置一组CSS样式
/*
JSON对象:常用数据传输格式
语法 :
{
"width":"200px",
"height":"200px",
"color":"red"
}
*/
e.g.
//添加单个样式,逗号隔开
$("li:eq(1)").css("color","red")
//添加多个样式,用字典模式
$("li:eq(1)").css({"color":"red","background-color":"blue"})
8)根据层级结构获取元素
- parent()
返回父元素 - parents(‘selector’)
返回满足选择器的祖先元素 - children()/children(“selector”)
返回所有直接子元素/返回满足选择器的直接子元素 - find(“selector”)
返回所有的后代元素(包含直接与间接) - next()/next(“selector”)
返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器 - prev()/prev(“selector”)
返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器 - siblings()/siblings(“selector”)
返回所有的兄弟元素/满足选择器的所有兄弟元素
9)元素的创建,添加,删除
- 创建
使用$(“标签语法”),返回创建好的元素
var div = $("<div></div>"); //创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用,设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>"); //创建的同时设置内容,属性和样式
- 添加至页面
1)作为子元素添加(不能同时使用,后面的会覆盖前面的操作)
$obj.append(newObj); //在$obj的末尾添加子元素newObj
$obj.prepend(newObj); //作为第一个子元素添加至$obj中
2)作为兄弟元素添加(不能同时使用,后面的会覆盖前面的操作)
$obj.after(newObj); //在$obj的后面添加兄弟元素
$obj.before(newObj); //在$obj的前面添加兄弟元素
3)移除元素
$obj.remove(); //移除$obj
e.g.
<div id="top">变色器</div>
<script>
$("#top").on("click",function(){
// 创建p元素
var p=$("<p id='p'>你家电脑</p>")
// 输出内容和id
console.log(p.text(),p.attr("id"))
// 子元素添加
$("#top").append(p); //添加到最后
$("#top").prepend(p); //添加到第一个
// 兄弟元素添加
$("#top").before(p);
$("#top").after(p);
})
</script>
10)动画
1. 显示和隐藏 show(2000,callback)/hide(2000,callback)
2. 下拉和上推 slideDown()/slideUp()
3. 淡隐淡现方式显示 fadeOut()/fadeIn() (块模式操作)
4. 动画函数animate(),可以实现自定义动画
e.g.
<!-- 页面小球,点击按钮向右移动100px -->
<div id="ball">
</div>
<div id="move">
<button id="btn">移动</button>
</div>
<script>
$("#btn").on("click",function(){
$("#ball").animate({"left":"205px"},2000,function(){
$("#ball").animate({"left":"20px"}),function(){
$("#ball").fadeOut(3000)
}
})
})
</script>
e.g.
<body>
<div id="div">
<img src="../imgs/img02-3.png" alt="" id="img">
</div>
<div>
<button id="btn">隐藏</button>
</div>
<script>
//直接隐藏,显示
$("#btn").on("click",function(){
if($("#btn").text()=="隐藏"){
$("#img").hide(3000,function(){
$("#btn").text("显示")
})
}
else{
$("#img").show(3000,function(){
$("#btn").text("隐藏")
})
}
})
//若隐若现
$("#btn").on("click",function(){
if($("#btn").text()=="隐藏"){
$("#img").fadeOut(3000,function(){
$("#btn").text("显示")
})
}
else{
$("#img").fadeIn(3000,function(){
$("#btn").text("隐藏")
})
}
})
//平铺 (注意:平铺要对图片父标签设置)
$("#btn").on("click",function(){
if($("#btn").text()=="隐藏"){
$("#div").slideUp(3000,function(){
$("#btn").text("显示")
})
}
else{
$("#div").slideDown(3000,function(){
$("#btn").text("隐藏")
})
}
})
</script>
</body>
11)jQuery事件处理
- 文档加载完毕
原生JS 方法:window.onload
jQuery:
//语法一
$(document).ready(function (){
//文档加载完毕后执行
})
//语法二
$().ready(function (){
//文档加载完毕后执行
})
//语法三
$(function(){
//文档加载完毕后执行
})
区别:
原生onload事件不能重复书写,会产生覆盖问题;jquery中对事件做了优化,可以重复书写ready方法,依次执行
- 事件绑定方式
事件名称省略 on 前缀
//on("事件名称",function)
$("div").on("click",function(){});//新版本使用的多些
//bind("事件名称",function)
$("div").bind("click",function(){});//1.6-1.8间的版本
//事件名作为方法名
$("div").click(function(){});
-
this表示事件的触发对象,在jquery中可以使用,注意转换类型。this为原生对象只能使用原生的属性和方法,可以使用$(this)转换为jquery对象,使用jquery方法。
-
事件遍历
-
js遍历: for
-
jq遍历:
jq集合对象.each(function(i,ele){
//对象的遍历
})
$.each(data,function(i){
//数据的遍历
})
e.g. <ul> <li>a</li> <li>s</li> <li>d</li> <li>f</li> </ul> <script> var arr=[11,21,13,14,15] // 使用选择器获取全部的表项对象,并保存在变量中 var lis=$("ul>li"); // 输出每个元素 i是遍历序列,ele是遍历的对象 lis.each(function(i,ele){ console.log(i,ele) }) //i:遍历序列 value:遍历的数据 $.each(arr,function(i,value){ console.log(i,v) }) </script>
-