jquery

最新推荐文章于 2023-07-07 14:28:52 发布

Smile_DaLin

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

文章标签： JQuery基础

本文链接：https://blog.youkuaiyun.com/Smile_DaLin/article/details/99936422

0.一定要记住
1.起步开头
2.选择器
3.写法注意点
4.插入节点
5.ajax
6.面试题
7.解决冲突
8.核心函数
9.jQuery对象
10.静态方法
11.each()
12.map()
13.each()和map()的区别
14.其他静态方法
15.attr方法和prop方法区别
16.事件绑定
17.事件解绑
18.冒泡事件和默认事件
19.自动触发事件
20.自定义事件
21.事件命名空间
22.获取事件的坐标
23.事件委托
24.html 、text
25.获取图片的宽高
26.鼠标的移入和移出
27.index()、el()、get()
28.复制节点
29.$传入参数
30.jq基本结构

0.一定要记住
jq的强大之处是在于sizzle引擎的设计，
而现在sizzle引擎大多数用于爬虫提供便利

1.起步开头
要下载

$(function(){
 ...
})

或者

Jquery(function(){
 ...
})

或者

$(document).ready(function(){
....
})

或者

Jquery(document).ready(function(){
...
})

2.选择器
a.内容选择器

  $('p:contains(d)').css('background-color', 'red')

3.写法注意点
a.简洁原则
减少dom查询和减少dom操作（eg:将<li>for之后再插入dom）
b.巧选择对象加事件减少绑定事件的个数

4.插入节点
append():向每个匹配的元素内部追加内容，当做最后一个儿子

prepend():向每个匹配的元素内部前置内容。当做第一个儿子

after():在每个匹配的元素之后插入内容，当做后一个兄弟

before():在每个匹配的元素之前插入内容，当做前一个兄弟

wap():加多一个包裹的标签

upwap():移除标签

5.ajax
在这里插入图片描述
6.面试题

jQuery 库中的 $() 是什么？
$() 函数是 j Q u e r y () 函数的别称，$ () 函数用于将任何对象包裹成 jQuery 对象，之后被允许调用定义在 jQuery 对象上的多个不同方法
$(d o c u m e n t) . r e a d y () 是个什么函数？为什么要用它？ (a n s w e r) r e a d y () 函数用于在文档进入 r e a d y 状态时执行代码。当 D O M 完全加载（例如 H T M L 被完全解析 D O M 树构建完成时）， j Q u e r y 允许你执行代码。使用$ (document).ready()的最大好处在于它适用于所有浏览器，

ps:
原生js的window.onload要等dom元素加载完毕并且资源下载完从执行。并且编写的时候后面的会覆盖前面的。
但是
jquery只要dom元素加载完毕就开始执行，并且后面的不会覆盖前面的

3.$(this) 和 this 关键字在 jQuery 中有何不同
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用 val() 获取值等等。
而 this 代表当前元素，它是 javascript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jquery 方法，

4.你为什么要使用jQuery？你觉得jquery有哪些好处？
是轻量级的js框架，强大的选择器和出色的dom操作封装。
完善的ajax，可靠的事件处理机制，对浏览器兼容性好。

5.jQuery中的选择器吗，有哪些选择器
大致分为：基本选择器，层次选择器，表单选择器
基本选择器：id选择器，标签选择器，类选择器等
层次选择器：如：$(“form input”) 选择所有的form元素中的input元素 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲main > *")选择id为\dots$ (“tr:first”)选择所有tr元素的第一个 $(" t r : l a s t ") 选择所有 t r 元素的最后一个表单选择器：如：$ (":input")选择所有的表单输入元素 $(":text")选择所有的text的input元素

7.解决冲突
在这里插入图片描述
8.核心函数
$()就代表调用了jquery的核心函数，（）可以接受一个函数，接收一个字符串（字符串选择器/代码片段/1个dom元素=>都会返回一个jQuery对象）

9.jQuery对象
jQuery对象是一个伪数组（是对象+有0到length-1属性,并且有length）

10.静态方法
静态方法：直接加给类的方法，静态方法通过类名来调用
在这里插入图片描述
实例方法：给这个类的原型属性添加方法，通过实例对象调用实例方法

11.each()：回调函数第一个参数是index,第二个是value，没有返回值,可以遍历伪数组
forEach()不能遍历伪数组

$.each(arr,function(index,value){
})

12.map()：回调函数第一个参数是index,第二个是value，有返回数组
原生map()不能遍历伪数组
jq的map()可以遍历伪数组
$…map(arr,function(index,value){
})

13.each()和map()的区别
each()默认返回是遍历谁就返回谁，
map()默认的返回是空数组

each()不支持在回调函数对遍历的数组进行处理
map()回调函数会把对遍历的数组执行函数之后返回新的数组

14.其他静态方法
$.isWindow()
$.isAarry()
$.trim()
$.isFuntion():JQuery本质是匿名函数
$.holdReady(true)：作用暂停ready()的执行

