JQuery杂记

JQuery：其实就是一堆javascript函数($()是JQuery()的缩写)

       优点：

       尺寸小、使用方便（Write less ，do more）链式编程、隐式迭代、跨浏览器兼容性好、插件丰富、开源、免费

JQuery的reday和Dom的onload的区别：

       Dom是所有的dom元素都创建完毕、图片、css等都加载完毕后才被触发，而ready则是dom元素创建完毕后就被触发，这样可以提高网页的响应速度。

Eg： reday的用法

         方法一：

$（document）。ready（function（）{

    alter(“加载完毕！”);

}）

方法二：

$（function（）{

    alert(“加载完毕！”);

}）

JQuery对象和DOM对象的相互转换

JQuery对象是通过JQuery包装DOM对象后产生的对象，JQuery对象不能使用DOM对象Dom对象也不能使用JQuery对象的方法如果两者要互用的话必须要相互转换。

         Eg：JQuery 对象转换为DOM对象

                     Var $cr=$(“#ID”) =》var cr=$cr[0]  ||  var cr=$cr.get(0) 

DOM对象转换为JQuery对象

 Var cr=document.getElementById(“Id”) =>  var $cr=$(cr)

       JQuery提供的函数

$.map(arry,fn)对数组array中的每个元素调用fn函数逐个进行处理，fn函数将处理过的数据返回到一个新的集合

Eg：

       Var arr=[3.5.9];

       Var arr2=$.map(arr,function(item){return item*2})

       注意：数组没有任何改变，$.map不能处理dictionary风格的数组

$.each(arry,fn) 对dictionary数组中的每个元素调用fn函数进行处理，没有返回值；

Eg：

  Var arr={“tom”:”汤姆”,”jerry”:”杰瑞”,”lily”:”莉莉”}；

   $.each(arr,function(key,value){alter(key+”====”+value)});

       JQuery选择器

              作用：JQuery选择器用于查找满足条件的元素

              Id选择器

                     $(“#空间id”)根据控件id来获得控件的JQuery对象

              标签选择器

                     $(“TagName”)根据标签名来获得指定标签的JQuery对象

              类选择器

                     $(“样式名称”)来获得JQuery对象； eg：$(“.test”);

              复合选择器：

$(“p,div,span.test”) 同时选择p标签、div标签、和拥有.test样式的span标签的元素

              层次选择器：

                     $(“div li”) 获得div下的所用li标签（直接子代和间接子代）

                     $(“div > li”)   获得div的直接子代

                     $(“.test + div”) 获得样式名称为test之后的第一个div元素

                     $(“.test ~ div”) 获得样式名称为test之后的所有的div元素

              简单选择器：

                     ：first选取第一个元素  eg：$("div:first")选取第一个div

                     ：last选取最后一个元素  eg：$(“div:last”)选取最后一个div

                     ：not（选择器）选取不满足“选择器”条件的元素

                            eg: $(“input:not(‘.myClass’)”)选取样式名称不是myClass的<input>标签

                     ：even 、：odd选取索引是奇数、偶数的元素

                            eg:$(“input:even”) 选取索引是奇数的<input>标签

：eq（索引序号）、：gt（索引序号）、：lt（索引序号）选取索引等于、大于、小于索引序号的元素

       eg:$(“input:lt(5)”)选取索引小于5的<input>标签

：header 选取所有的h1……h6元素

：animated 选取正在执行动画的<div>

              属性过滤选择器：

                     eg：$(“div[id]”)选取有id属性的<div>标签

                     eg：$(“div[title=test]”)选取title属性test的div

                     eg：$(“div[title!=test]”) 选择title属性不是test的div

                     eg：$(“div[title^=te]”) 选择title属性是以te开头的div

                     eg：$(“div[title$=ss]”) 选择title属性是以ss结尾的div

                     eg：$(“div[title*=ss]”)选择title属性中包含ss的div

              表单

                     $(“:input”) 选取id为form的中input，textarea，select 和button元素

                     $(“:text”) 选取所有的单行文本框     

                     $(“:password”) 选取所有的密码框

                     $(“:radio”) 选取所有的单选按钮

                     $(“:checkbox”) 选取所有的复选框

                     $(“:submit”)选取所有的提交按钮

              表单对象选择器：

                     $(“input:enabled”)选取所有启用的元素

                     $(“input:disabled”) 选取所有禁用的元素

                     $(“input:checked”)  选取所有选中的元素（Radio 和 CheckBox）

                     $(“select option:selected”) 选取所有的选中元素（下拉框）

       JQuery的DOM操作

              attr（）方法 读取设置元素的属性

                     $(“#div a”).attr(“href”);

                     $(“#div a”).attr(“href”,www.baodui.com) 

              css（）方法 读取样式或设置样式

                     $(“#div1”).css(“background”) 获得样式的值

                     $(“#div1”).css(“background”,”red”)给样式赋值

              addclass（”样式名称”）（不影响其他样式）追加样式

                     $(“#div1”).addClass(“test”)；

              removeClass（“要删除样式的名称”）移除样式

                     $(“#div1”).removeClass(“test”); 

              toggleClass（“样式名称”）切换样式

                     $(“#div1”).toggleClass(“test”); 

              hasClass(“样式名称”)判断样式是否存在 返回true和false

                     $(“#div1”).hasClass 

              val（）方法 读取value值或设置value值

                     $(“#div1”).val()获得标签中的value值

                     $(“#div1”).val(“文本”)给标签中的value赋值

html（）方法 读取或设置元素的innerTHML

                     $(“#div1”).html(“<strong>我是谁<strong>”);和innerHTML类似的用法

$(“#div1”).html();

              text（）方法 读取或设置元素的innerText

                     $(“#div1”).text(“我是谁”)；和innerText类似的用法

$(“#div1”).text()；

              removeAttr()方法 删除属性

                     $(“#div a”).removeAttr (“href”);

next()方法 用于获取节点之后挨着的第一个同辈元素

       $(“span”).next()

nextAll()方法 用于获取节点之后的所有同辈元素

       $(“span”).nextAll()

prev（）方法用于获取节点之前挨着的第一个同辈元素

       $(“span”)。prev（）

prevAll（）用于获取节点之前的所有同辈元素

                     $(“span”).prevAll();

              siblings()方法 用于获得所有的同辈元素

                     $(“span”).siblings();

动态创建DOM节点：

              Append() 方法用来在元素的末尾追加元素

              eg: var link=$("<a href='http://www.baidu.com'> </a>");

                 link.text=”百度”；

                     $(“div:first”).append(link)

              注意：创建出来的元素么有append到界面之前是无法用选择器找到的

              prepend（）在元素的开始添加元素，

              after() 在元素之前添加元素（添加的是兄弟节点）

              before()   在元素之后添加元素（添加兄弟）

remove（）删除选择的节点 返回的值是被删除的节点对象（还可以继续使用别删除的节点）

              empty()是将节点清空，清除节点的innerTHML，节点还在

       RadioButton操作

              读取RadioButton中的值：

                $("input[name=gender]:checked").val()

设置RadioButton的选中值：

$("input[name=gender]").val(["女"]);或者$(":radio[name=gender]").val(["女"]);

注意val中参数的[]不能省略

 

转载于:https://www.cnblogs.com/lulu19891206/articles/2079183.html