jQuery总结

最新推荐文章于 2022-12-05 17:34:01 发布

Notail^0^

最新推荐文章于 2022-12-05 17:34:01 发布

阅读量251

点赞数

分类专栏： jQuery

此文章来自李晨璐专栏，转载请声明

本文链接：https://blog.csdn.net/lclcsdnblink/article/details/104130388

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是jQuery：

最重要的是查询，写的更少，做的更多
一个优秀的JS函数库（封装了Dom，BOM）
使用率高，中大型WEB项目开发首选
用的匿名函数调用，传的参数是window---jQuery库
封装简化DOM操作（CRUD）/AJAX

为什么用jQuery：

强大选择器：方便快速查找DOM元素
隐式遍历（迭代）：一次操作多个元素
读写合一：读数据/写数据用的是一个函数
事件处理
链式调用
DOM操作（CUD）
样式操作
dom和bom用起来太麻烦

怎么用jQuery：

需要下载，引入

引入：

1.服务器本地库，引入到项目中

//引用jQuery
<script type="text/javascrript" src="path"></script>

<script type="text/javascrript">
</script>

2.CDN远程库：（上线用远程）

网站：bootCDN

引入操作

1：直接复制标签

好处：减轻你的服务器压力

js库库文件

开发库：测试版

生产库：开发库的压缩版，体积更小，运行速度更快

版本：

1.x：兼容老版本，文件更大

2.x：部分IE8及以下不支持，文件小，执行效率更高

3.x完全不再支持IE8及以下版本，提供一些新的API，提供不包含ajax/动画API的版本

jQuery两把利器：

核心函数：

$/jQuery
$===jQuery //true
jQuery向外暴露的就是jQuery函数，可以直接使用

　jQuery函数使用：

１.作为一般函数调用：$(parram)

参数作为函数：当DOM加载完成后，执行此回调函数
参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
参数为DOM对象：将DOM对象封装成jQuery对象
参数为html标签字符串（用的少）:创建标签对象并封装成jQuery对象

//需求一：点击按钮，显示按钮的文本，显示一个新的输入框

//1.1）参数作为函数：当DOM加载完成后，执行此回调函数
$(function(){ //绑定文档加载完成的监听
//1.2）参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
    $('#btn').click(function(){ //绑定点击事件监听
        //this是什么？发生事件的dom元素（<button>）
        //alert(this.innerHTML)
        //1.3）参数为DOM对象：将DOM对象封装成jQuery对象
        alert($(this).thml())
        //1.4）参数为html标签字符串（用的少）:创建标签对象并封装成jQuery对象
        $('<input type="text" name="msg3"/><br/>').appendTo('div')
    })
})

２.作为对象使用:$.xxx()

$.each():隐式遍历数组
$.trim():去除两端的空格

核心对象:

$()就是个对象（object）
执行$()返回的对象--将标签转换为了一个对象
使用核心对象：$().XXX()
jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
伪数组的概念：1.是object对象，不是array 2.有length属性 3.有数值下标属性 4.没有数组特别的方法:forEach(),push(),pop(),splice()
jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom

基本行为：

size()/length:包含的DOM元素个数
[index]/get(index):得到对应位置的DOM元素
each():遍历包含的所有DOM元素
index():得到在所在兄弟元素中的下表

核心函数和核心对象关系

jQuery向外暴露的是函数，直接可用（$/jQuerry），jQuery对象是执行jQuery函数得到($())

//jQuery基本框架
(function(window){
    var jQuery=function(){
         return new xxx()
    }   
 window.$=window.jQuery=jQuery
})(window)

回调函数：是有事件触发执行，没有事件触发不执行，其他的函数直接执行，不需要触发

选择器：

简介：

选择器本身只是一个有特定语法规则的字符串，没有实质的用处
它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展
只有调用$()，并将选择器作为参数传入才能起作用
$(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回

基本选择器：

有特定语法规则（css选择器）的字符串
用来查找某个/些DOM元素:$(selector)

#id：id选择器
element：元素选择器
.class:属性选择器
*:任意标签
selector1,selector2,selectorN:取多个选择器的并集（组合选择器）
selector1selector2selectorN:取多个选择器交集（相交选择器）

//选择id为div1的元素
$('div1').css('baxkground','red')

//选择所有的div元素
$('div').css('baxkground','red')

//选择所有clss属性为box的元素
$('.box').css('baxkground','red')

//选择所有的div和span元素
$('div，span').css('baxkground','red')

//选择所有class属性为box的div元素
$('div.box').css('baxkground','red')

层次选择器：

找子孙后代，兄弟元素

<ul>
<li class="box">ccc</li>
<li ><span>bbb</span></li>
</ul>


//选中ul(父元素)下所有的span(后代元素)
$('ul span').css('background','yellow')

//选中ul(父元素)下所有的子元素span（子元素）
$('ul>span').css('background','yellow')

//选中class为box（prev元素）的下一个li（next元素）
$('.box+li').css('background','yellow')

//选中ul下的class为box的元素后面的所有兄弟元素
$('ul .box~*').css('background','yellow')

过滤选择器

多个过滤选择器不是同时执行，而是依次
在原有匹配元素中筛选出其中一些符合条件的

//选择内容为bbb的li
$('li:contains("bbb")').css('backgroud','red'))

表单选择器

//选择不可用的文本框输入框
$(':text:disabled').css('background','red')

工具方法：

//$.isArray(obj) 判断是否是数组
console.log($.isArray($('body')),$.isAray([]))
//$.each()
var obj={
    name:'Tom'
    setName:function(name){
        this.name=name
    }
}
$.each(function(key,value)){
    console.log(key,value)
})  

