jQuery是目前使用最广泛的JavaScript库,它提供的 API 易于使用且兼容众多浏览器,优化HTML文档操作、事件处理、动画设计和Ajax交互,这里介绍一下jQuery的基础功能。
一、jQuery 如何获取元素
jQuery的最基本概念是“选择一些元素并对其进行处理”,可以使用CSS选择器
$('#myId'),获取ID为“myId”的元素
$('.myClass'),获取class为‘myClass’的所有元素
$('input[name=first]'),获取name属性等于first的input元素
也可以使用jQuery特有的
$('a:first'),获取网页中第一个a元素
$(':header') ,获取所有标题元素
$('p:contains(Hi)'),获取所有包含文本为Hi的<p>元素
$('div:visible'),获取可见的div元素
$('tr:odd'),获取所有奇数元素
$('tr:even'),获取所有偶数元素
$(':animated') ,获取所有动画元素
二、jQuery 的链式操作
jQuery的核心代码就是,接受一个选择器,根据选择器得到一些元素,但却不返回这些元素,相反,返回一个对象(称为jQuery构造出来的对象),这个对象可以操作对应的元素,并且所有操作可以连接在一起,以链条的形式写出来,比如:
$('.test').find('child').addClass('red').addClass('blue')
分解意思就是:
$('.test') //获取test
.find('child') //找到child
.addClass('red') //添加className,为red
.addClass('blue') //添加className,为blue
链式操作使得代码更为简洁、优雅
三、jQuery 如何创建元素
jQuery创建元素的方法非常简单,只要把新元素直接传入$()函数中,如:
const $div = $('<div>1</div>')
创建元素后,需要将其添加到页面中
$div.appendTo(document.body)
四、jQuery 如何移动元素
移动元素通常由两种方法:
- 将所选元素相对于另一个元素进行移动
- 相对于所选元素移动另一个元素
假定选中h1元素,需要将它移动到p元素后面
第一种方法是使用.insertAfter(),把h1元素移动到p元素后面:
$('h1').insertAfter($('p'));
第二种方法是使用.after(),把p元素添加到h1前面:
$('p').after($('h1'));
看起来这两种方法效果一样,但实际上他们返回的元素不一样,第一种方法是返回h1元素,第二种方法是返回p元素。
还有其他方法也遵循这种模式:
.insertBefore()
和.before()
.appendTo()
和.append()
.prependTo()
和.prepend()
如果需要存储对添加到页面中的元素引用,那么采用第一种方法,因为会返回要移动的元素。
五、jQuery 如何修改元素的内容
jQuery设计思想之一就是使用同一个函数实现读与写,即getter和setter合一。
$div.text()
text()里没有参数,可直接写,如有参数即可进行修改。
$div.html() //读写html内容
$div.attr('tittle', ) //读写属性
$div.css({color: 'red'}) //读写style