jQuery 元素操作
- 创建一个元素
var div = $('<div></div>')
- 内部添加元素
// 向 div 元素中插入一个 span 元素，放在最后
$('div').append($('<span></span>'))
// 把 span 元素插入到 div 中去，放在最后
$('<span>hello</span>').appendTo($('div'))
// 向 div 元素中插入一个 span 元素，放在最前
$('div').prepend($('<span></span>'))
// 把 span 元素插入到 div 中去，放在最前
$('<span>hello</span>').prependTo($('div'))
- 外部添加
// 在 div 的后面插入一个元素 span
$('div').after($('<span></span>'))
// 在 div 的前面插入一个元素 span
$('div').before($('<span></span>'))
// 把 span 元素插入到 div 元素的后面
$('div').insertAfter($('<span></span>'))
// 把 span 元素插入到 div 元素的前面
$('div').insertBefore($('<span></span>'))
①内部添加元素，生成之后，它们是父子关系。
②外部添加元素，生成之后，他们是兄弟关系。
- 替换元素
// 把 div 元素替换成 span 元素
$('div').replaceWith($('<span></span>'))
// 用 span 元素替换掉 div 元素
$('<span></span>').replaceAll($('div'))
- 删除元素
// 删除元素下的所有子节点
$('div').empty()（本身）
// 把自己从页面中移除
$('div').remove()
// 清空匹配的元素内容
$('div').html('''')
①remove 删除元素本身。
②empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
- 克隆元素
// 克隆一个 li 元素
// 接受两个参数
// 参数1： 自己身上的事件要不要复制，默认是 false
// 参数2： 所有子节点身上的事件要不要复制，默认是 true
$('li').clone()
- 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
- 语法1：
$("div").each(function(index, domEle) { xxx; }）
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
$('ul li').css('background','red');
var arr = ['red','yellow','blue'];
var sum = 0;
$('ul li').each(function (i,elm) {
// i代表索引【$(elm)】
// console.log(i);
// console.log(elm);
$(elm).css('background', arr[i]);
var n = $(elm).text();
sum += Number(n);// sum = sum + n;
});
console.log(sum);
</script>
</body>
-
each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
-
里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
-
所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
- 语法2：
$.each(object，function(index, element){ xxx;})
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var arr = ['red','yellow','blue'];
$.each( arr , function (index,elem) {
console.log(index);
console.log(elem);
});
</script>
</body>
-
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
-
里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
元素尺寸
- 操作元素的宽和高
// 获取 div 元素内容位置的高，不包含 padding 和 border
$('div').height()
// 设置 div 内容位置的高为 200px
$('div').height(200)
// 获取 div 元素内容位置的宽，不包含 padding 和 border
$('div').width()
// 设置 div 内容位置的宽为 200px
$('div').width(200)
- 获取元素的内置宽和高
// 获取 div 元素内容位置的高，包含 padding 不包含 border
$('div').innerHeight()
// 获取 div 元素内容位置的宽，包含 padding 不包含 border
$('div').innerWidth()
- 获取元素的外置宽和高
// 获取 div 元素内容位置的高，包含 padding 和 border
$('div').outerHeight()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerHeight(true)
// 获取 div 元素内容位置的宽，包含 padding 和 border
$('div').outerWidth()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerWidth(true)
元素位置
- 元素相对页面的位置
// 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 })
// 获取定位到一个距离页面左上角 100 100 的位置
- 元素相对于父元素的偏移量
// 获取 div 相对于父元素的偏移量（定位的值）
$('div').position()
①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
②该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
注意：该方法只能获取。
- 获取页面卷去的高度和宽度
window.onscroll = function () {
// 获取浏览器卷去的高度
console.log($(window).scrollTop())
}
window.onscroll = function () {
// 获取浏览器卷去的宽度
console.log($(window).scrollLeft())
}
jQuery事件注册
- 绑定事件的方法
// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
console.log('我被点击了')
})
// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', { name: 'Jack' }, function (e) {
console.log(e) // 所有的内容都再事件对象里面
console.log(e.data) // { name: 'Jack' }
})
// 事件委托的方式给 button 绑定点击事件
$('div').on('click', 'button', function () {
console.log(this) // button 按钮
})
// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', { name: 'Jack' }, function (e) {
console.log(this) // button 按钮
console.log(e.data)
})
- 移除事件
- off() 方法可以移除通过 on() 方法添加的事件处理程序。
// 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)
// 移除事件使用 off
$('button').off('click', handler)
- 只能执行一次的事件
// 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)
- 自动触发事件trigger()
-
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
-
element.click() // 第一种简写形式
-
element.trigger("type")//第二种自动触发模式
-
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
- element.triggerHandler(type) // 第三种自动触发模式
- triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
可以直接使用的常见事件
- 可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法
- click
// 直接给 div 绑定一个点击事件
$('div').click(function () {
console.log('我被点击了')
})
// 给 div 绑定一个点击事件并传递参数
$('div').click({ name: 'Jack' }, function (e) {
console.log(e.data)
})
- dblclick
// 直接给 div 绑定一个双击事件
$('div').dblclick(function () {
console.log('我被点击了')
})
// 给 div 绑定一个双击事件并传递参数
$('div').dblclick({ name: 'Jack' }, function (e) {
console.log(e.data)
})
- scroll
// 直接给 div 绑定一个滚动事件
$('div').scroll(function () {
console.log('我被点击了')
})
// 给 div 绑定一个滚动事件并传递参数
$('div').scroll({ name: 'Jack' }, function (e) {
console.log(e.data)
})
- hover
// 这个事件要包含两个事件处理函数
// 一个是移入的时候，一个是移出的时候触发
$('div').hover(function () {
console.log('我会再移入的时候触发')
}, function () {
console.log('我会在移出的时候触发')
})
动画
- show
// 给 div 绑定一个显示的动画
$('div').show() // 如果元素本身是 display none 的状态可以显示出来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').show(1000, 'linear', function () {
console.log('我显示完毕')
})
- hide
// 给 div 绑定一个隐藏的动画
$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').hide(1000, 'linear', function () {
console.log('我隐藏完毕')
})
- toggle
// 给 div 绑定一个切换的动画
$('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').toggle(1000, 'linear', function () {
console.log('动画执行完毕')
})
- animate
// 定义一个自定义动画
$('.show').click(function () {
$('div').animate({
width: 500,
height: 300
}, 1000, 'linear', function () {
console.log('动画运动完毕')
})
})
- stop
// 立刻定制动画
$('div').stop() // 就停止再当前状态
- finish
// 立刻结束动画
$('div').finish() // 停止在动画结束状态
jQuery插件
- jQuery插件常用的网站：
- jQuery插件使用步骤：
-
引入相关文件。（jQuery 文件 和 插件文件）
-
复制相关html、css、js (调用插件)。
- 图片懒加载或者（BOOTSTRAP插件）
（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载） 当我们页面滑动到可视区域，再显示图片。 我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
注意：
1、要引入JQuery
2、插件JS【js引入文件和js调用必须写到 DOM元素（图片）最后面】
3、将图片 src 替换为 data-lazy-src
4、调用lazyLoadInit()
BOOTSTRAP插件
1、引入CSS、引入JQ、引入JS
2、.container
3、复制粘贴
jQuery多库共存
jQuery使用作为标示符，随着jQuery的流行,其他 js 库也会用这作为标识符， 这样一起使用会引起冲突。 需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
// 这个方法可以交还 jQuery 命名的控制权
jQuery.noConflict()
// 上面代码执行完毕以后 $ 这个变量就不能用了
// 但是 jQuery 可以使用
console.log($) // undefined
console.log(jQuery) // 可以使用
- 完全交出控制权
// 这个方法可以交并且传递一个 true 的时候，会完全交出控制权
jQuery.noConflict(true)
// 上面代码执行完毕以后 $ 这个变量就不能用了
// jQuery 这个变量也不能用了
console.log($) // undefined
console.log(jQuery) // undefined
- 更换控制权
// 可以用一个变量来接受返回值，这个变量就是新的控制权
var aa = jQuery.noConflict(true)
// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
aa('div').click(function () { console.log('我被点击了') })
JQuery 的插件扩展
- jQuery 确实很好很强大
- 但是也有一些方法是他没有的，我们的业务需求中有的时候会遇到一些它里面没有的方法
- 那么我们就可以给他扩展一些方法
扩展给他自己本身
- 扩展给自己本身使用 jQuery.extend 这个方法
- 扩展完后的内容只能用 $ 或者 jQuery 来调用
// jQuery.extend 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.extend({
max: function (...n) { return Math.max.apply(null, n) },
min: function (...n) { return Math.min.apply(null, n) }
})
- 扩展完毕我们就可以使用了
const max = $.max(4, 5, 3, 2, 6, 1)
console.log(max) // 6
const min = $.min(4, 5, 3, 2, 6, 1)
console.log(min) // 1
扩展给元素集
- 扩展完毕以后给元素的集合使用
- 也就是我们用 $('li') 这样的选择器获取到的元素集合来使用
- 使用 jQuery.fn.extend() 方法来扩展
// jQuery.fn.extend() 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.fn.extend({
checked: function () {
// return 关键字是为了保证链式编程
// 后面的代码才是业务逻辑
return this.each(function() { this.checked = true })
}
})
- 扩展完毕我们就可以使用了
// 靠元素集合来调用
$('input[type=checkbox]').checked()
// 执行完毕之后，所有的 复选框 就都是选中状态了
