jQuery

最新推荐文章于 2024-09-14 18:52:56 发布

要努力努力再努力#

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量612

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_51270612/article/details/122131275

版权

jQuery

$ 是jQuery的顶级对象也可以使用 jQuery代替

jQuery的入口函数：

$(function(){

})

jQuery 对象和DOM对象

使用jQuery方法和原生js获取的元素是不一样的

1、用原生js获取来的对象就是DOM对象

2、jQuery方法获取的元素就是jQuery对象。

3、jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪书组形式存储）。

jQuery对象和DOM对象转换

// 1.DOM对象转换成jQuery对象方法只有一种
var box = document.getElementById('box'); //获取DOM对象
var jQueryobject = $(box); //把DOM对象转换为jQuery对象


//2、jQuery 对象 转换为 DOM对象有两种方法
// 2.1、jQuery对象[索引值]
var domObject1 = $('div)[0]

// 2.2jQuery对象.get(索引值)
var domObject2 = $('div)[0]

基础选择器

ID选择器 $(’#id’) 获取指定的元素

全选选择器 $(‘*) 匹配所有元素

类选择器 $(’.class’) 获取同一类 class的元素

标签选择器 $(‘div’) 选取同一类标签的所有元素

并集选择器 $(‘div, p , li’)选取多个元素

交集选择器 $(‘li.current’)交集元素

层级选择器

子代选择器 $(‘ul>li’) 使用>号，获取亲儿子层级的元素：注意，并不会获取孙子层级的元素

后代选择器 $('ul li '); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

层级选择器

:list $(“li:first”) 获取第一个li元素

:last $(‘li:last’) 获取最后一个li元素

:eq(index) $(‘li:eq(2)’) 获取到li元素中，选择索引号为2的元素，索引号 index从0开始

:odd $(‘li:odd’) 获取到li元素中，选择索引号为奇数的元素

:even $(‘li:even’) 获取到li元素中，选择索引号位偶数的元素

jQuery设置样式

$(‘div’).css(‘属性’，‘值’)

jQuery里的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式
$(this).css('color',''red);
$(this).siblings().css('color','');

隐式迭代

//遍历内部 DOM元素（伪书组形式存储）的过程 就叫做隐式迭代
。
//简单理解 ：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();//页面中的所有div全部隐藏，不用循环操作

链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color','red').siblings().css('color','');

jQuery样式操作

jQuery中常用的操作有两种：css()和设置类样式方法

1、操作css方法

常用一下三种形式：

//1、参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2、 参数是属性名，属性值，逗号隔开，是设置一组样式，
属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color','red');
// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值不用冒号隔开，属性可以不用加引号
$(this).css({'color':'white'},'font-size':'20px');

常用的三种设置类样式方法：

//1.添加类
$('div').addClass('current');
//2.删除类
$('div').removeClass('current');
//3.切换类
$('div').toggleClass('current');

jQuery效果

显示隐藏：show() / hide()/ toggle();

划入划出：slideDown() / slideUp()/slideToggle();

淡入淡出：fadeIn()/fadeOut()/fadeToggle();/fadeTo();

自定义动画:animate();

jQuery属性操作

jQuery常用属性操作有三种：prop()/attr()/data();

元素固有属性值prop()

固有属性就是元素本身自带的属性，比如元素里面的herf，比如元素里面的type。

语法获取属性语法

prop(‘属性’)

设置属性语法

prop(‘属性’，‘属性值’)

prop()除了普通属性操作，更适合操作表单属性：

disabled/checked/selected 等

元素自定义属性 attr()

用户自己给自己添加的属性，我们称为自定义属性。比如给div 添加index = 1

获取属性语法

attr(‘属性’) //类似原生getAttribute();

设置属性语法

attr(‘属性’,‘属性值’) //类似原生setAttribute()

attr()除了普通属性操作，更适合操作自定义属性。(该方法也可以获取H5自定义属性)

数据缓存data()

data()方法也可以在指定的元素上存取数据并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都被移除。

附加数据语法

data(‘name’,‘value’)//向被选元素附加数据。

获取数据语法

data(‘name’) //向被选元素获取数据

注意：同时，还可以读取HTML5自定义属性 data-index,得到的是数字型。

jQuery文本属性值

jQuery的文本属性值常见操作有三种：html()/text()/val();

分别对应js中的innerHTML、innerText和value属性。

语法

1、普通元素内容html() （相当于inner HTML）

html() //获取元素的内容

html(‘内容’)//设置元素的内容

2、普通元素文本内容text() (相当于原生innerText)

text() //获取元素的文本内容

text(‘文本内容’)//设置元素的文本内容

3、表单的值 val() （相当于原生value）

val() //获取表单的值

val(‘内容’) //设置表单的值

遍历元素

语法1

$(‘div’).each(function (index,domEle){

xxx

});

1、each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个

2、里面的回调函数有两个参数，index是每个元素的索引号，domEle 是每个DOM元素对象，不是jQuery对象

3、所以要使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(demEle)

注意：此方法用于遍历jQuery对象中的每一项，回调函数中元素为DOM对象，想要使用jQuery方法需要转换。

语法2

$.each(object,function(index,element){xxx;})

1、$.each()方法可用于遍历任何对象。主要用于数据处理，比如对象

2、里面的函数有2个参数；index是每个元素的索引号；element遍历内容

注意：此方法用于遍历jQuery对象中的每一项，回调函数中元素为DOM对象，想要使用jQuery方法需要转换。

创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多。重点使用以下部分

语法总合

1、创建

$(’

’);

动态的创建一个li

2.1 内部添加

element.append(‘内容’)

把内容放入匹配元素内部最后面，类似原生 appendChild.

element.prepend(‘内容’)；

把内容放入匹配元素内部的最前面。

2.2外部添加

element.after(‘内容’) // 把内容放入目标元素后面

element.before(‘内容’) // 把内容放入目标元素前排

1、内部添加元素，生成之后，它们是父子级关系。

2、外部添加元素，生成之后，它们是兄弟级关系。

3.删除元素

element.remove() //删除匹配的元素（本身）

element.empty() //删除匹配的元素集合中所有的子节点

element.html(’’) //清空匹配的元素内容

3.1 remove 删除元素本身。

3.2 empty() 和html()作用等价，都可以删除元素里面的内容，只不过html还可以设置内容。

ps: 以上只是元素的创建、添加、删除方法的常用方法，其他方法自行去查阅API

jQuery尺寸、位置操作

jQuery尺寸操作

jQuery尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

width()/height() 取得匹配元素宽度和高度值只算width/height

innerWidth()/innerHieght() 取得匹配元素的宽度和高度包括padding

outerWidth() / outerHeight() 取得匹配元素宽度和高度值包括padding、border

outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度住包括padding、border、margin

以上参数为空，则是获得相应值，返回的是数字型。

如果参数为数字，则是修改相应的值。

参数可以不必写单位。

jQuery位置操作

jQuery的位置操作主要有上：offset()、position()、scrollTop()scrollLeft()

offset()设置或获取元素便宜

1、offset()方法设置或返回被元素相对于文档的偏移坐标，跟父级没有关系。

2、该方法有两个属性 left、top、offset().top 用于获取文档顶部的距离，offset().left 用于获取文档左侧的距离。

3、可以设置元素的偏移：offset({top:10,left:30});

position() 获取元素便宜

1.position（）方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

2.该方法有2个属性left、top、position().top用于获取距离定位父级顶部的距离，position().left用于获取距离父级左侧的距离。

3.该方法只能获取

scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

1、scrollTop()方法设置或返回被选元素被卷去的头部。

2.不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

jQuery事件注册

jQuery为我们提供了方便的事件注册机制。

优点：操作简单，且不用担心事件覆盖等问题

缺点:普通的事件注册不能做事件委托，且无法实现事件节绑，需要借助其他方法。

语法：

element.事件(function(){})

$(‘div’).click(function(){事件处理程序})

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、keydown、keyup、resize、scroll等

jQuery事件处理

on(): 用于事件绑定，目前最好用的事件绑定方法

off():事件解绑

trigger()/triggerHandler():事件触发

语法

on的优势1

可以绑定多个事件，多个处理事件处理程序。
```
$('div').on({
  mouseover:function(){},
  mouseout:function(){},
  click:function(){},
});
如果事件处理程序相同
$('div).on('mouseover','mouseout',function(){
  $(this).toggleClass('current');
});
```
on()方法优势2

可以事件委派操作。事件委派定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
```
$('ul').on('click','li',function(){
  alter('hello world');
})
```
on()方法优势3

动态创建的元素，click()没有办法绑定事件，on可以给动态生成的元素绑定事件
```
$('div').on('click','p',function(){
  alert('俺可以给动态生成的元素绑定事件')
});
$('div').append($('<p>我是动态创建的p</p>))
```
事件处理off()解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery为我们提供了多种事件解绑方法：die()/undelegate()/off()等甚至还有支出法一次的事件绑定方法one(),

off()语法

$(‘p’).off() //解绑p元素的所有事件处理程序

$(‘p’).off(‘click’) //解绑p元素上面的点击事件

$(‘ul’).off(‘click’,‘li’) // 解绑委托事件

如果有的事件只想触发一次，可以使用one()来绑定事件。

事件处理trigger()自动触发事件

有些时候，在某些特定的条件下，我们希望某些事件能够自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。jQuery为我们提供了两个自动触发事件trigger()和triggerHandler();

语法

第一种：trigger()

element.click() //第一种简写形势

element.trigger（‘type’） //第二种自动触发模式

第二种：triggerHandler()

element.triggerHandler(type) //第三种自动触发模式

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

triggerHandler模式不会触发元素的默认行为，这是前面两种的区别。

jQuery事件对象

jQuery对DOM中的事件对象event进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法：

element.on(events[selector],function(event){})

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡：event.stopPropagation()

jQuery拷贝对象

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用。

语法：

$.extend([deep],target,object1,[objectN])

1.deep：如果设为true为深拷贝，默认为false 浅拷贝

2.target:要拷贝的目标对象

3.object1:待拷贝到第一个对象的对象。

4.objectN：待拷贝到第N个对象的对象。

5.浅拷贝目标对象引用的1被拷贝的对象地址，修改目标对象会影响被拷贝对象

6.深拷贝，前面加ture，完全克隆，修改目标对象不会影响被拷贝对象。

多库共存问题

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。

语法：

jQuery解决方案

1、把里面的$符号统一改为jQuery。比如jQuery(‘div’)

2、jQuery变量规定新的名称：$.noConflict()

var xx = $.noConflict()

ps ：该用插件就用插件别整那么没用的