输出：
    name 'Tom'
    setName function(name){
        this.name=name
    }

$.each() 遍历数组或对象中的数据
$.trim()去除字符串两边的空格
$.type(obj)得到数据类型
$.isFunction(obj)判断是否是函数
$.parrseJson(json):解析json字符串转换为js对象/数组

单个代码原生代码执行速度要比jQuery速度快

jQuery属性：

操作标签的属性，标签体文本

attr(name)/attr(name,value):读写非布尔值的标签属性
prop(name)/pop(name,value)：读写布尔值的标签属性
removeAttr(name)/rremovePrrop(name):删除属性
addClass(classValue)：添加class
emoveClass(classvalue):移除指定class

//读取第一个div的title属性
console.log($('div:first').attr('title'))

//给所有的div设置name属性（value为atguigu）
$('div'.attr('name','atguigu'))

//移除所有div的title属性
$('div').removeAttr('title')

//给所有的div设置class='guiguClass',以前的class被覆盖
$('div').attr('class','guiguClass')

CSS模块

style样式

css（styleName）：根据样式名得到对应的值
css（styleName，value）:设置一个样式
css({多个样式对}):设置多个样式

位置坐标：

offset():读/写当前元素坐标（原点是页面左上角）
position():读当前元素坐标(原点是父元素左上角)
scollTop()/scollLeft():读/写元素/页面的滚动条坐标

尺寸：

width()/height():内容的width/height
innerrwidth/innerHeight:width+padding
outerWidth()/outterHeight():width+padding+boerder (分ture（多加一个）和false)

筛选模块

过滤：

在jQuery对象内部的元素中找出部分匹配的元素，并封装成新的jQuery对象返回
first(),last(),eq(index)
filterr(selector):对当前元素提要求
not(selector)：对当前元素提要求，并取反
has(selector):对子孙元素提要求

查找：

查找jQuery对象内部的元素的子孙/兄弟/父母元素，并封装成新的jQuery对象返回
children(selector)：子元素
find(selector)：后代元素
preAll（selector）:前的所有兄弟
siblings(selector):所有兄弟
parent():父元素

文档处理（CUD）模块

　插入：

（后部是元素内部的后面，后面是元素外部的后面）
append()/appendTo:插入后部
preppend()/preppendTo():插入前部
before():插到前面
after():插到后面

　删除：

remove():将自己及内部的孩子都删除
empty():掏空（自己还在）

　更新：

replaceWith（）

事件模块

　绑定事件

eventName(function(){})---绑定对应事件名的监听，例如:$('#div'').clivk(function(){});
on('eventName',function(){})---通用的绑定事件监听，例如:$('#div').on('click',function(){})

　优缺点：

eventName:编码方便，但只能加一个监听，且有的事件监听不支持，但有的事件没有对应的方法
on：编码不方便，可以添加多个监听，且更通用

常用事件：

click，mouseenter/mouseleava,mouseover/mouseout,focus/blur
houer(function(){},function(){})

　区别:

mouseover:在移入子元素时也会触发，对应mouseout
mouseenter：只在移入当前元素时才触发，对应mouseleave（）
hover()使用的就是mouseenter()和mouseleave()

解绑事件

off('eventName')

事件委托：

　理解：

将子元素的事件委托给父辈元素处理
事件监听绑定在父元素上，但事件发生在子元素上
当操作任何一个子元素时，事件会冒泡到父元素
父元素不会直接处理事件，最终调用的事件回调函数的是子元素：event.target

　好处：

新增的元素没有事件监听(如新添加一个标签，想要重复利用一些代码/样式)
减少监听的数量（n==>1）（监听一个父类，就可以监听多个子类）

　编码：

delegate(selector,'eventName',function(event){}) //回调函数中的this是子元素

例子：

<script>
//将li元素的事件监听(click)委托给父辈元素ul处理
$('ul'.delegate('li','click',function(){
    this.style.background='red'
})
$.(#btn1).click(function(){
    $('ul').append('<li>新增的li...</li>')
})


</script>

事件坐标

event.offsetX:原点是当前元素左上角
event.clientX：原点是窗口左上角
event.pageX:原点是页面左上角

事件相关：

停止事件冒泡：event.stopPropagation()
阻止事件的默认行为：event.preventDefault()

定时调用

setInterval(参数) 对象也是参数，函数也是对象
可以将一个函数，每隔一段时间执行依次
参数：

回调函数，该函数会每隔一段时间被调用依次

每次调用间隔的时间，单位时毫秒

返回值：
返回一个number类型的数据，来表示这个哪个计时器，这个数字用来作为定时器的唯一表示

停止定时器：

可以用这个返回值，停止该定时器

方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

clearInterval(参数)

延时调用

setTimeout(参数)
演示调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
例子：网页上的广告10秒之后关闭了

关闭延时调用
clearTimeout(参数)

延时调用和定时调用实际上可以相互替换的，在开发中自己选择

类的操作：（class）

修改样式，通过style
jQuery属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行的性能是比较差的，而且这种形式当我们要
修改多个样式时，不太方便
希望能有一行代码，可以修改多个样式
我们可以通过修改元素的class属性来间接的修改样式，这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染
页面一次，性能比较好，并且这种方式，可以使表现和行为进一步分离

Notail^0^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jQuery总结

目录什么是jQuery：为什么用jQuery：怎么用jQuery：引入：js库库文件版本：jQuery两把利器：核心函数：　jQuery函数使用：核心对象:基本行为：核心函数和核心对象关系选择器：简介：分类：基本选择器：层次选择器：过滤选择器表单选择器工具方法：jQuery属性：CSS模块style样...
复制链接

扫一扫

专栏目录