jQuery

最新推荐文章于 2020-05-24 07:19:52 发布

valentinelzt

最新推荐文章于 2020-05-24 07:19:52 发布

阅读量85

点赞数

分类专栏： Notes

本文链接：https://blog.csdn.net/valentinelzt/article/details/105454026

版权

Notes 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

jQuery入口函数

// 第一种 简单易用
$(function () {
	// 此处为页面DOM加载完成的入口
})
// 第二种  繁琐，但是也可以实现
$(document).ready(function(){
	// 此处为页面DOM加载完成后的入口
})

总结：

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
相当于原生 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

jQuery 对象和 DOM 对象

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把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.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

jQuery 选择器

基础选择器

$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号

名称	用法
ID选择器	`$("#id")`` 获取指定的id元素
全选选择器	`$('*')` 匹配所有元素
类选择器	`$('.className')` 获取同一类class元素
标签选择器	`$('div')` 获取同一类标签的所有元素
并集选择器	`$(('div,p,li'))` 选取多个元素怒
交集选择器	`$('li.current')` 交集元素

层级选择器

后代选择器和子代选择器

名称	描述
子代选择器	`$('ul>li')` 使用>号，获取亲儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	`$('ul li')` 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>        
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>

筛选选择器

语法	用法
`:first`	`$('li:first')` 获取第一个li元素
`:last`	`$('li:last')` 获取最后一个li元素
`:eq(index)`	`$('li:eq(2)')` 获取到li元素中，选择索引号为2的元素，索引号index从0开始
`:odd`	`$('li:odd')` 获取到的li元素中，选择索引号为奇数的元素
`:even`	`$('li:even')` 获取到的li元素，选择索引号为偶数的元素

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

其它筛选方法（寻找父子兄节点）

语法	用法
`parent()`	`$('li').parent()` 查找父级
`children(selector)`	`$('ul').children('li')` 相当于`$('ul>li')`，最近一级（亲儿子）
`find(selector)`	`$('ul').find('li')` 相当于`$('ul li')` 后代选择器
`siblings(selector)`	`$('.first').siblings('li')` 查找兄弟节点，不包括自己本身
`nextAll([expr])`	`$('.first').nextAll()` 查找当前元素之后所有的同辈元素
`prevtAll([expr])`	`$('.last').prevAll()` 查找当前元素之前所有的同辈元素
`hasClass(class)`	`$('div').hasClass('protected')` 检查当前元素是否含有某个特定的类，如果有，则返回true
`eq(index)`	`$('li').eq(2)` 相当于`$('li:eq(2)')`，index从0开始

parents()可以返回所有父级 element.parents('.box')

jQuery中的排他思想

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

隐士迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

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

链式编程

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

jQuery样式操作

操作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();

显示与隐藏

show([speed], [easing], [fn])
hide([speed],[easing],[fn])
toggle([speed],[easing],[fn])

参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

通常不带参数，直接显示隐藏即可

滑入滑出

slideDown([speed], [easing], [fn])
slideUp([speed],[easing],[fn])
slideToggle([speed],[easing],[fn])
参数都可以省略
speed：三种预定速度之一的字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

淡入淡出

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo();
fadeIn([speed],[easaing],[fn])
fadeOut([speed], [easing],[fn])
fadeToggle([speed],[easing],[fn])
参数都可以省略
speed：三种预定速度之一的字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
渐进方式调整到指定的不透明度
fadeTo([speed], opacity, [easing], [fn])
opacity透明度必须写，取值0~1之间
speed：三种预定速度之一二点字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;
animate(params, [speed], [easing], [fn])
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略
speed：三种预定速度之一的字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画排队的方法为：stop() ;
stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。
总结: 每次使用动画之前，先调用 stop() ,在调用动画。

事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

hover([over,]out)     // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

jQuery属性操作

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

元素固有属性`prop()`

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，以及<input>元素里面的type

//	获取属性语法
prop('属性')
// 设置熟悉语法
prop('属性', '属性值')

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected等。

元素自定义属性值 `attr()`

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

// 获取属性语法
attr('属性')   //类似getAttribute

// 设置属性语法
attr('属性', '属性值')   // 类似setAttribute

attr()除了普通属性操作，更适合操作自定义属性。

数据缓存`data()`

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

// 附加数据语法
data('name', 'value')  // 向被选的元素附加数据

// 获取数据语法
data('name')

可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

jQuery文本属性值

最常见的有如下三种

jQuery文本属性	原生JS属性
`html()`	`innerHTML`
`text()`	`innerText`
`val()`	`value`

普通元素内容`html()`

html()   // 获取元素内容

html('内容')    //设置元素内容

普通元素文本内容`text()`

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

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

表单的值`val()`

val()    // 获取表单的值

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

html() 可识别标签，text() 不识别标签。

jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

遍历元素

jQuery隐式迭代是对同一类元素做了相同的操作，如果想要给同一类元素做不同的操作，就需要用到遍历

$('div').each(function(index, domEle){ xxx;})

each()方法遍历匹配每一个元素，主要用DOM处理，each每一个
里面的回调函数有两个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
如果向使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)

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

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

$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
里面的函数有两个参数，index是每个元素的索引号，element遍历内容

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

创建、添加、删除

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

// 创建
$('<li></li>');  // 动态创建一个li

// 内部添加，把内容放到匹配元素的**最后面**
element.append('内容')

// 内部添加，把内容放到匹配元素的**最前面**
element.prepend('内容')

// 外部添加
element.after('内容')   // 把内容放入目标元素后面
element.before('内容')   // 把内容放入目标元素前面

// 删除元素
element.remove()   // 删除匹配的元素（本身）
element.empty()  // 删除匹配的元素集合中所有的子节点
element.html('')    // 清空匹配的元素内容

注意：
内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，他们是兄弟关系

jQuery尺寸、位置操作

尺寸操作

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

语法	用法
`width() / height()`	取得匹配元素高度和宽度值只算 width/height
`innerWidth() / innerHeight()`	取得匹配元素宽度和高度值包含 padding
`outerWidth() / outerHeight()`	取得匹配元素宽度和高度值包含 padding、border
`outerWidth(true) / outerHeight(true)`	取得匹配元素宽度和高度值包含padding、border、margin

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字型，则是修改相应值
参数可以不写单位

jQuery位置操作

jQuery的位置操作有三个：offset() position() scrollTop() scrollLeft()

`offset()`设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标，根父级没有关系
该方法有两个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
可以设置元素的偏移：offset({top: 10, left: 30})

`position()`获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
该方法有两个属性left、top。position().top用于获取距离父级顶部的距离，position().left用于获取距离定位父级左侧的距离
该方法只能获取

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

scrollTop()方法设置或返回被选元素被卷去的头部
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

jQuery事件注册

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

element.事件(function(){})

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

其它事件和原生基本一致
mouseover mouseout blur focus change keydown keyup resize scroll

jQuery 事件处理

因为普通注册事件方法的不足，jQuery又开发了多个处理方法
on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发

事件处理 on() 绑定事件

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live()/ delegate() /on()等，其中最好用的是:on()

语法

// 可以绑定多个事件 多个处理事件的处理程序
$('div').on({
	mouseover: function(){},
	mouseout: function(){},
	click: function(){}
})

// 如果事件处理程序相同
$('div').on('mouseover mousesout', function(){
	$(this).toggleClass('current')
})

--------------------------------------------------------

// on()可以事件委派（把原来加给子元素身上的事件绑定到父元素身上，就是把事件委派给父元素）
$('ul').on('click', 'li', function(){
	alert('hello world');
})
// 在此之前 有bind()  live()  delegate()等方法来处理事件绑定或者事件委派，最新版本请用on代替

---------------------------------------------------------

// 动态创建元素，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模式不回触发元素的默认行为  这是和前面两种的区别

jQuery 事件对象

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

语法

element.on(events, [selector], function(event){})
// 阻止默认行为：event.preventDefault()  或者  return false
// 阻止冒泡：event.stopPropagation()

jQuery 拷贝对象

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

语法

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

deep：如果设为true为深拷贝，默认为false 浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆，修改目标对象不回影响被拷贝对象

jQuery 多库共存

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

解决方案：
- 把里面的$符号同一改成jQuery，比如jQuery(‘div’)
- jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict();

valentinelzt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery入口函数// 第一种简单易用$(function () { // 此处为页面DOM加载完成的入口})// 第二种繁琐，但是也可以实现$(document).ready(function(){ // 此处为页面DOM加载完成后的入口})总结：等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。相当于原...
复制链接

扫一扫