jQuery基础（未完待续）

1.       jQuery核心函数

jQuery也可写$,通常情况下$可能会与其他框架中的对象冲突（php有$的用法），所以如果所用的框架没有$的用法，jQuery可用$代替

（1）$(document).ready() 一般缩写为$(),参数为回调函数,文档就绪时触发,要优先于onload触发

①      $(document).ready(function () {});

②      $( function () {});

（2）jQuery(elements) 将一个或多个dom对象转换为jQuery对象

$(document.getElementById("txtName"))

         （3）根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。

①      $("<input type='checkbox'>").appendTo("body")

②      $("<input>", { type: 'textfield' }).appendTo("body")

         （4）检索器（多个检索条件同时满足时，检索表达式直接连接；满足其中某个时，检索表达式用", "连接。如[name="text"].divClass结果为样式为divClass且name为text的元素）

         以下结合例子分析检索器的用法（为了简单叙述，检索结果用ID代替Dom元素）

                   Demo，有这样一段html代码，id从0-8，有div元素及span元素:

            <div id="0" class="divClass">

                <span id="1" title="this is a span">

                    <div id="2">value2</div>

                </span>

            </div>

            <span id="3">3value</span>

            <div id="4">

                <div id="5"></div>

                <div id="8"></div>

                <span id="6"></span>

                <div id="7"></div>

            </div>

                   普通检索

①     $("#id"): 根据给定的ID匹配一个元素。

和js的document.getElementById("")功能差不多，但也有区别：$获取到的是i指定id的jQuery对象，后者获取到的是dom对象 但$("#3")[0]与document.getElementById("3")指的都是id为3的dom对象

$("#3")获取的结果即为 3

②    $("dom元素名")：根据给定的元素名匹配所有元素

和js的document.getElementByTagName ("")功能类似

$("span")获取的结果即为 1、3

③     $(".class样式名"): 根据给定的样式匹配元素。

$(".divClass")获取的结果即为 0

④     $("*") ：匹配所有元素。结果为 0、1、2、3、4、5、6、7、8

层级

①     $("div div"): 在给定的祖先元素下匹配所有的后代元素。

结果为 2、5、7、8

②    $(" div>div ")：在给定的父元素下匹配所有的子元素啊

结果为 5、7、8

③    $("div+div"):匹配所有紧接在 div 元素后的 div 元素。

结果为8

④    $("div~div") ：匹配 div 元素之后的所有 div (同级) 元素。

结果为 4、7、8

简单（该组检索表达式中，用到索引的都不考虑是否同级，索引依据出现的先后顺序）

①    $("div:first") 匹配找到的第一个元素

结果为0

如果将例子该为：

            <span id="1" title="this is a span">

                <div id="2">value2</div>

            </span>

            <div id="0" class="divClass">               

            </div>

                            则修改后的例子结果为 2

②    $("div:last") 匹配找到的最后一个元素

结果为 7

③    $(" div:not(:first)") //返回除第一个div以外的所有div

not的用法：如$("div>:not(span)");该例子表示不含有span节点的div节点集合，因为0和4都包含span节点，所以结果为5,7,8

④    $(" div:even") 匹配所有索引值为偶数的元素，从 0 开始计数

结果为0、4、8

⑤    $(" div:odd") 匹配所有索引值为奇数的元素，从 0 开始计数

结果为 2、5、7

⑥    $(" div:eq(3)") 匹配一个给定索引值的元素 eq: equal

结果为5

⑦    $(" div:gt(3)") 匹配所有大于给定索引值的元素 gt:greater than

结果为8、7

⑧    $(" div:lt(3)") 匹配所有小于给定索引值的元素 lt:less than

结果为0、2、4

内容：

①    $("div:contains('value')") 匹配包含给定文本的元素

结果为0、2   innerText.indexOf("value")>=0及[title*="value"]类似，区别在于，*=只能检索属性，contains检索元素包含的所有文本,注意检索的范围为元素的文本

