4.JQuery

第一章

1.了解jq

1.jQuery建议使用1.x版本,因为它兼容低版本的浏览器,使用1.x版本的min更好

2.jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

3.jQuery:The Write Less, Do More.

2.jq入口函数

1.jQuery的特点:写得少,做的多,效果好,支持链式编程.

2.JavaScript的入口函数

<script type="text/javascript">
    // 完整写法
    $(document).ready(function(){
         ......
    });
    // 简化写法 工作中常用的写法  $(匿名函数)
    $(function(){
        alert(2)
    })
</script>

我们在之前的代码⼀直在使⽤ $(function () {}); 这段代码进⾏⾸尾包裹,那么为什么必须要包裹这段代码呢？

为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作,如果在文档没有完全加载之前就运行函数，操作可能失败

区别	window.onload	$(document).ready()
执行时间	必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码	只需要等待⽹⻚中的 DOM结构加载完毕，就能执⾏包裹的代码
执行次数	只能执⾏⼀次,如果第⼆次,那么第⼀次的执⾏会被覆盖	可以执⾏多次,第N次都不会覆盖上⼀次
简写方案	无	$(function(){})

3.对比js和jq

1.原生js实现隐藏显示

 window.onload = function(){
        var oBtn = document.getElementById('btn')
        var oBox = document.getElementById('box')
        oBtn.onclick = function(){
            oBox.style.display = 'none'
        }
    }

2.jQuery实现隐藏显示

#jQuery 中所有选择器都以美元符号开头：$()
$(function(){
    // 查找到按钮绑定单击，查找div隐藏
    // $(目标)==jq选择器：和css一样的选择器,jq自己新增的选择器
    $('#btn').click(function(){
        // $('div').hide(500)
        // $('div').show(500)
        $('div').toggle(500)
    })
})

4.多个库间的冲突

jQuery 使用$符号作为 jQuery 的简写,如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?

使用noConflict() 方法会释放对 $ 标识符的控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>
    console.log($) //jQuery对象
    jQuery.noConflict();
    $.noConflict();
    console.log($); //undefined
    
    (function ($) {
        console.log($) //jQuery对象
    })(jQuery)
    
    jQuery(document).ready(function ($) {
    console.log($)//jQuery对象
    })
    
    JQuery(document)
</script>
</body>
</html>

5.jquery选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class='box'>
    <p id='p1'>alex</p>
    <ul>
        <li class='item1'>张三</li>
        <li class='item2'>李四</li>
        <li class='item3'>王五</li>
    </ul>
</div>
</body>
</html>

1.基础选择器

选择器	描述	返回	举例
#id	根据给定的 ID 匹配⼀个元素	单个元素	$(#p1)
.class	根据给定的类名匹配⼀个元素	集合元素	$(.box)
element	根据给定的元素名匹配⼀个元素（相当于 tagName ）	集合元素	$(ul)
*	匹配所有元素	集合元素

注意:我们可以采⽤jQuery核⼼⾃带的⼀个属性length来查看返回的元素个数

2.层次选择器

选择器	描述	返回	举例
ancestor descendant(空格)	选取相应的后代元素	集合元素	$(div li)
parent > child	选取⼦元素	集合元素	$(.box>ul>li)
prev + next	选取紧接在 prev 元素后⾯的下一个元素	集合元素	$(.item1+li)
prev ~ siblings	选取 prev 元素之后的所有siblings 元素	集合元素	$(.item~li)

3.过滤选择器

3.1基础选择器

