jQuery随笔

概述：

1、jquery的导入和基本作用
2、$的作用
3、 dom对象和jQuery对象
4、选择器

---

内容：

一、JQuery的导入和作用

1、导入

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>

2、jQuery的基本作用：就是通过语句查询页面中的标签、属性、内容、样式等,例如：

 var $btnId=  $("#btnId");// document.getElementById(`btnId`)

---

二、$的作用

根据传入$（参数）的参数不同大致分为四种作用

1、当传入的参数是函数时 ：
例如$(function () {})
表示文档加载完成之后执行函数内容，相当于js里面的window.onload

2、当传入的参数是HTML字符串时：即通过传入的字符串创建元素对象
例如：

 $("<div>"+
        "    <span>由$创建出来的span1</span>\n" +
        "    <span>由$创建出来的span2</span>" +
            "</div>").appendTo('body');

3、当传入的参数是选择器字符串时：表示根据传入的字符串进行查找元素结点对象，返回的都是数组类型，不能直接使用js的属性
例如：

$("button")//标签选择器
$(".btnclass")//类选择器
$("#btnid")//id选择器
/**
*返回的都是jQuery对象，不能直接使用js的属性，需要转换则在后面添加相应的下标。
*例如：$("button")[0].innerHTML,则返回的是第一个按钮的内容。
*/

4、当传入的参数是dom对象（即通过getElementyByXXX的返回值）时，则返回jQuery对象

---

三、dom对象和jQuery对象之间的相互转换

四、选择器

通过特定的标识快速的查找出需要的标签、内容、属性等

一、基本选择器
1、#id选择器 【根据给定的ID匹配一个元素】:$("#one")
2、.class 【根据给定的类匹配元素】：$(".mini")
3、element 【选择符合标签的元素】：$("div")
4、* 【选择所有的元素】：$('*')
5、selector1、selector2… 【同时获取选择器1和选择器2的内容】：$('span,#two')


二、层次选择器
1、ancestor descendant【返回祖先下的所有后代】：$("body div") 返回body下所有div
2、parent > child【返回父元素下的所有子元素，不包含孙子等】：$("body > div")
3、prev + next【返回prev下的next元素】：$("#one + div") 返回id为one紧跟在后的div
4、prev ~ siblings【返回同prev为兄弟的元素】：$("#two ~ div") 返回id为tow后面的div兄弟元素

---

四、过滤器

过滤器则是在基本选择器或者层次选择器上再次添加约束，更加准确获得需要操作的元素，也有部分自身就可以准确过滤

1、基本过滤器:

属性	作用	例子
：first	获取第一个元素	$('div:first')获取第一个div
：last	获取最后一个元素	$('div:last')：获取最后一个div
：not（selector）	去除与给定选择器匹配的元素	$('div:not(#one)')获取div中不是id为one的元素
：even	获取偶数元素	$('div:even')：获取偶数序列的div
：odd	获取奇数元素	$('div:odd')：获取奇数序列的div
：eq(index)	获取指定索引值元素，从0开始	$('div:eq(3)')：获取索引值为3的div
：gt(index)	获取大于指定索引的元素	$('div:gt(3)')：获取索引值大于3的div
：lt(index)	获取小于指定索引的元素	$('div:lt(3)')：获取索引值小于3的div
：header	获取如 h1, h2, h3之类的标题元素	$(':header')：获取所有标题元素
：animated	获取第一个元素	$(':animated')：获取正在执行的动画

2、内容过滤器

属性	作用	示例
:contains(text)	匹配包含给定文本的元素	$('div:contains("di")') ：选择文本含有di的div
:empty	匹配不含子元素或者文本的元素	$('div:empty') ：选择不含子元素或者文本的div
:has(selector)	匹配含有选择器匹配的元素的元素	$('div:has(.mini)') ：选择含有class为mini的div【不是返回class为mini的div，是含有div的class为mini的div】
:parent	匹配含有子元素或者文本的元素	$('div:parent')：选择含有子元素或者文本元素的div

3、表单过滤器

属性	作用	示例
:input	匹配所有 input, textarea, select 和 button 元素	$(":input")
:text	匹配所有单行文本框	$(":text")
:password	匹配所有密码框	$(":password")
:radio	匹配所有单选框	$(":radio")
:checkbox	匹配所有复选框	$(":checkbox")
:submit	匹配所有提交按钮	$(":submit")
:image	匹配所有图像区域	$(":image")
:reset	匹配所有重置按钮	$(":reset")
:button	匹配所有按钮	$(":button")
:file	匹配所有文件	$(":file")
:hidden	匹配所有隐藏	$(":hidden")

4、属性过滤器

属性	作用	示例
[attribute]	匹配含有指定属性的元素	$('div[title]') 返回div中含有属性‘title’
[attribute=value]	匹配含有指定属性值的元素	$('div[title="test"]')选取属性值等于‘test’的div元素
[attribute!=value]	匹配不含有指定属性值的元素	$('div[title!="test"]') 选取属性值不等于‘test’的div元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素	$('div[title^="te"]') 选取属性值以‘te’开始的div元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	$('div[title$="est"]') 选取属性以‘est’结束的div元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素	$('div[title*="es"]') 选取属性title含有‘es’的div元素

5、可见性过滤器

属性	作用	示例
:hidden	匹配所有不可见的元素，或者type为hidden的元素	$('div:hidden'):选取所有不可见的div元素
:visible	匹配所有可见的元素	$('div:visible'):选取所有可见的div元素

6、表单对象属性过滤器

属性	作用	示例
:enabled	匹配可用的表单属性元素	$(':text:enable'):选取所有可用的text输入框
:disabled	匹配不可用的表单属性元素	$(':text:disable'):选取所有不可用的text输入框
:checked	匹配选中多选框个数	$(':checkbox:checked'):选取多选框中选中.size()获得个数
:selected	匹配下拉框中选中的内容	$('select option:selected'):下拉列表中选中的选框