前言
其实并没有什么好说的，就是当作wiki方便查阅。用得多就会了。
$()
$(function(){
```
})
这是我们常用的方式。其意义为让页面加载完成后执行里面的 jq 代码。类同的还有：
-
$(document).ready的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码。
jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的
例如对于标签<p>
<p id=”imooc”></p>
- 使用javascript的DOM事件
var p = document.getElementById('imooc');
p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';
- 使用jq处理
var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');
通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。
DOM对象转化为JQuery对象
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<!--<script type="text/javascript">
var $div = $('div'); //jQuery对象
var div = $div[0];
div.style.color = 'red'; //操作dom对象的属性
var div2 = $div.get(2);
div2.style.color='blue';
</script>
-->
<script type="text/javascript">
var div = document.getElementsByTagName('div'); //dom对象
//将dom节点div转化为$div的jquery对象
var $div = $(div);
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
</script>
jquery的选择器
- id选择器。
对于原生的js就是用getElementByID。不过对于jq只要一句：
$( "
#id" )
- 类选择器
同样的对于原生js，可以用getElementByClassName同样jq是
$(".class")
注意前面有个.是作为类选择器的标志。
相对于原生js。有个很明显的好处就是循环的隐式调用。原本js获取了一组元素。你要for循环一下遍历
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
而对于jq，使用类选择器之后，比如$(".divbox")将会把应用这个类的所有元素获取过来，要赋值的话只需要$(".divbox").css(xxxx)即可。
- 元素选择器
$("某元素（p）")
和前面不同的是，没有#，也没.。应用倒是一样。就像$("div")就是获取整个html页面的div元素集。可以用get(position)来找到。
4.全选择器
$("*")
5.层选择器
基本筛选选择器
<script type="text/javascript">
//找到第一个div
$('.div:first').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//找到最后一个div
$('.div:last').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:even 选择所引值为偶数的元素，从 0 开始计数
$('.div:even').css("border", "3px groove red");
</script>
<script type="text/javascript">
//:odd 选择所引值为奇数的元素，从 0 开始计数
$('.div:odd').css("border", "3px groove blue");
</script>
---
<script type="text/javascript">
//:eq
//选择单个
$('.aaron:eq(2)').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$('.aaron:gt(2)').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$('.aaron:lt(2)').css("color", "#CD00CD");
</script>
---
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$('input:not(:checked)+p').css("background-color", "#CD00CD");
</script>
内容选择器
这里比较抽象的是parent和empty。举个例子：
<script type="text/javascript">
//选择所有包含子元素或者文本的a元素
//增加一个蓝色的边框
$("a:parent").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//找到a元素下面的所有空节点(没有子元素)
//增加一段文本与边框
$("a:empty").text(":empty").css("border", "3px groove red");
</script>
a:parent就是a标签不为空，a:parent就可以选中它。反之a:empty就是a标签为空的时候选中
可见性筛选选择器
属性选择器
子元素筛选选择器
表单元素选择器
<script type="text/javascript">
//匹配所有input元素中的单选按钮,并选中
$('input:checkbox').attr('checked','true');
</script>
属性与样式
.attr()与.removeAttr()
attribute:属性
- attr(传入属性名)：获取属性的值
- attr(属性名, 属性值)：设置属性的值
- attr(属性名,函数值)：设置属性的函数值
- attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()：移除所有的属性
html()及.text()
html()在括号里面添加内容。而不是文本。本质上就是调用innerHTML的方法来实现的。封装起来了。
**html() 不传入值，就是获取集合中第一个匹配元素的HTML内容 **
text()：处理的是文本内容。
.val()
读取的是表单元素中的value的值。如果选中多个元素，只能读取第一个元素。和html()一样
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
增加样式addClass()
动态添加样式，貌似没什么说的。相对应的就是removeClass()
切换样式.toggleClass()
元素的数据存储
jquery提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据
jQuery.data( element, key ) //静态接口,取数据
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据
同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] )
.removeData( [name ] )