选择器	描述	返回	举例
:first	选取第⼀个元素	单个元素	$(“p:first”)
:last	选取最后⼀个元素	单个元素	$(“p:last”)
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$(“p:not(.intro)”)
:even	索引为偶数(索引从0开始）	集合元素	$(“tr:even”)
:odd	索引为奇数(索引从0开始）	集合元素	$(“tr:odd”)
:eq(index)	索引等于index 的元素 (index 从0开始）	单个元素	$(“ul li:eq(3)”)
:gt(index)	索引⼤于index	集合元素	$(“ul li:gt(3)”)
:lt(index)	索引⼩于index	集合元素	$(“ul li:lt(3)”)

3.2内容选择器

选择器	描述	返回	举例
:contains(text)	查找⽂本中含有 “text” 的元素	集合元素	$(‘ul li:contains(张三)’)
:empty	匹配所有不包含⼦元素或者⽂本的空元素	集合元素	$(‘ul li:empty’) 注意:空格也是字符
:has(selector)	含有选择器所匹配的元素	集合元素	$(“div:has§”)
:hidden	选取所有不可⻅的元素	集合元素	$(“p:hidden”)
:visible	选取所有可⻅的元素	集合元素	$(“table:visible”)

3.4属性选择器

选择器	描述	返回	示例
[attribute]	拥有此属性的元素	集合元素	$("[href]")
[attribute=value]	属性的值为value的元素	集合元素	$("[href=‘default.htm’]")
[attribute!=value]	属性的值不为 value 的元素	集合元素	$("[href!=‘default.htm’]")
[attribute^=value]	属性的值以 value 开始的元素	集合元素	$("[title^=‘Tom’]")

3.5 子元素选择器

选择器	描述	返回	举例
:nth-child(index)	选取每个⽗元素下的第 index 个⼦元素或者奇偶元素(index 从1开始）	集合元素	$(“p:nth-child(2)”)
:first-child	选取每个⽗元素第⼀个⼦元素	集合元素	$(“p:first-child”)
:last-child	选取每个⽗元素最后⼀个⼦元素	集合元素	$(“p:last-child”)
:only-child	如果某个元素是它⽗元素中唯⼀的⼦元素,则会被匹配	集合元素	$(“p:only-child”)

3.6表单选择器

选择器	描述	返回	举例
:enabled	选取所有可⽤元素	集合元素	$(":enabled")
:disable	选取所有不可⽤元素	集合元素	$(":disabled")
:checked	选取所有被选中元素(复选框,单选框)	集合元素	$(":checked")
:selected	选取所有被选中元素(下拉列表)	集合元素	$(":selected")

选择器	描述	返回	举例
:input	选取所有的	集合元素	$(":input")
:text	选择所有单⾏⽂本框	集合元素	$(":text")
:password	选择所有的密码框	集合元素	$(":password")
:radio	选择所有的单选框	集合元素	$(":radio")
:checkout	选择所有的多选框	集合元素	$(":checkbox")
:submit	选择所有的提交按钮	集合元素	$(":submit")
:image	选择所有的图像按钮	集合元素	$(":image")
:reset	选择所有的重置按钮	集合元素	$(":reset")
:button	选择所有的按钮	集合元素	$(":button")

3.7 jQuery选择器完善的处理机制

1.如果元素不存在时,jQuery是不会报错的,但是原生的js是会报错的

2.$(#ID) 或者其他选择器获取的永远是对象,即使⽹⻚上没有此元素.使⽤ jQuery 检查某个元素是否存在要不能使⽤

if($('#box')){
 //dosomething
}

⽽是根据元素是否有⻓度判断：

if($('#box').length>0 ){ //dosomething }

或者转化为DOM元素来判断

if($('#box')[0]){ //dosomething }

6.jQuery的DOM操作

1.HTMLDOM操作

1.1插入节点

方法	描述	示例
append()	向每个匹配的元素内部追加内容	$(A).append(B)将B追加到A中
appendTo()	将所有匹配内部的元素追加到指定元素	$(B).appendTo(A)将B追加到A中
prepend()	在被选元素内部的开头插入指定内容	$(A).prepend(B) 将B插⼊到A前⾯
prependTo()	在被选元素内部的开头插入HTML元素	$(B).prependTo(A)将B插⼊到A前⾯
after()	在每个匹配的元素外部之后插⼊内容	$(A).after(B) 将B插⼊到A后⾯
insertAfter()	将所有匹配的元素插⼊到指定元素外部的后⾯	$(B).insertAfter(A) 将B插⼊到A后
before()	在每个匹配的元素外部之前插内容	$(A).before(B) 将B插⼊在A的前⾯
insertBefore()	将所有匹配的元素插⼊到指定元素外部的前⾯	$(B).insertBefore(A) 将 B插⼊在A的前⾯

1.2删除节点

方法	描述	示例
remove	移除元素,但不保留数据和事件	$(“p”).remove(".italic");
detach	如需移除元素,但保留数据和事件	$(“p”).detach()
empty	删除被选元素的子元素。	$("#div1").empty();

1.3 设置和查询

方法	描述	示例
html()	获取设置html内容	$("#test2").html(“Hello world!”)
text()	获取设置文本内容	$("#test1").text(“Hello world!”)
val()	读取或设置表单元素的内容	$("#test3").val(“RUNOOB”)
attr()	获取设置属性(对于 HTML 元素本身就带有的固有属性)
prop	获取设置属性(对于 HTML 元素我们自己自定义的 DOM 属性)

1.4 遍历

祖先

方法名	描述	举例
parent()	获得集合中每个元素的⽗级元素	$(“span”).parent();
parents()	获得集合中每个元素的祖先元素	$(" s p a n ") . p a r e n t s (" u l "); < b r >$ (“span”).parentsUntil(“div”);

后代

方法名	描述	举例
children()	获得匹配元素的⼦元素的集合(⼦元素⾮后代元素）	$(" d i v ") . c h i l d r e n (); < b r >$ (“div”).children(“p.1”);
find()	find() 方法返回被选元素的后代元素，一路向下直到最后一个后代	$(“div”).find(“span”);

同胞

方法名	描述	举例
siblings()	获得匹配元素前后⾯紧邻的同辈元元素	$(“h2”).siblings(“p”)
next()	返回被选元素的下一个同胞元素	$(“h2”).next()
nextAll()	返回被选元素的所有跟随的同胞元素	$(“h2”).nextAll()
nextUntil()	返回介于两个给定参数之间的所有跟随的同胞元素	$(“h2”).nextUntil(“h6”)
prev()
prevAll()
prevUntil()

过滤

方法名	描述	举例
first()	返回被选元素的首个元素	$(“div p”).first()
last()	返回被选元素的最后一个元素	$(“div p”).last()
eq()	返回被选元素中带有指定索引号的元素	$(“p”).eq(1);
filter()	不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回	$(“p”).filter(".url");
not()	返回不匹配标准的所有元素 not() 方法与 filter() 相反	$(“p”).not(".url");

其他

方法名	描述	举例
replaceWith(content,function(index))	将所有匹配的元素替换成指定的HTML或DOM元素	$(“p:first”).replaceWith(“Hello world!”)
replaceAll(selector)	⽤匹配的元素替换掉所有 selector匹配到的元素	$`("<span> <b>Hello world! </b></span>").replaceAll("p:last");`
wrap()	把所有匹配的元素⽤其他元素的结构化标记包裹起来	$(“p”).wrap(" ")
unwrap()	这个⽅法将移出元素的⽗元素	$(“p”).wrap(" ")
removeAttr()	删除⽂档中某个元素的特定属性	$(“p”).removeAttr(“style”);

1.5 复制节点

复制节点可以使⽤ clone() ⽅法

$("ul li").click(function(){
 $(this).clone().appendTo("ul");
})

但是这样复制的节点，被复制的新元素并不具有任何⾏为，如果需要新元素也具有相同的⾏为，那么就需要在 clone() ⽅法中传⼊参数 true

$("ul li").click(function(){
 $(this).clone(true).appendTo("ul");
})

2.CSSDOM操作

1.基本操作

方法名	描述	举例
css()	设置或返回样式属性
addClass()	添加 class 属性	$(“body div:first”).addClass(“important blue”);
removeClass()	删除指定的 class 属性	$(“h1,h2,p”).removeClass(“blue”);
toggleClass()	对被选元素进行添加/删除类的切换操作	$(“h1,h2,p”).toggleClass(“blue”)
hasClass()	是否含有某个类，返回布尔值

2.尺寸

方法名	描述	举例
width	设置或返回元素的宽度	$("#div1").width()
height()	设置或返回元素的高度	$("#div1").height()
innerWidth()	返回元素的宽度（包括内边距）	$("#div1").innerWidth()
innerWidth()	返回元素的宽度（包括内边距）	$("#div1").innerWidth()
outerWidth()	返回元素的宽度（包括内边距和边框）	$("#div1").outerWidth()
outerHeight()	返回元素的高度（包括内边距和边框）	$("#div1").outerHeight()

7.JQuery中的事件

1.常用事件

1.鼠标事件

方法名	描述	举例
click	当单击元素时，发生 click 事件	$(“p”).click(function(){ alert(“段落被点击了。”); });
dblclick	当双击元素时，触发 dblclick 事件。
mouseenter	当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件	$(“p”).mouseenter(function(){ $(“p”).css(“background-color”,“yellow”); });
mouseleave	当鼠标指针离开被选元素时，会发生 mouseleave 事件	$(“p”).mouseleave(function(){ $(“p”).css(“background-color”,“gray”); });
hover()	规定当鼠标指针悬停在被选元素上时要运行的两个函数	$(“p”).hover(function(){ $(“p”).css(“background-color”,“yellow”); },function(){ $(“p”).css(“background-color”,“pink”); })

2.键盘事件

方法名	描述	举例
keypress	键被按下(eypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）) keydown() 方法来检查这些键	$(“input”).keypress(function(){ $(“span”).text(i+=1); });
keydown	键按下的过程	$(“input”).keydown(function(){ $(“input”).css(“background-color”,“yellow”); })
keyup	键被松开	$(“input”).keyup(function(){ $(“input”).css(“background-color”,“pink”); })

表单事件

方法名	描述	举例
submit()	当提交表单时，会发生 submit 事件	$(“form”).submit(function(){ alert(“提交”); });
change()	会在元素失去焦点时发生	$(“input”).change(function(){ alert(“文本已被修改”); })
focus()	当元素获得焦点时发生 focus 事件	$(“input”).focus(function(){ $(“span”).css(“display”,“inline”).fadeOut(2000); });
blur()	当元素失去焦点时发生 blur 事件	$(“input”).blur(function(){ alert(“输入框失去了焦点”); });

文档事件

方法名	描述	举例
load()	当图像全部加载时警报文本	$(“img”).load(function(){ alert(“图片已载入”); });
resize()	当调整浏览器窗口大小时	$(window).resize(function(){ $(‘span’).text(x+=1); });
scroll()	当用户滚动指定的元素时	$(“div”).scroll(function(){ $(“span”).text(x+=1); });
unload()	当离开页面时，显示提示消息	$(window).unload(function(){ alert(“Goodbye!”); });

2.事件冒泡

问题:

假设⽹⻚上有两个元素,其中⼀个嵌套在另⼀个元素⾥⾯,并且都被绑定了 click 事件.同时元素上也绑定了 click 事件,这样的话,点击最内层的元素,会触发三次 click 事件.这是因为 JavaScript 的事件冒泡机制。

解决方案:

方法名	描述	举例
event.stopPropagation()	阻止事件冒泡到父元素,阻止任何父事件处理程序被执行	event.stopPropagation()
event.isPropagationStopped()	检查 event.stopPropagation() 是否被调用	event.isPropagationStopped()

3.阻止默认事件

问题:

⽹⻚中有⾃⼰的默认⾏为,例如单击超链接会跳转,单击“提交”按钮后表单会提交,有时需要阻⽌默认⾏为

方法名	描述	举例
event.preventDefault()	阻止元素发生默认的行为	event.stopPropagation()
vent.isDefaultPrevented()	检查 preventDefault() 是否被调用	event.isPropagationStopped()

4.其他事件

方法名	描述	举例
event.type	获取到事件的类型	event.type
event…target()	获取到触发事件的元素	event.target.nodeName
event.relatedTarget()	mousover 和 mouseout 所发⽣的元素
event.pageX event.pageY	获取到光标相对于⻚⾯的 x 坐标和 y 坐标	event.pageX
event.which()	⿏标单击事件中获取到的左,中,右键，在键盘事件中获取键盘的按键
event.metaKey()	为键盘事件获取 meta 键(win健)是否按下
one()	对于只要触发⼀次，随后要⽴即解除绑定的情况，jQuery 提供了one()⽅法. 当处理函数触发⼀次后,⽴即被删除	$(“p”).one(“click”,function(){})
on()	在被选元素及子元素上添加一个或多个事件处理程序(使用 on() 方法添加的事件处理程序适用于当前及未来的元素)	$(“p”).on(“click”,function(){ alert(“段落被点击了。”)
off	移除通过 on() 方法添加的事件处理程序	$(“p”).off(“click”);

8.动画

1.隐藏和显示

方法名	说明	举例
hide()	隐藏 HTML元素	$(“p”).hide(1000);
show()	显示 HTML元素	$(“p”).show();
toggle()	toggle() 方法来切换 hide() 和 show() 方法	$(“p”).toggle();

2. 淡入淡出

方法名	说明	举例
fadeIn()	淡入	$("#div1").fadeIn();
fadeOut()	淡出	$("#div1").fadeOut();
fadeToggle()	在 fadeIn() 与 fadeOut() 方法之间进行切换	$("#div1").fadeToggle()
fadeTo()	允许渐变为给定的不透明度	$("#div1").fadeTo(“slow”,0.15);

3.滑动

方法名	说明	举例
slideUp()	slideUp() 方法用于向上滑动元素	$("#panel").slideDown();
slideDown()	slideDown() 方法用于向下滑动元素	$("#panel").slideUp();
slideToggle()	slideDown() 与 slideUp() 方法之间进行切换	$("#panel").slideToggle();

4.动画

方法名	说明	举例
animate()	创建自定义动画(注意:操作所有 CSS 属性必须使用 Camel 标记法书写所有的属性名)	$(“div”).animate({left:‘250px’});
stop()	停止动画或效果	$("#panel").stop();

5.回调函数

参照菜鸟教程

6.链