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