(一)jQuery概述
jQuery本身是js的一个轻量级的库,封装了一个对象jQuery,jquery的所有语法都在jQuery对象中
浏览器不认识jquery,只渲染html、css和js代码,需要先导入jQuery文件,官网下载即可
jQuery中文说明文档:https://hemin.cn/jq/
(二)jQuery要点
1、jQuery对象
- 通过jQuery包装DOM对象后产生的对象。
- jQuery对象用$符号表示
- 给jQuery对象命名引用时,通常标识符前面加个$符,与DOM对象的引用区分开来
- jQuery代码和js代码可以混着用,比如绑定事件处理函数仍旧可以用js的几种方式,只是js对象调用DOM方法和属性,jQuery对象也调用自己的方法
- DOM对象和jQuery对象可以互相转换:
- 用$符号把DOM对象括起来就变成了jQuery对象,如:$(this)
- jQuery加上[0]就变成了DOM对象,如:$("p")[0]
2、jQuery的语法
可以概括为$(selector).action()的形式,
2.1 selector
选择器和筛选器:
- id选择器拿到的是唯一的标签对象;
- 其他选择器得到的是标签对象数组;
- jquery会自动循环处理每个元素,不用自己再写循环语句一个个处理
(1)基本选择器
基本格式:$("css-selector")
(1.1)通用选择器
$("*").css("color", "green")
(1.2)id选择器
$("#jquery").css("color", "red")
(1.3)class选择器
$(".hl").css("color", "gold")
(1.5)标签选择器
$("div").css("color", "black")
(1.6)并列多选选择器
$(".hl,div").css("color", "gold")
(2)层级选择器
(2.1)后代选择器
$(".hl div").css("color", "red")
(2.2)子代选择器
$(".hl>div").css("color", "red")
(2.3)毗邻选择器(下面紧挨着的兄弟标签)
$(".hl+p").css("color", "blue")
(2.4)下方兄弟选择器(不用紧挨着)
$(".hl~p").css("color", "red")
(3)属性选择器
$("[name]").css("color", "red")
$("[name='789']").css("color", "blue")
$("[name='789'][alex='111']").css("color", "red")
(4)表单选择器(只有inpput的type属性才行)
$(":text").css("color", "blue")
(5)基本筛选器
(5.1)first:第一个
$(".hl~p:first").css("color", "gold")
(5.2)last:最后一个
$(".hl~p:last").css("color", "gold")
(5.3)eq(index):指定索引序号
$(".hl~p:eq(0)").css("color", "gold")
(5.4)even:奇数行
$(".hl~p:even").css("color", "gold")
(5.5)odd:偶数行
$(".hl~p:odd").css("color", "gold")
(5.6)gt(index):大于指定索引序号
$(".hl~p:gt(0)").css("color", "gray")
(5.7)lt(index):小于指定索引序号
$(".hl~p:lt(2)").css("color", "gray")
(6)过滤筛选器
$(".hl~p").eq(0).css("color", "gold") //筛选任意一个.eq(index)
$(".hl~p").first().css("color", "gray") //筛选第一个.first()
$(".hl~p").last().css("color", "gray") //筛选最后一个.last()
$(".hl~p").even().css("color", "red") //筛选奇数行的标签.even()
$(".hl~p").odd().css("color", "blue") //筛选偶数行的标签.odd()
console.log($(".hl~p").hasClass("456") ) //判断标签是否有这个class属性,返回boolean值
(7)查找筛选器
//7.1只找子代元素children(selector)
$("#jquery").children("p").css("color", "blue")
//7.2找后代元素find(selector)
$("#jquery").find("p").css("color", "blue")
//7.3找下面的元素next()
$("li").next().css("color", "blue") //查找第二个及往后的li标签
$("li").eq(0).next().css("color", "blue") //查找第几个li标签的下一个的li标签
//7.4找下面的元素nextAll()
$("li").nextAll().css("color", "red") //查找第二个及往后的li标签
$("li").eq(1).nextAll().css("color", "red") //查找第几个li标签的下面所有li标签
//7.5找下面的元素nextUntil()
$("li").nextUntil(".liend").css("color", "gold")//查找终止标签(不包含)上面除了第一个的li标签和下面所有的li标签
$("li").eq(0).nextUntil(".liend").css("color", "gold")//查找第几个li标签的下面到终止标签(不包含)的li标签
//7.6找上面面的元素prev()
$("li").prev().css("color", "blue") //查找除了最后一个的li标签
$("li").eq(2).prev().css("color", "blue") //查找第几个li标签的上一个的li标签
//7.7找上面的元素prevAll()
$("li").prevAll().css("color", "red") //查找除了最后一个的li标签
$("li").eq(3).prevAll().css("color", "red") //查找第几个li标签的上面所有li标签
//7.8找上面的元素prevUntil()
$("li").prevUntil(".liend").css("color", "gold")//查找终止标签(不包含)上面所有的li标签和下面除了最后一个的li标签
$("li").eq(7).prevUntil(".liend").css("color", "gold")//查找第几个li标签的上面到终止标签(不包含)的li标签
//7.9查找父级标签parent
$("#parents p").parent().css("color", "red")
//7.9查找所有祖宗标签parents
$("#parents p").parents().css("color", "red")
//7.9查找区间祖辈标签parentUntil
$("#parents p").parentsUntil().css("color", "black") // 不写参数,类同parents()
$("#parents p").parentsUntil("#parents").css("color", "black") // 查找所有终止祖辈下面的祖辈标签
//7.10查找兄弟标签
$("ul").siblings().css("color", "black")
(8)练习-左侧菜单
<body><div style="clear: both">练习-左侧菜单:<br><div class="outer2"><div class="menu"><div class="item"><div class="title" onclick="f1(this)">菜单一</div><div class="con"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单二</div><div class="con hide"><div>222</div><div>222</div><div>222</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单三</div><div class="con hide"><div>333</div><div>333</div><div>333</div></div></div></div><div class="content"></div></div></div>
</body>function f1(self) {$(self).next().removeClass("hide");$(self).parent().siblings().children(".con").addClass("hide");
}
2.2 action()
jQuery操作属性的方法
(1)标签属性类
// 获取属性值
console.log($(".attr1 .a1").attr("class"))
//设置属性值,不适用设置input标签的checked属性,因为不默认选中(手动勾选)是undefined,默认选中是cheched
$(".attr1 .a1").attr("class", "a2")
// 删除属性
$(".attr1 .a1").removeAttr("class")
//获取固有属性值,不适用自定义属性,因为prop找不到,获取到的是undefined,但适用input标签的checked属性,因为其值是true或false
console.log($(".attr1 .a2").prop("class"))
// 设置固有属性值
$(".attr1 .a2").prop("class", "a3")
// 删除固有属性
$(".attr1 .a3").removeProp("class")
//对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
//对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
//像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此,需要使用prop方法去操作才能获得正确的结果。
(2)css样式类
// 增加class属性列表的元素
$(".attr1 .a3").addClass("a4")
// 删除class属性列表的元素
$(".attr1 .a4").removeClass("a4")
// 设置css样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});
(3)HTML代码/文本/值
$(".attr1 .a3").html("456<h1>123</h1>") //相当于js的innerHTML,加参数是替换原本内容
$(".attr1 .a3").text("<p>111</p>") //相当于js的innerText,加参数是替换原本内容为纯文本
$(".attr1 .a3").val() //获取标签的固有属性value,不能获取自定义属性
$(".attr1 input").val("789") // 加上参数是修改固有属性value值
(4)jQuery的循环语句
- 方式一:
$.each(object[循环的对象,如数组], function(index[, value]){
代码块
})
- 方式二:
$("p").each(function(){
代码块;//每一个标签对象是$(this)
})
//1.方式一:
var data={'name':"alex", age:18};
var dl=[1,"a",[12,'b'], data];
$.each(data, function(key, value){console.log("key:", key); //循环object(字典)第一个参数值是:键keyconsole.log("value:", value);
})
$.each(data, function(key){console.log("key:", key); //循环object(字典)如果只有一个参数值是:键key
})
$.each(dl,function(index,value){console.log("index:", index); //循环数组第一个参数值是:索引indexconsole.log("value:", value);
})
$.each(dl,function(index){console.log("index:", index); //循环数组如果只有一个参数值是:索引index
})
//2.方式二:
$("li").each(function(){console.log("$(this):", $(this));console.log("$(this).html():", $(this).html());
})
(5)练习-正反选
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.3.min.js"></script><script>function selectall(){$("table :checkbox").prop("checked",true)}function cancel(){$("table :checkbox").prop("checked",false)}/*js写法function reverse(){let idlist=$("table :checkbox")for(let i=0;i<idlist.length;i++){let element=idlist[i];let ischecked=$(element).prop("checked")if (ischecked){$(element).prop("checked",false)}else {$(element).prop("checked",true)}}} *//*jQuery循环方式*/function reverse(){$("table :checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));if ($(this).prop("checked")){$(this).prop("checked",false)}else {$(this).prop("checked",true)}});}</script>
</head>
<body><button onclick="selectall();">全选</button><button onclick="cancel();">取消</button><button onclick="reverse();">反选</button><table border="1"><tr><td><input type="checkbox"></td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td></tr><tr><td><input type="checkbox"></td><td>444</td></tr></table>
</body>
</html>
(6)jQuery支持链式查找
对一个标签对象做完操作后,可以用.继续查找其他标签对象进行操作
$("p").parent().addClass("hide");
$("p").parent().prev().addClass("hide");
// 可以合并成一行:
$("p").parent().addClass("hide").prev().addClass("hide")
(7)练习-模态对话框
function show(self){$(self).parent().next().removeClass("hide");
}
function cancel(self){$(self).parent().parent().addClass("hide");
}
(8)文档处理
<div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bo").on("click", function(){//1.内部插入:父标签内插入子标签// $(".c1").append("<h1>123</h1>"); // 创建新标签方式一:直接在append()里面写上标签内容var $ele = $("<h1></h1>"); //创建新标签方式二:相当于js中var ele=document.cerateElement("h1");var $ele = $("<h1>"); //简化写法$ele.html("hello word");$ele.css("color", "red");$(".c1").append($ele);//给父标签的子标签最后添加创建的新子标签$ele.appendTo($(".c1"));//把创建的新子标签添加到父标签的子标签最后面$(".c1").prepend($ele);//给父标签的子标签最前面添加创建的新子标签$ele.prependTo($(".c1"));//把创建的新子标签添加到父标签的子标签最前面//2.外部插入:插入兄弟标签$(".c1").after($ele);$(".c1").before($ele);$ele.insertAfter($(".c1"));$ele.insertBefore($(".c1"));//3.替换$(".c1 p").replaceWith($ele);//4.删除与清空$(".c1").empty(); //清空标签的内容,但是标签还在$(".c1").remove(); //删除标签//5.复制var $ele2=$(".c1").clone(); //clone()里写个true就不会复制事件$(".c1").after($ele2);
})
(9)练习-复制输入框
<div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bc").click(function (){var $cloneObj=$(".lxclone .item").clone(); // 这种方式复制的数量会以2的次方倍增,因为复制出来的也是一个class属性,也会被复制var $cloneObj=$(this).parent().clone(); //应该通过这种方式复制,每次就是复制一个$cloneObj.children(".bc").html("-").attr("onclick", "removeObj(this)");$(".lxclone").append($cloneObj);
});
function removeObj(self){$(self).parent().remove();
}
3、css操作
<div class="cssop">CSS操作<p id="ys">1.样式</p><div id="offsetdiv">2.位置<div class="div1">2.1-offset相对视口偏移量</div><div class="div2">2.2-position相对已定位父级偏移量</div></div><div class="gotop hide" style="position: fixed;right: 20px;bottom: 20px;width: 90px;height: 50px;background-color: gray; color:white;text-align: center;line-height: 50px">返回顶部</div><ul><li>111</li><li>222</li><li>333</li></ul>
</div>
3.1 样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});
3.2 位置
//2.位置
$("*").css({"padding":"0px", "margin":"0px"});
$("#offsetdiv").css({position:"relative"});
$("#offsetdiv .div1").css({width: "200px", height: "200px", "background-color":"blue"});
$("#offsetdiv .div2").css({width: "200px", height: "200px", margin:"20px", padding:"20px", border:"1px solid red", "background-color":"green"});
//2.1-1offset()得到的是偏移量对象,有top和left两个属性:是相对于视口(窗口)的偏移量
console.log($("#offsetdiv .div1").offset().top)
console.log($("#offsetdiv .div1").offset().left)
console.log($("#offsetdiv .div2").offset().top)
console.log($("#offsetdiv .div2").offset().left)
//2.2-position()得到的是偏移量对象,有top和left两个属性:是相对于已定位的父级标签的偏移量
console.log($("#offsetdiv .div1").position().top)
console.log($("#offsetdiv .div1").position().left)
console.log($("#offsetdiv .div2").position().top)
console.log($("#offsetdiv .div2").position().left)
//2.3-scrollTop放在监听事件才有效
//练习-返回顶部
window.onscroll=function(){if($(window).scrollTop()>100){ //窗口滚动滑轮距离顶部的距离$(".gotop").removeClass("hide")} else {$(".gotop").addClass("hide")}
}
$(".gotop").click(function(){$(window).scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//练习-对标签元素应用scrollTop
// var $btEle=$("<button>");
// $btEle.html("回顶部")
// $btEle.addClass("aftb hide")
// $("#offsetdiv .div2").after($btEle);
$("#offsetdiv .div2").after("<button class='aftb hide'>回顶部</button>");
$("#offsetdiv .div2").html("<h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1>")
$("#offsetdiv .div2").css("overflow", "auto");
$("#offsetdiv .div2").scroll(function (){if($(this).scrollTop()>0){ //窗口滚动滑轮距离顶部的距离$(".aftb").removeClass("hide")} else {$(".aftb").addClass("hide")}
});
$(".aftb").click(function(){$("#offsetdiv .div2").scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//2.4-scrollLeft放在监听事件才有效,(左右滑轮,类似上下滑轮)
3.3 尺寸
console.log($("#offsetdiv .div2").height()) // 获取内容的高度
$("#offsetdiv .div2").height("300px") // 修改内容的高度
console.log($("#offsetdiv .div2").innerHeight()) // 获取内容+内边距padding的高度
console.log($("#offsetdiv .div2").outerHeight()) // 获取内容+内边距padding+边框border的高度
console.log($("#offsetdiv .div2").outerHeight(true)) // 获取内容+内边距padding+边框border+外边距margin的高度
console.log($("#offsetdiv .div2").width()) // 获取内容的宽度
$("#offsetdiv .div2").width("300px") // 修改内容的宽度
console.log($("#offsetdiv .div2").innerWidth()) // 获取内容+内边距padding的宽度
console.log($("#offsetdiv .div2").outerWidth()) // 获取内容+内边距padding+边框border的宽度
console.log($("#offsetdiv .div2").outerWidth(true)) // 获取内容+内边距padding+边框border+外边距margin的宽度
3.4 索引
$("ul li").index(); //获取标签集合的索引