jq 获取容器内所有li 获取jquery

什么是jQuery?

• jQuery是一个JavaScrip函数库
• jQuery是一个轻量级的“写得少，做得多”的JavaScript库
• jQuery库包含以下功能：

• HTML元素获取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX
• Utilities

除此之外：jQuery还提供了大量的插件

jQuery的使用文档

可以参考：

• jQuery官网
• jQuery中文官网
• jQuery方法大全中文网

jQuery的引入方式

• 方式1：到官网下载jquery.js或者jquery.min.js文件，使用script标签引入
  例如：
  <script src="../js/jquery.js"></script>
• 方式2：使用CDN方式引入，该方式无需下载
  例如：
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

jQuery暴露接口

• jQuery向全局中暴露了两个接口：jQuery、$

jQuery的基本用法

选择器

• 获取元素的id

const box = jQuery('#box');
const box = $('#box');

以上两种方式都可以获取元素的id，其实jQuery和$的功能基本是一样的

• 获取元素的class

const box = jQuery('.box');
const box = $('.box');

• 按照标签名来获取一组元素

const lis = jQuery('li');
const lis = $('li');

• 按照选择器来获取一组元素

const lis = jQuery('ul > li');
const lis = $('ul > li');

• 获取第一个元素

$('li:first');

• 获取最后一个元素

$('li:last');

• 获取索引为n的元素，n是一个非负整数，表示索引值

$('li:eq(n)');

• 获取索引为奇数的元素

$('li:odd');

• 获取索引为偶数的元素

$('li:even');

筛选器

• jQuery 的筛选器就是在选择器选择到一组元素以后，对元素进行筛选，也可以对准确的某一个元素进行判断和获取
• 获取所有元素中的第一个

$('li').first();

• 获取所有元素中的最后一个

$('li').last();

• 获取某一个元素的下一个兄弟元素

$('li:eq(n)').next()

• 获取某一个元素的上一个兄弟元素

$('li:eq(n)').prev();

• 获取某一个元素的后面所有兄弟元素

$('li:eq(n)').nextAll();

• 获取某一个原始的前面所有兄弟元素

$('li:eq(n)').prevAll();

• 获取某一个元素的父元素

$('li:eq(n)').parent();

• 获取某一个元素的所有父级元素，直到html

$('li:eq(n)').parents();

• 获取一组元素中的某一个

// 在 li 的所有父级里面找到所有 body 标签
$('li').parents().find('body');

// 找到 div 标签下所有后代元素中所有类名为 box 的元素
$('div').find('.box');

属性操作

• 给元素添加自身具备的属性

// 给div添加一个id为box的属性
$('div').prop('id', 'box');

• 获取元素自身具备的属性

// 获取自身具备的属性id
console.log($('div').prop('id'));

• 给元素添加自定义的属性

// 给div添加一个自定义属性data-id，值为1
$('div').attr('data-id', 1);

• 获取自定义属性

// 获取自定义属性dada-id
console.log($('div').attr('data-id'));

• 移除自身具备的属性

// 移除元素自己本身的属性
$('div').removeProp('id');

• 移除自定义的属性

// 移除元素的自定义属性
$('div').removeAttr('data-id');

• 操作元素类名

// 判断某一个元素有没有某一个 class
$('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名

// 给元素添加一个类名
$('div').addClass('box2') // 给 div 元素添加一个 box2 类名

// 移除元素的类名
$('div').removeClass('box') // 移除 div 的 box 类名

// 切换元素类名
$('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加

• 操作元素的内容

// 给元素的 innerHTML 赋值
$('div').html('<span>hello world</span>')
// 获取元素的 innerHTML
$('div').html()

// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()

// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()

样式操作

• 使用jQuery提供的css()方法操作样式
• css()用法：

用法一：如果css()有两个参数，则分别表示属性名和属性值，用于添加样式属性

$('#box').css("width", "100px");
$('#box').css("height", "100px");

用法二：如果css()只有一个参数，该参数是一个对象，则表示用于添加样式属性，从而不像用法一那样一行一行的添加样式

$('#box').css({
	width: 100px,
	height: 100px
})

用法三：如果css()只有一个参数，该参数是一个字符串，则表示获取该属性名的属性值

$('#box').css('width');

元素操作

• 创建元素

var div = $('<div></div>')

• 内部插入元素
  append和prepend表示向父元素插入子元素，appendTo和prependTo表示将子元素插入父元素

// 向 div 元素中插入一个 p 元素，放在最后
$('div').append($('<p></p>'))

// 把 p 元素插入到 div 中去，放在最后
$('<p>hello</p>').appendTo($('div'))

// 向 div 元素中插入一个 p 元素，放在最前
$('div').prepend($('<p></p>'))

// 把 p 元素插入到 div 中去，放在最前
$('<p>hello</p>').prependTo($('div'))

• 外部插入元素

// 在 div 的后面插入一个元素 p
$('div').after($('<p></p>'))

// 在 div 的前面插入一个元素 p
$('div').before($('<p></p>'))

// 把 p 元素插入到 div 元素的后面
$('div').insertAfter($('<p></p>'))

// 把 p 元素插入到 div 元素的前面
$('div').insertBefore($('<p></p>'))

• 替换元素

// 把 div 元素替换成 p 元素
$('div').replaceWith($('<p></p>'))

// 用 p 元素替换掉 div 元素
$('<p></p>').replaceAll($('div'))

• 删除元素

// 删除元素下的所有子节点
$('div').empty()

// 把自己从页面中移除
$('div').remove()

• 克隆元素

// 克隆一个 li 元素
// 接受两个参数
//   参数1： 自己身上的事件要不要复制，默认是 false
//   参数2： 所有子节点身上的事件要不要复制，默认是 true
$('li').clone()

元素尺寸

• width()：返回css中的width属性
• innerWidth()：返回css中的width + padding部分
• outerWidth()：返回css中的width + padding + border部分
• outerWidth(true)：返回css中的width + padding + border + margin部分

元素位置

• offset()：返回一个对象，该对象有两个属性。一个是top，表示该元素到页面顶部的距离；一个是left，表示该元素到页面左边的距离
• position()：返回一个对象，该对象有两个属性。一个是top，表示该元素到定位父元素的顶部距离；一个是left，表示该元素到定位父元素左边的距离

元素事件

• 绑定事件的方法

// 给 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)
})

• 移除事件的方法

// 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)

// 移除事件使用 off
$('button').off('click', handler)

• 只能执行一次的事件

// 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)

• 直接触发事件

// 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
$('button').trigger('click')

可以直接使用的常见事件

可以直接使用的事件就是可以不利用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() // 停止在动画结束状态