15attr方法和prop方法区别

既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

16.事件绑定
在这里插入图片描述
注册多个相同/不同类型的事件，不会被覆盖，
高级浏览器可以通过addEventListener方法，但是低级浏览器不可以
可以通过attachEvent(“一定要加上on”,function(){})
封装addEvent()
function addEvent(dom,name,callBack){
if(dom.addEventListener){
dom.addEventListener(name,callBack)
}else{
dom.attachEvent(“on”+name,callBack)
}
}

17.事件解绑
off()如果不传参数就会移除所有的事件
off()如果传1个参数就移除指定类型的事件
off()如果传2个参数就移除指定类型的事件

18.冒泡事件和默认事件(提交表单给服务器会跳转到服务器，或者)
阻止冒泡事件方式：
方式1：在回调函数return false,
方式2：在事件函数传递参数e，e.stopPropagation();

阻止默认事件方式：
方式1：在回调函数return false,
方式2：在事件函数传递参数e，e.preventDefault();

19.自动触发事件
通过代码控制事件, 不用人为点击/移入/移除等事件就能被触发

自动触发事件方式
$(“selector”).trigger(“eventName”);
触发事件的同时会触发事件冒泡
触发事件的同时会触发事件默认行为

$(“selector”).triggerHandler(“eventName”);
触发事件的同时不会触发事件冒泡
触发事件的同时不会触发事件默认行为

20.自定义事件：自己起个名字通过on绑定事件，并且要响应事件(trigger/triggerHander)$(“selector”).on(“自己的名字”，function(){
…
})
$(" s e l e c t o r ") . t r i g g e r () 或者$ (“selector”).triggerHander()

21.事件命名空间：对同个对象有多个相同的事件，只想触发指定的事件
前提：事件是通过on绑定的事件，通过trigger或者triggerHander触发

 // 给父元素添加带命名空间事件
            $(".father").on("click.66", function () {
                alert("66 - father");
            });

            $(".father").on("click.nj", function () {
                alert("nj - 向左走");
左走");
         })

注意：如果用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的命名空间的事件也会被触发，而父元素没有命名空间的事件不会触发
如果用trigger触发子元素不带命名空间的事件，那么父元素不带命名空间和带命名空间的都会被触发

22.获取事件的坐标：当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象我们就能获取时间的坐标

获取事件坐标有三种方式
event.offsetX, event.offsetY 相对于事件元素左上角
event.pageX, event.pageY 相对于页面的左上角
event.clientX, event.clientY 相对于视口的左上角

event.page和event.client区别
网页是可以滚动的,而视口是固定的
所以想获取距离可视区域坐标通过event.client
想获取距离网页左上角的坐标通过event.client

23.事件委托：请别人帮忙，再把反馈的结果给我们
格式:$(parentSelector).delegate(childrenSelector, eventName, callback)

 //li委托ul响应事件
        $("ul").delegate('li','click',function(){
            console.log($(this).html())
        })
    里面this的问题：因为点击的是li，li没有click事件，向上冒泡到了ul.ul有click事件。但是原本的事件行为是li触发的

js中事件委托的好处：
（1）减少监听数量
（2）新增元素自动有事件响应处理

24.html 、text
html: 获取第一个匹配元素的html内容，也就是第一个匹配元素的innerHTML
text: 获取所有符合元素的文本内容，也就是所有元素的textContent

25.获取图片的宽高

$(function () {
    var width = $("img").width();
    var height = $("img").height();
    console.log('width：',width);
    console.log('height：',height);
})

26.鼠标的移入和移出
移动到子元素会触发事件mouseover和mouseout
移动到子元素不会触发事件mouseenter和mouseleave（推荐）
hover()同时监听移入和移出，第一个参数是监听移入函数，第二个是移出函数。
如果是只有1个参数就是监听移入和移出事件

27.index()、el()、get()
index()可以返回在dom元素在兄弟中排第几
el()可以返回当前对象被包装成jQuery对象
get()返回当前对象的dom元素的innerHTML

28.复制节点
clone([Even[,deepEven]])
浅复制不会复制节点的事件
深复制会复制节点的事件

29.$传入数据
$传入“”,null,undefined NaN 0 false,会返回一个空的jq对象
$传入字符串html代码片段：会将创建好的dom元素存储到jq对象中返回
$传入字符串选择器，会返回找到的所有元素存储到jq对象
$传入真数组和伪数组会将元素依次存储到jq对象中返回
$传入对象存储到jq对象中返回
$会将传的基本类型存储到jq对象中返回

30.jq基本结构
jq的本质是一个闭包=>目的：避免多个框架的冲突
jq通过window.xxxx= xxx让外部访问内部定义的变量
jq传递window的原因：方便压缩代码，提升查找效率
jq传递undefined的原因：方便压缩代码，IE9中undefined可以被修改，为了接收一个正确的undefined
jq.fn = jq.prototype