文章目录
JQuery
1. 介绍
JQuery，即JavaScript和Query(查询)，是辅助JavaScrip开发的js类库
JQuery的核心思想：write less，do more，实现了很多浏览器的兼容问题
JQuery免费开源，语法设计可以使开发更加便捷，例如操作文本对象，选择DOM对象，制作动画效果，事件处理，使用Ajax以及其他功能。
官网：jQuery
2. 核心函数
怎么为按钮添加相应函数
- 使用JQuery查询到标签对象
- 使用
标签对象.click( function() { } )
在JQuey中$称为核心函数，能完成JQuery的很大功能，$() 就是调用这个函数
$作用：
-
传入参数为函数时，表示页面加载完成之后，相当于
window.onload = function() {} -
传入是HTML字符串时，会给我们创建这个
html对象 -
传入参数是选择器字符串时，
$("#id01")： id选择器，根据id查询标签对象$(".class属性值")： 类型选择器$("标签名")： 标签选择器 -
传入的是dom对象时，会把
dom对象转化为JQuery对象
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQueryHello</title>
<!-- 引入JQuery库-->
<script type="text/javascript" src="../lib/jquery-3.5.1.js"> </script>
<script type="text/javascript">
/*
alert($); 显示有值，函数，代表引入成功了,$是一个函数
$( function () { }) -> 页面加载完之后，相当于 window.onload = function() {}
var $btnObj = $("#btn01") ->
表示按id查询标签对象，返回的是JQuery对象，命名默认$开头，作用相当于document.getElementById("btn01");
$btnObj.click() -> click()是个函数，即绑定单击事件，要传入一个函数
*/
$( function () {
//1.
var $btnObj = $("#btn01");
$btnObj.click(function () {
alert("JQuery Hello Word");
});
//2. 用以前的方法就会很麻烦
$("<div> <span>div里面的span01标签</span> </div>").appendTo("body");
});
</script>
</head>
<body>
<button id="btn01">SayHello</button>
</body>
</html>
其他函数：
jquery对象.click( function() { })： 绑定单击事件，传入一个函数，这个也有this参数
jquery对象.css("...", "...")： 设置和获取样式，一个属性，一个值
jquery对象.each( function() { })： 遍历元素的方法，传入一个函数，是遍历做的工作
函数内部有个隐形参数this，就是当前操作的的dom对象
var $ch = $("checkbox:checked"); //筛选出表单复选框中选中的
for (var i = 0; i < $ch.length; i++) { //传统的
alert($ch[i]); //取出来的是dom对象
}
$ch.each(function () {
alert(this); //取出来的是当前dom对象
})
$(document).ready(function () { }) === $(function () { }) 等价都是页面加载完成后
$(":text").val() val()可以操作表单项的value属性值，传值就是设置，不传就是获取
3. Dom对象和JQuery对象
-
区别
Dom对象：上面那些
document.方法得到的对象就是dom对象，alert显示object HTML标签名ElementJQuery对象：通过JQuery提供的API创建出来的对象，查询出来的对象，通过$包装的dom对象，alert显示
object Object使用上的区别：JQuery对象不能使用Dom对象的属性和方法，Dom对象也不能使用JQuery对象的属性和方法
-
JQuery对象本质是什么?
var $buttons = $("button"); for (var i = 0; i < $buttons.length; i++) { alert($buttons[i]); } // 显示是的object HTMLButtonElement，是个dom对象数组 + JQuery提供的一系列功能函数
-
相互转化
//dom -> jquery 1.先有dom对象 2. $(Dom对象) //jquery -> dom 1.先有jquery对象 2.jquery对象[下标]
4. JQuery的选择器
⭐⭐⭐
-
基本选择器
#id例如：$(“#btn01”)element例如：$(“div”).class例如：$(“.myClass”)*全部select1,select2,...组合说明：如果是
p.myClass代表必须是p标签而class属性是myClass
-
层级选择器
ancestor空格descendant例如：找到form里面的所有input$("form input")parent > child例如：在给定的父元素下取子元素，注意只取子元素，孙子元素不取prev + next例如: 匹配所有紧接着prev元素后的一个(同辈)next元素$("label + input")prev ~ siblings例如：匹配prev之后的所有(同辈的)siblings 元素（prev和siblings同辈）<!-- 1. $("label + input") 会匹配<input type="text"/> ，<input type="password"/> --> <!-- 2. $("label ~ input") 会匹配下面所有的input的标签--> <label> label1 </label> <input type="text"/> <label> label2 </label> <input type="password"/> <div> div </div> <input type="file"/>
-
基本过滤选择器
:first获取第一元素 ，例如$("li:first"):last最后一个元素:not(selecter)去除所以于给定选择器匹配的元素 例如：不要选中的$("input:not(:checked)")，除了myClass类外的所有按钮$("button:not(.myClass)"):even匹配所有索引值为偶数的元素，从0开始计数 例如：查找表格的1，3，5…行$("tr:even"):odd匹配所有索引值为奇数的元素:eq(index)匹配给定索引值的元素，例如：查找表格第一行$("tr:eq(1)"):gt(index)匹配大于给定索引值的元素:lt(index)匹配小于给定索引值的元素:header匹配类似h1, h2, h3…之类的标题元素:animated匹配所有正在执行动画效果的元素上面的可以组合使用，例如：选择没有执行动画的最后一个标签
$("div:not(:animated):last")
-
内容过滤选择器
:contains(text)匹配给定文本的元素:empty匹配所有不包含子元素或者文本的空元素:parent匹配含有子元素或者文本的元素 (非空):has(selector)匹配含有选择器所匹配的元素的元素<div> <p>Hello Word</p> </div> <div> Hello Word </div> <!-- $("div:has(p)") 返回第一个div的jquery对象,即包含p的div -->
-
属性过滤器选择器
[attribute]匹配包含给定属性的元素，例如：$("div[id]")[attribute]=value匹配给定属性是某个特定值的元素[attribute]!=value匹配不含有指定的属性或属性不等于特定值的元素这样写可以过滤有属性且不等于特定值：
$("div[name][name!=Jack]")[attribute]^=value匹配给定属性是以某些值开始的元素，类似正则里面的[attribute]$=value匹配给定属性是以某些值结尾的元素[attribute]*=value匹配给定属性是以包含某些值的元素[selector1][selector2][selector3]复合属性选择器，需要同时满足多个条件时使用
-
表单过滤选择器 （以下为针对表单的）
:input匹配所有input，textarea，select，button 元素，用的少:text匹配所有的单行文本框， 例如：$(":text"):password:radio:checkbox:submit:image:reset:button:file，:hidden匹配不可见的元素或者type为hidden的元素这些都是匹配表单中冒号后面的所有元素
-
表单对象属性过滤
:enable匹配所有可用元素:disabled匹配所有不可用元素这样就是不可用了 ：
<input disabled="disabled" type="button" value/>:checked匹配所有选中的被选中的元素(复选框，单选框，不包括select中的option):select匹配所有选中的option元素 例如：$("select option:select")
5. JQuery元素的筛选
var $ps = $("p"); //先按照标签名查
//expr 就是selector选择器，上面的7类选择器都能用
//方法 写到字符串里面
$ps.eq(index) == :eq(index)
$ps.first() == :first()
$ps.last() == :last()
$ps.has(expr|ele) == :has()
$ps.filter(expr|obj|ele|fn) // 筛选出与指定表达式匹配的元素集合，多个表达式逗号隔开
$ps.is(expr|obj|ele|fn) // 根据参数检查匹配元素集合，有一个元素符合返回true
$ps.not(expr|ele|fn) == :not() // 删除指定表达式匹配的元素
$ps.children([expr]) == parent>child // [可有可无]
$ps.find(expr|obj|ele) == ancestor空格descendant
$ps.next([expr]) == prev+next
$ps.nextAll([expr]) == prev~siblings
$ps.nextUntil([exp|ele][,fil]) // 查找当前元素之后的所有同步元素，直到遇到匹配的那个元素为止,区间
$ps.parent([expr]) // 取得包含所有匹配元素的唯·一父元素的元素集合
$ps.prev([expr]) // 取得一个包含匹配元素集合中每一个元素紧邻的前一个同辈元素的元素集合,与next()相反
$ps.prevAll([expr]) // 前面全部，类似nextAll()
$ps.prevUntil([exp|ele][,fil]) // 类似nextUntil()
$ps.siblings([expr]) // 前后的所有同辈元素
$ps.add(expr|ele|html|obj[,con]) // 把add匹配的选择器的元素添加到当前的jquery对象中,一并返回
7. JQuery的属性操作
html() : 设置/获取起始标签和结束标签里面的内容，和dom对象里面的innerHTML属性一样
text() ：设置/获取起始标签和结束标签里面的文本，innerText一样
val() ： 设置/获取表单项的value属性值，dom对象里面的value属性一样
不传参数是获取，传入是设置
val函数还能同时设计多个表单项的选中状态，批量操作复选框的选中状态
<script type="text/javascript">
//val([" "]) 中间放想要选中的value的属性值
$(":checkbox").val(["checkbox01","checkbox02"]);
//还可以同时操作单选框复选框等
$(":radio, :checkbox").val(["radio01", "checkbox01", "checkbox02"]);
</script>
<input type="checkbox" name="test01" value="checkbox01"/> checkbox01
<input type="checkbox" name="test01" value="checkbox02"/> checkbox02
<input type="radio" name="test01" value="radio01"> radio01
attr() 可以获取/设置属性的值， 传一个参数是获取指定属性的值，传入两个参数是设置属性的值，这个函数很强大，还可以操作非标准的属性，比如自定义属性：abc : abcValue…
不推荐操作checked，readOnly，selected，disabled…
prop() 和atter几乎一样，只推荐操作上面不推荐操作的
$(":checkbox:first").attr("name"); //操作上面的三个单选复选
$(":checkbox:first").attr("name", "abc");
//操作选中状态
$(":checkbox:first").attr("checked"); //输出 undefined，官方觉得这是一个错误,所以出来了prop
$(":checkbox:first").prop("checked"); //输出 false
$(":checkbox:last").attr("checked"); // checked
$(":checkbox:last").prop("checked"); // true，所以这个函数比较直观
$(":checkbox").prop("checked", true); // 全选
//复选框
<input type="checkbox" name="test01" value="checkbox01"/> checkbox01
<input type="checkbox" name="test01" checked="checked" value="checkbox02"/> checkbox02
8. DOM对象的增删改
-
内部插入
a.appendTo(b)把a插入到b元素的末尾，成为最后一个子元素 , b可以是选择器a.prependTo(b)把a插入到b的子元素前面，成为第一个子元素 -
外部插入
a.insertAfter(b)得到ba，同辈a.insertBefore(b)得到ab -
替换
old.replaceWith(new)用new替换掉old，new可以是content|fn ，注意顺序new.replaceAll(old)用new替换掉old，old可以是selector这两个函数功能一样都是替换全部，只是参数位置不同，replaceAll不能看字面意思
-
删除
a.remove()删除aa.empty()清空a标签里面的内容，标签还在
练习：动态删除添加表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <!-- js--> <script type="text/javascript" src="../lib/jquery-3.5.1.js"></script> <script type="text/javascript"> $(function () { //添加，创建行标签对象加入表格 $("#addEmpButton").click(function () { var empName = $("#empName").val(); var email = $("#email").val(); var salary = $("#salary").val(); //拼接 var $tr = $("<tr> <td>"+ empName +"</td> " + "<td>"+ email +"</td> " + "<td>" + salary +"</td> " + "<td> <a href='deleteEmp?id=001'>Delete</a> </td></tr>"); $tr.appendTo($("#empTable")); //给新添加的行数据中的a标签绑定删除事件 $tr.find("a").click(deleteTr) }) $("a").click(deleteTr); }); //复用的 删除函数 var deleteTr = function() { var $deleteTr = $(this).parent().parent(); if (confirm("确认删除"+ $deleteTr.find("td:first").text() +"吗？")) { $deleteTr.remove(); } return false; }; </script> </head> <body> <!--动态添加表格的行记录--> <table id="empTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> </tr> <tr> <td>Tom</td> <td>tom@qq.com</td> <td>5000</td> <td> <a href="deleteEmp?id=001">Delete</a></td> </tr> </table> <br/> <div id="formDiv"> <h4>添加新员工</h4> <table align="center"> <tr> <td>name</td> <td> <input type="text" name="empName" id="empName"/> </td> </tr> <tr> <td>email</td> <td> <input type="text" name="email" id="email"/> </td> </tr> <tr> <td>salary</td> <td> <input type="text" name="salary" id="salary"/> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc">submit</button> </td> </tr> </table> </div> </body> </html>
9. JQuery操作CSS
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式
offset() 获取/设置元素的坐标
<!-- css-->
div.myClass {
border: 1px solid black;
}
<!-- js-->
$("div:first").addClass("myClass ")
// 其实就是给div添加了class="myClass"属性，如果一开始有的话，还会继续添加进去，有两个值，中间空格分开
// 当然也可以添加多个，中间空格分开,removeClass()一样,不传参全部删掉
$("div:first").offset({
top: 20,
left: 50
});
<!-- html-->
<div> hhhh </div>
10. JQuery动画
-
基本动画
show()将隐藏的元素显示hide()将可见的元素隐藏toggle()可见是隐藏，不可见就显示，来回切换以上动画都可以传入参数，
第一个参数是动画执行的时长，以ms为单位（其实修改元素的宽高来实现动画的）
第二个参数是动画的回调函数，回调函数是动画执行完自动调用的函数。
-
淡入淡出动画
fadeIn()淡入(慢慢可见) ,fadeOut()淡出(慢慢不可见)fadeToggle()淡入/淡出切换这些方法也可以像上面一样传参！！
fadeTo()在指定的时长内慢慢将透明度修改为指定的值，0就是不可见，1就是完全可见，第一个参数是时间，第二个是指定透明度，第三个是回调函数。
练习 ：商品的展开收缩演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test03</title> <style type="text/css"> /* 后代选择器 用这个样式.showMore的标签里面 必须有a，a里面必须有span */ .showMore a span { padding-left: 15px; background: url("../images/up.jpg") no-repeat 1px 7px; } .showLess a span { padding-left: 15px; background: url("../images/down.jpg") no-repeat 1px 7px; } .promoted a { color: #F50; } </style> <script type="text/javascript" src="../lib/jquery-3.5.1.js"></script> <script type="text/javascript"> //一开始就显示六个，点击显示全部，在点击收起 $(function () { //初始显示六个 $("li:gt(5):not(:last)").hide(); // 绑定显示/隐藏 $("a:last").click(function () { $("li:gt(5):not(:last)").toggle(); //切换状态 //1.按钮即a标签上面的字也要变化,首先要判断状态 var flag = $("li:gt(5):not(:last)").is(":hidden"); //是否隐藏 if (flag) { $("div div").removeClass(); //先删除所有样式再添加 $("div div").addClass("showMore"); $("a:last span").text("点击展开全部品牌"); //去掉高亮 $("li:contains(佳能9)").removeClass("promoted"); $("li:contains(佳能2)").removeClass("promoted"); } else { $("div div").removeClass(); $("div div").addClass("showLess"); $("a:last span").text("点击收起"); //全部展示的时候，要给打广告的品牌高亮 $("li:contains(佳能9)").addClass("promoted"); $("li:contains(佳能2)").addClass("promoted"); } //2.一般标签上会有向上向下的图片，我们通过addClass()改样式就行了 return false; }) }) </script> </head> <body> <div class="SubCategoryBox" align="center"> <ul type="none"> <li><a href="...">佳能1</a> <i>(21341)</i></li> <li><a href="...">佳能2</a> <i>(13341)</i></li> <li><a href="...">佳能3</a> <i>(23141)</i></li> <li><a href="...">佳能4</a> <i>(213413)</i></li> <li><a href="...">佳能5</a> <i>(213131)</i></li> <li><a href="...">佳能6</a> <i>(213123)</i></li> <li><a href="...">佳能7</a> <i>(652341)</i></li> <li><a href="...">佳能8</a> <i>(24341)</i></li> <li><a href="...">佳能9</a> <i>(8135241)</i></li> <li><a href="...">佳能10</a> <i>(01341)</i></li> <li><a href="...">佳能11</a> <i>(121341)</i></li> <li><a href="...">其他品牌相机</a> <i>(14141414)</i></li> </ul> <div class="showMore"> <a href="more.html"> <span>点击展开全部品牌</span> </a> </div> </div> </body> </html>
11. JQuery事件的操作
-
页面加载完成后
$(function() { }) window.onload = function() {} // 两个页面加载完之后，区别？执行顺序？ jquery的先执行，原生的js后执行
jquery的页面加载完成之后是浏览器的内核解析完页面的标签创建好dom对象之后就会马上执行
原生的js的页面加载完之后，除了要等浏览器的内核解析完，页面的标签创建好DOM对象之后，还要等标签显示时需要的内容加载完成(例如iframe img)。
执行次数？
jquer注册页面加载几个执行几个，依次把所有注册的function顺序执行。
原生的js只执行最后一个赋值的函数，因为被覆盖了
-
其他常见事件 ⭐⭐⭐
click()可以绑定/触发单击事件，传func是绑定，不传参数是触发blur()change()…都是把前面的on去掉了，使用方法和上面一样。mouseover()鼠标移入事件mouseout()鼠标移出事件mousemove()鼠标移动事件bind()可以给元素一次性绑定一个或多个事件one()使用上和bind一样，但one函数绑定的事件只会响应一次unbind()和bind函数相反的操作，解除事件的绑定live()可以用来绑定选择器匹配的所有元素的事件，那怕这个元素是后面动态创建出来的也有效//中间用空格隔开，会响应多次 $("#buttons01").bind("click mouseover", function () { }); //这两个事件只会响应一次 $("#buttons02").one("click mouseover", function () { }); //点击无效了，也可以移除多个，不传删除全部 $("#buttons01").unbind("click"); //先绑定h1，后面新创建的h1点击也有效 $("h1").live("click", function () { });
-
事件的冒泡
是指父子元素同时监听一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件中去响应。
如何阻止？再子元素事件函数体中，返回
false，即可阻止事件的冒泡传递
-
事件对象
事件对象：是封装有触发的事件的一个js对象
怎么拿到/使用？ 在给元素绑定事件的时候，在事件的
function(event)参数列表添加一个参数，这个参数名习惯命名为event我们可以在
bind绑定多给我事件的时候，根据判断不同的事件做不同的工作$("div").bind("click mouseover", function (event) { if (event.type == "click") { console.log("点击"); } else { console.log("鼠标移入"); event.pageX; // event.pageY; } });
练习：选中大小图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test04</title> <script type="text/javascript" src="../lib/jquery-3.5.1.js"></script> <script type="text/javascript"> $(function () { $("#small").bind("mouseover mouseout mousemove", function (event) { if (event.type === "mouseover") { $("#showBig").show(); } else if (event.type === "mouseout") { $("#showBig").hide(); } else { $("#showBig").offset({ top: event.pageY + 10, // +10，防止图片闪闪，但鼠标移动快了还会闪 left: event.pageX + 10 }); } }); }); </script> </head> <body> <img id="small" src="../images/small.jpg"/> <div id="showBig"> <img src="../images/picture.jpg"/> </div> </body> </html>
1257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