②    $("div:has(div)") 匹配所有包含 p 元素的 div 元素

查找方式类似于层次查找的"div div"，区别在于，"div div"结果是子节点，has结果是父节点，例子结果为0、4

$("div:has(span[title$='span'])~div>div");选择器也可以像xpath一样方便

上述例子可翻译为：含有span子元素且子span节点的title属性文本为"span"结尾的div元素之后（同级）的div元素的div子元素

猛一看，罗里吧嗦的描述那么长，感觉用处不是很大，其实页面html内容庞大的情况下，查找符合某些条件的集合会很方便

③    $("div:empty") 查找所有不包含子元素或者文本的空元素

结果：5、8、7

                   可见性

①    $("input:visible") 查找所有可见的input元素

②    $("tr:hidden") 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

属性检索

①    $("div[id]") 查找所有含有 id 属性的 div 元素

②    $("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素

③    $("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素

④    $("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素

⑤    $("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素

⑥    $("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素

⑦    $("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

子元素

①    nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素

②    $("div:first-child") 查找属于父节点的第一个子节点的div元素

结果为 0、2、5

③    $("div:last-child")   查找属于父节点的最后子节点的div元素

结果为2、4、7

④    $("div:only-child")   查找属于父节点的唯一子节点的div元素

表单

①    $(":input") 查找所有的input元素 

$(":input")与$("input")的区别：

//:input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素

②    $("text")    匹配所有的单行文本框

③    $(":password") 匹配所有密码框

④    $("radio")   匹配所有单选按钮

⑤    $("checkbox") 匹配所有复选框

⑥    $("submit")   匹配所有提交按钮

⑦    $("image")    匹配所有图像域

⑧    $("button")   匹配所有按钮

⑨    $("file")     匹配所有文件域

⑩    $("hidden") 匹配所有不可见元素，或者type为hidden的元素

表单对象属性

①    $("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

②    $("input:enabled") 匹配所有可用元素

③    $("input:disabled") 匹配所有不可用元素

④    $("select option:selected") 匹配所有选中的option元素

（5）属性操作

①      操作样式(class)

方法名addClass,removeClass,toggleClass

特殊用法toggleClass：如果存在（不存在）就删除（添加）一个样式

当方法传递两个参数的时候，第二个参数为布尔表达式，布尔表达式为true时添加样式，布尔表达式为false时删除样式，如：

var b = true;

                $("input").click(function () {

                         //情况一：$(this).toggleClass("ccc");

                     //情况二：

                                     b = !b;

                     $(this).toggleClass("ccc", b);

                });

②      样式操作2（style）

方法名css，参数分为3种情况

Ø  传递一个参数，且为string类型，这样会返回该样式值，如

$("input").css("background-color")

Ø  传递两个参数，分别为key\value，为dom元素样式赋值，如

$("input").css("color","blue")

Ø  传递一个参数，为json对象，会对json的键逐一赋值，如

$("input").css({color:"blue",background:"red"})

③      操作属性

属性操作方法名：attr，removeAttr

方法attr参数有4种情况：

Ø  只传属性名，返回该jQuery元素的属性值（注意如果查找到多个元素，则返回第一个元素的属性），如$("input").attr("title")返回的是第一个input的title

Ø  传递两个参数，且第二个参数为值时，为dom元素属性赋值，如

$("input").attr("title", "这是一个文本框")

Ø  传递两个参数，且第二个参数为function，为dom元素属性赋函数计算值，如

$("input").attr("title", function () { return "这是一个文本框"})

Ø  传递一个参数，且为json对象时，会对json的键逐一赋值，如

$("input").attr({ title: "this the title",value:"this the value" })

④      html 文本 值

这三类操作一致

获取内容为$("input").html/text/val()

设置时为$(" input ").html/text/val("内容")

$("input").val 等于input.attr("value")