引号的问题
$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');
上面的代码加不加引号都是正确的
什么时候必须加引号呢？
<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//当属性的值有空格的 会报错
</script>
这个时候我们就必须加上引号
#JQ的链式操作
一步一步的操作：
链式操作 :
$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});
注意: JQ中的可以链式操作的是针对设置的操作， 取值的操作不能进行链式操作
命名的规范
$div $span
JQ的容错性
在原生js种， 如果没有找到相应的DOM元素， 执行后续操作会报错
在JQ中没有找到也不会报错， 最多是不执行任何的操作
这就是JQ的容错性
它是把双刃剑:
- 优点： 不报错， 不影响后续代码的执行
- 缺点： 不好调试
集合的长度
$()获取到的都是一个集合
集合中只有一个元素，它也是一个集合 $('#id');
它的结构很像数组，有下标， 有length
class的操作
- addClass()
- removeClass()
- toggleClass()
<div id="div1" class="box1 box2">aaaaa</div>
<script>
var $div = $('#div1');
$div.addClass('box3');//增加class
$div.addClass('box1');//增加class, 如果存在, 不执行任何操作
$div.addClass('box4 box5');//增加多个class, 用空格隔开
</script>
<div id="div1" class="box1 box2">aaaaa</div>
<script>
var $div = $('#div1');
$div.removeClass('box1');//删除class
$div.removeClass('box3');//删除class, 如果存在, 不执行任何操作
$div.removeClass('box4 box5');//删除多个class, 用空格隔开
</script>
显示隐藏
- show()/hide()
show()和hide() 可以智能的判断display
next()
选择下一个兄弟节点
prev()
选择上一个兄弟节点
nextAll()
选择下面所有的兄弟节点
prevAll()
选择上面所有的兄弟节点
siblings()
选择所有的兄弟节点
参数的筛选功能
上述方法都可以传入一个选择器字符串作为参数，用于对结果进行筛选
下标
- eq()
节点的选择
first()
获取当前结果集中的第一个对象 相当于eq(0)
last()
获取当前结果集的最后一个对象
slice()
children()
获得匹配元素集合中每个元素的子元素
find()
查找符合选择器的后代元素
节点的选择(父节点)
parent()
获得匹配元素集合中每个元素的父元素
从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
必须要接收一个参数
节点的操作
创建节点
//原生的方式
var oDiv = document.createElement('div');
//jq的方式
var $div = $('<div>')
注意: 要加<``>，不然就变成选择
插入子节点
append()
在每个匹配元素里面的末尾处插入参数内容。
它的参数可以是DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。
prepend()
将参数内容插入到每个匹配元素的前面（元素内部）。
参数DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。
插入兄弟节点
before()
after()
节点的操作
- remove() 删除节点
- clone() 克隆节点
- 默认不克隆事件
- 如何克隆事件 clone(true)
JQ中的索引
index()
第一种用法，兄弟中的排行
JQ中的遍历
遍历就是循环
我们知道在JQ中有很多的省略循环的方法比如说css click ...
但有时候我们也需要自定义循环操作
.each()
回调函数的两个参数
- 第一个参数代表下标
- 第二个参数代表每个原生dom对象
退出循环
我们知道在for循环中我们是用break来退出整个循环
在.each() 中 我们用return false来退出整个循环
JQ转原生JS
- get()
- 与eq的区别
- 为什么要转，比如：
- 获取内容的高度
- 元素之间的比较
get()
获取原生都dom对象
$('div').get(0).innerHTML = 'sdfsdf';
与eq的区别
get方法得到的是原生dom对象， eq得到的是jquery对象
$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');
为什么要转
获取内容的高度
想要获取textarea里内容的实际高度
