文章目录
jQuery介绍与使用
jQuery介绍
什么是 jQuery ?
jQuery，顾名思义，也就是JavaScript和查询(Query)，它就是辅助JavaScript开发的js类库。
jQuery核心思想
它的核心思想是vrite less, do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery好处
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
jQuery的初体验
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--引入jQuery文件-->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*原生js单击事件实现方法
window.onload = function (){
let onclickObj = document.getElementById("btnId");
onclickObj.onclick = function (){
alert("js原生单击事件");
}
}
*/
//表示页面加载完成之后，相当于window.οnlοad= function (){}
$(function (){
//表示按id查询标签对象,变量前通常加$表示这是jq的变量
let $buttonObj = $("#btnId");
//绑定单击事件
$buttonObj.click(function (){
alert("jQuery的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
常见问题：
- 使用jQuery一定要引入jQuery库吗？
- 一定需要
- jQuery中的$到底是什么？
- $表示jQuery对象本身
- 怎么为按钮添加相应事件？
- 使用jQuery查询到标签对象
- 使用标签对象.click【事件类型】(function(){});
jQuery核心函数
$ 是jQuery的核心函数，能完成jQuery的很多功能， ( ) 就 是 调 用 ()就是调用 ()就是调用这个函数。
核心函数的四大作用：
//传入参数为函数时:在文档加载完成后执行这个函数
$(function (){
alert("页面加载完成之后自动调用")
})
$(function (){
//传入参数为HTML字符串时，根据这个字符串创建元素节点对象
$("<div>" +
"<span>1</span>" +
"<span>2</span>" +
"</div>").appendTo("body");
})
//传入参数为选择器字段串时：根据这个字符串查找元素节点对象
$("#id属性值"); //id选择器，根据id查询标签对象
$("标签名"); //标签名选择器，根据指定的标签名查询标签对象
$(".class属性值"); //类型选择器，可以根据class属性查询标签对象
//传入的参数为DOM对象时，会把这个对象转换为jQuery对象
let buttonObj = document.getElementById("btnId"); //此时是DOM对象
$(buttonObj); //此时是jQuery对象
jQuery对象与DOM对象的区别
什么是jQuery对象？
- 通过JQuery 提供的API创建的对象，是JQuery对象
- 通过JQuery包装的Dom对象，也是JQuery对象
- 通过JQuery提供的API查询到的对象,是JQuery对象
jQuery对象alert()后出来的效果是：[object object]
什么是DOM对象？
- 通过getElementByld()查询出来的标签对象是Dom对象
- 通过getElementsByName()查询出来的标签对象是Dom对象
- 通过getElementsByTagName(查询出来的标签对象是Dom对象
- 通过createElement()方法创建的对象，是Dom对象
DOM对象alert()后出来的效果是：[object 标签名 Element]
jQuery的本质是什么？
jQuery对象是Dom对象的的数组 + jQuery提供的一些列功能函数。
jQuery对象和Dom对象使用区别
jQuery对象与Dom的属性与方法不能相互使用。
Dom对象与jQuery对象互转（重点）
- dom对象转化为jQuery对象：
- 先有Dom对象
- $( DOM对象）就可以转换成为jQuery对象
- jQuery对象转为dom对象
- 先有jQuery对象
- jQuery对象[下标]去除Dom对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgsIsB0m-1613918593838)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210218195115297.png)]
jQuery选择器（重点）
基本选择器
-
#id:根据id选择标签
$("#id")； -
element：根据标签名选择标签
$("div"); //所有div标签 -
.class：根据class名选择标签
$(".myClass"); //class名为myClass的标签 -
*:选择所有标签
（$(*);//所有标签 -
selector1，selector2，selector3：多个条件组合选择
$("div,span,p.myClass");//包含div、span、p与class名为myClass的标签
练习：
$(function (){
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function (){
//css方法可以设置与获取样式
$("#one").css("background","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function (){
$(".mini").css("background","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background", "#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function (){
$("*").css("background","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function (){
$("span,#two").css("background","#bbffaa");
});
});
层级选择器
-
ncestor descendant：在给定的祖先元素下匹配所有的后代元素
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <!--JQ代码--> $("form input") <!--结果--> [ <input name="name" />, <input name="newsletter" /> ] -
parent > child:在给定的父元素下匹配所有的子元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<!--JQ代码-->
$("form > input")
<!--结果-->
[ <input name="name" /> ]
- prev + next:匹配所有紧接在 prev 元素后的 next 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<!--JQ代码-->
$("label + input")
<!--结果-->
[ <input name="name" />, <input name="newsletter" /> ]
- prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<!--JQ代码-->
$("form ~ input")
<!--结果-->
[ <input name="none" /> ]
练习：
$(document).ready(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body>div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one + div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
基本过滤选择器
-
**：frist:**获取第一个元素
-
**：last：**获取最后个元素
-
**：not(selector)：**去除所有与给定选择器匹配的元素
-
**：even：**匹配所有索引值为偶数的元素，从 0 开始计数
-
**：odd：**匹配所有索引值为奇数的元素，从 0 开始计数
-
**：eq(index)：**匹配一个给定索引值的元素
-
**：gt(index)：**匹配所有大于给定索引值的元素
-
**：lt(index)😗*匹配所有小于给定索引值的元素
-
**：header:**匹配如 h1, h2, h3之类的标题元素
-
**：animated:**匹配所有正在执行动画效果的元素
-
**：focus:**这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
练习：
$(document).ready(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择最后一个 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.选择索引值为偶数的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.选择索引值为奇数的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.选择所有的标题元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$("div:not(:animated)").css("background", "#bbffaa");
});
});
内容过滤器
- :contains(text)：匹配包含给定文本的元素
- :empty：匹配所有不包含子元素或者文本的空元素
- :has(selector)：匹配含有选择器所匹配的元素的元素
- :parent：匹配含有子元素或者文本的元素
练习
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
属性过滤器
- [attribute]：匹配包含给定属性的元素。
- [attribute=value]：匹配给定的属性是某个特定值的元素
- [attribute！=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
- [attribute^=value]：匹配给定的属性是以某些值开始的元素
- [attribute$=value]：匹配给定的属性是以某些值结尾的元素
- [attribute*=value]：匹配给定的属性是以包含某些值的元素
- [selector1][selector2][selectorN]：复合属性选择器，需要同时满足多个条件时使用。
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[title*='es'][id]").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
可见性过滤器
- ：hidden：匹配所有不可见元素，或者type为hidden的元素
- ：visble：匹配所有的可见元素
练习：
$(document).ready(function(){
//1.选取所有可见的 div 元素
$("#btn1").click(function(){
$("div:visible").css("background", "#bbffaa");
});
//2.选择所有不可见的 div 元素
//不可见：display属性设置为none，或visible设置为hidden
$("#btn2").click(function(){
$("div:hidden").show("slow").css("background", "#bbffaa");
});
//3.选择所有不可见的 input 元素
$("#btn3").click(function(){
alert($("input:hidden").attr("value"));
});
});
子元素过滤器
-
:nth-child:匹配其父元素下的第N个子或奇偶元素
//每个ul下的第二个li $("ul li:nth-child(n)") -
first-child 匹配第一个子元素
-
:last-child 匹配最后一个子元素
-
:only-child 匹配唯一的子元素
//每个ul下的唯一的li $("ul li:only-child")
表单过滤器
- :input：匹配所有 input, textarea, select 和 button 元素
- :text：匹配所有的单行文本框
- :password：匹配所有密码框
- :radio：匹配所有单选按钮
- :checkbox：匹配所有复选框
- :submit：匹配所有提交按钮
- :image：匹配所有图像域
- : reset：匹配所有重置按钮
- :button：匹配所有按钮
- :file：匹配所有文件域
- :hidden：匹配所有不可见元素，或者type为hidden的元素
表单对象属性
- :enabled:匹配所有可用元素
- :disabled:匹配所有不可用元素
- :checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
- :selected：匹配所有选中的option元素
练习
$(function(){
//1.对表单内 可用文本框赋值操作
$("#btn1").click(function(){
$(":text:enabled").val("New Value");
});
//2.对表单内 不可用文本框赋值操作
$("#btn2").click(function(){
$(":text:disabled").val("New Value Too");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
alert($(":checkbox:checked").size())
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
var str = "";
var eles = $(":checkbox:checked");
console.log(eles);
for(var i=0;i<eles.size();i++){
str += "【"+$(eles[i]).val()+"】";
}
alert(str)
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
var str = "";
//注意这个选择器的特殊，因为select里面的option是真正的被选择项，
//所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
//必须按照基本选择器选择后代的方法选
var els = $("select option:selected");
console.log(els);
for(var i=0;i<els.size();i++){
str += "【"+$(els[i]).val()+"】";
}
alert(str)
});
})
jQuery元素筛选
- eq()获取给定索引的元素
- first()获取第一个元素
- last()获取最后一个元素
- filter(exp)留下匹配的元素
- is()判断是否匹配给定的选择器，只要有一个匹配就返回，true
- has[exp)返回包含有匹配选择器的元素的元素
- not(exp)删除匹配选择器的元素
- children(exp)返回匹配给定选择器的子元素
- find(exp)返回匹配给定选择器的后代元素
- next()返回当前元素的下一个兄弟元素
- nextAll()返回当前元素后面所有的兄弟元素
- nextUntil()返回当前元素到指定匹配的元素为止的后面元素
- parent()返回父元素
- prev(exp)返回当前元素的上一个兄弟元素
- prevAll()返回当前元素前面所有的兄弟元素
- prevUnit(exp)返回当前元素到指定匹配的元素为止的前面元素
- siblings(exp)返回所有兄弟元素
- add()把add匹配的选择器的元素添加到当前jquery对象中
练习
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
/**
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
查找
children([expr])
closest(expr,[con]|obj|ele)1.6*
find(expr|obj|ele)
next([expr])
nextall([expr])
nextUntil([exp|ele][,fil])1.6*
parent([expr])
parents([expr])
parentsUntil([exp|ele][,fil])1.6*
prev([expr])
prevall([expr])
prevUntil([exp|ele][,fil])1.6*
siblings([expr])
串联
add(expr|ele|html|obj[,con])
*/
//(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
//first() 选取第一个元素
$("div").first().css("background-color","#bfa");
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
//last() 选取最后一个元素
$("div").last().css("background-color","#bfa");
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
//filter() 过滤 传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判断#one是否为:empty或:parent
//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
alert($("#one").is(":empty",":parent"));
});
//(6)has()选择div中包含.mini的
$("#btn6").click(function(){
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()选择div中class不为one的
$("#btn7").click(function(){
//not(selector) 选择不是selector的元素
$("div").not(".one").css("background-color","#bfa");
});
//(8)children()在body中选择所有class为one的div子元素
$("#btn8").click(function(){
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
//(9)find()在body中选择所有class为mini的div元素
$("#btn9").click(function(){
//find() 选出所有的后代元素
$("body").find("div.mini").css("background-color","#bfa");
});
//(10)next() #one的下一个div
$("#btn10").click(function(){
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one后面所有的span元素
$("#btn11").click(function(){
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之间的元素
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一个div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings().css("background-color","#bfa")
});
//(18)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two")
.css("background-color","#bfa");
});
});
jQuery属性操作
-
html()它可以设置和获取起始标签和结束标签中的内容。跟dom 属性innerHTML一样。
-
text()它可以设置和获取起始标签和结束标签中的文本。跟dom属性innerText一样。
-
val()它可以设置和获取表单项的value属性值。跟dom属性value一样（在表单中设置时可以此属性设置选中选项，只要把表单中的value值放进val()方法中即为选中状态）
//选中checkbox中的value为checkbox1，chebox2的复选框 $(":checkbox").val(["checkbox1","chebox2"]); -
attr()它可以设置和获取属性
- 不推荐操作checked、readOnly、selected、disabled等等，返回本身的值或undifined，没有设置值时返回undifined，所以不建议对以上属性进行操作。
- attr()方法还可以操作非标准的属性，比如自定义的属性：abc、aaa等
$(":checkbox:first").attr("name"); //获取第一个checkbox的name属性 $(":checkbox:first").attr("name","abc"); //设置第一个checkbox的name属性值为abc $(":checkbox:first").attr("abc","abcValue"); //设置自定义的属性 -
prop()它可以设置和获取属性
- 它的诞生只为了弥补attr()的不足，只推荐操作checked、readOnly、selected、disabled等等，返回ture或false
DOM的增删改查
内部插入
- appendTo()
a.appendTo(b);//把a插入到b子元素末尾，成为最后一个子元素
- prependTo()
a.prependTo(b);//把a插到b所有子元素前面，成为第一个子元素
外部插入
- insertAfter()
a.insertAfter(b); //得到ba
- insertBefore()
a.insertBefore(b); //得到ab
替换
- replacewith()
a.replacewith(b); //用b替换掉a
- replaceAll()
a.replaceAll(b); //用a替换所有的b（有多少个b就会被替换多少个），而不是把所有的b替换成a
删除
- remove()
a.remove(); //删除a标签
- empty()
a.empty(); //把a标签的内容变成空
jQuery事件操作
//Jq
$(function(){});
//原生js
window.onload = function(){}
它们分别在什么时候触发？
- jq的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
- 原生的js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象之后还要等标签显示时需要的内容加载完成。
他们的触发顺序？
- jq先执行
- js原生后执行
它们执行的顺序？
- jq的页面加载完成之后是全部把注册的function函数依次顺序全部执行。
- 原生js页面加载完成只会执行最后一次的赋值函数
jQuery中其他的事件处理方法
- click()它可以绑定单击事件,以及触发单击事件
- mouseover()鼠标移入事件
- mouseout()鼠标移出事件
- bind()可以给元素一次性绑定一个或多个事件。
- one()使用上跟bind一样。但是one方法绑定的事件只会响应一次。
- unbind[)跟bind方法相反的操作,解除事件的绑定
()
a.insertBefore(b); //得到ab
替换
- replacewith()
a.replacewith(b); //用b替换掉a
- replaceAll()
a.replaceAll(b); //用a替换所有的b（有多少个b就会被替换多少个），而不是把所有的b替换成a
删除
- remove()
a.remove(); //删除a标签
- empty()
a.empty(); //把a标签的内容变成空
jQuery事件操作
//Jq
$(function(){});
//原生js
window.onload = function(){}
它们分别在什么时候触发？
- jq的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
- 原生的js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象之后还要等标签显示时需要的内容加载完成。
他们的触发顺序？
- jq先执行
- js原生后执行
它们执行的顺序？
- jq的页面加载完成之后是全部把注册的function函数依次顺序全部执行。
- 原生js页面加载完成只会执行最后一次的赋值函数
jQuery中其他的事件处理方法
- click()它可以绑定单击事件,以及触发单击事件
- mouseover()鼠标移入事件
- mouseout()鼠标移出事件
- bind()可以给元素一次性绑定一个或多个事件。
- one()使用上跟bind一样。但是one方法绑定的事件只会响应一次。
- unbind[)跟bind方法相反的操作,解除事件的绑定
- live()也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
