1 jQuery的元素获取
jQuery使用的第一步：将一个选择表达式，放进构造函数jQuery()（简写为$）,然后得到被选中元素。
- CSS选择器
// 选择整个文档对象
$(document)
// 选择ID为myId的网页元素
$('#myId')
// 选择class为myClass的div元素
$('div.myClass')
// 选择name属性等于first的input元素
$('input[name=first]')
- 特有表达式
//选择网页中第一个a元素
$('a:first')
//选择表格的奇数行
$('tr:odd')
// 选择表单中的input元素
$('#myForm :input')
// 选择可见的div元素
$('div:visible')
// 选择所有的div元素，除了前三个
$('div:gt(2)')
// 选择当前处于动画状态的div元素
$('div:animated')
2 链式操作
2.1 概念
链式风格（jQuery风格）
window.jQuery()是我们提供的全局函数特殊函数jquery
jQuery(选择器)用于获取对应的元素
但它不返回这些元素
相反，它返回一个对象，称为jQuery构造出来的对象(API)
这个对象可以操作对应元素链式操作
最终选中网页元素后，可以对他进行一系列的操作，并且将所有的操作连在一起，以链条形式写出来，这就是链式操作
$('#test').find('.child').addClass('red')
// 可以分解为
$('#test') // 找到id为test的div
.find('.child') // 再找到其下class为child的div
.addClass('red') // 为这些div添加名为red的class
2.2 增删改查
- 增
// 创建diiv
$('<div><span>1</span></div>')
// 插入body
.appendTo(document.body)
- 删
$div.remove()
$div.empty
- 改
// 读写文本内容
$div.test(?)
// 读写HTML内容
$div.html(?)
// 读写属性
$div.attr('title',?)
// 读写style
$div.css({color:'red'})
// 添加class
$div.addClass('blue')
// 添加点击事件
$div.on('click',fn)
//删除点击事件
$div.off('click',fn)
- 查
// 返回值不是元素，而是一个api对象
$('#xxx')
// 查找#xxx里的.red元素
$('#xxx').find('.red')
// 获取爸爸
$('#xxx').parent()
// 获取儿子
$('#xxx').children()
// 获取兄弟
$('#xxx').siblings()
// 获取排行老几（从0开始）
$('#xxx').index()
// 获取弟弟
$('#xxx').next()
// 获取哥哥
$('#xxx').prev()
// 遍历并对每个元素执行fn
$('.red').each(fn)
3 构造函数
jQuery是构造函数吗？
是
因为jQuery确实构造出了一个对象不是
因为不需要写new jQuery()就能构造一个对象
过去遇到的构造函数都要结合new才行结论
jQuery是一个不需要加new的构造函数
jQuery不是常规意义上的构造函数
4 元素赋值
- jQuery可以使用同一个函数，来完成取值和赋值，操作具体由函数参数决定
- 如果结果集包含多个元素，赋值时对其中所有元素赋值，取值时，只取出第一个元素的值（.text()除外，它会取出所有元素的text内容）
// html()没有参数，表示取出h1的值
$('h1').html()
// html()有参数Hello，表示对h1进行赋值
$('h1').html('Hello')
常见操作
// 取出或设置html内容
$('#xxx').html()
// 取出或设置text内容
$('#xxx').text()
// 取出或设置某个属性的值
$('#xxx').attr()
// 取出或设置某个元素的宽度
$('#xxx').width()
// 取出或设置某个元素的高度
$('#xxx').height()
// 取出某个表单元素的值
$('#xxx').val()
5 移动元素
jQuery提供了两组方法，用来操作元素在页面中的位置移动
实例：假定我们需要把一个div元素移动到p元素后面
- 方法一：直接移动目标元素
// 使用$('#xxx').insertAfter()，将div元素移动到p元素后面
.insertAfter($('p'));
- 方法二：移动其他元素，使目标元素到达我们想要的位置
// 使用$('#xxx').after()，把p元素加到div元素前面
$('p').after($('div'));
常见操作
// 在现存元素的外部，从后面插入元素
$('#xxx').insertAfter()和$('#xxx').after()
// 在现存元素的外部，从前面插入元素
$('#xxx').insertBefore()和$('#xxx').before()
// 在现存元素的内部，从后面插入元素
$('#xxx').appendTo()和$('#xxx').append()
// 在现存元素的内部，从前面插入元素
$('#xxx').prependTo()和$('#xxx').prepend()
参考资料：
（1）jQuery设计思想：http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html
（2）jQuery中文文档：https://www.jquery123.com/
