jQuery基础(4)

一、jQuery中的html() text() val() 方法

val()用来读取或修改【表单元素】的value属性的值。html()用来读取和修改元素的HTML标签text()用来读取或修改元素的纯文本内容

注意:这些方法既可以读取值也可以设置值

例如:

<div id="div1">        <p>大家好</p>        <div>good</div></div>console.log($("#div1").val());结果显示为空,什么都拿不到console.log($("#div1").html());结果显示为:         <p>大家好</p>         <div>good</div>console.log($("#div1").text());结果显示为:         大家好         good

二、jQuery中的工具函数
1 .each():遍历

    格式1:        jQuery对象.each(匿名函数);    格式2:        $.each(对象/数组,匿名函数);

注意:匿名函数可以带参数也可以不带参数

例如1:        <div>test1</div>        <div>test2</div>        <div>test3</div>        <div>test4</div>        <div>test5</div>//遍历jQuery对象中的数组//这里会循环5次,因为会拿到5个div对象$("div").each(function(){    console.log("test");});//参数i表示每次遍历拿到的数组的下标$("div").each(function(i){    console.log("下标:"+i);});//参数e表示拿到的当前下标的对象,注意是dom对象$("div").each(function(i,e){    console.log(e);//这是dom对象    console.log($(e));//这是jQuery对象 需要这样封装一下});//也可以是this变量,这时候this就等同于参数e$("div").each(function(i,e){    console.log(this);//this表示拿到的当前对象 dom对象    console.log($(this));//这样就可以变为jQuery对象了});例如2:var v = {    name:"tom",    age:20};//v是一个javascript中的对象$.each(v,function(i,e){    console.log(i+" : "+e);});结果:    name : tom    age : 20//$(v)是jQuery对象$.each($(v),function(i,e){    console.log(i+" : "+e);});结果:    0 : [object Object]

2 .toArray()
把jQuery集合中所有DOM元素恢复成一个数组，jquery对象调用

3 .jQuery.inArray(obj,arr[,beginIndex])
jQuery函数进行调用，确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )

    obj 要查找的元素    arr 待处理的数组    beginIndex,开始位置，默认为0

4 .jQuery.parseJSON(json)
解析json字符串为一个对象

      $.parseJSON('{"name":"briup","age":"123"}')

5 .jQuery.contains(container,contained)
一个DOM节点是否包含另一个DOM节点。

参数 ：

        container:DOM元素作为容器，可以包含其他元素        contained:DOM节点，可能被其他元素所包含

6 .jQuery.type(obj)
检测obj的数据类型。

7 .jQuery.isArray(obj)
测试对象是否为数组。

8 .jQuery.isFunction(obj)
测试对象是否为函数。

9 .jQuery.isEmptyObject(obj)
测试对象是否是空对象（不包含任何属性）。

10.jQuery.isNumeric(value)
检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false

11.jQuery.trim(str)
去掉字符串起始和结尾的空格。

三、jquery中的DOM操作
1.节点整体操作：
1）查找节点
通过jQuery选择器来完成

2)获得节点的属性值:

        var 属性值 = attr("属性名字")

3）创建节点

        创建元素节点：var newTd = $("<td></td>")        创建文本节点：在创建元素节点时直接把文本内容写出来。        var newTd = $("<td>文本内容</td>")

4）插入节点：

----------内部插入------------append()    在每个匹配元素里面的末尾处插入参数内容。作为它的最后一个子元素。  参数为一个或多个DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。  注意:如果将页面上一个元素A插入到另一个元素B，元素A会被从老地方移走appendTo(target)    颠倒了 $(A).append(B)的效果，$(A).appendTo(B)将A追加到B中，将匹配的元素插入到目标元素的最后面prepend()   将参数内容插入到每个匹配元素的前面（元素内部）。当前元素中的第一个子元素prependTo(target)   颠倒了 $(A).prepend(B)的效果.----------外部插入------------after()     在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点插在每个匹配元素的后面insertAfter(target)   在目标元素后面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。颠倒了 $(A).after(B)的效果before()    在匹配元素的前面插入内容（外部插入）作为其兄弟节点插在集合中每个匹配元素前面。insertBefore(target) 颠倒了 $(A).before(B)的效果

5）删除节点

    remove( [selector ] )     从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。该方法会移除元素，同时也会移除元绑定的事件及与该元素相关的jQuery数据    参数 ： selector 一个选择器表达式用来过滤将被移除的匹配元素集合    注意:这个被删除的元素上的事件必须是动态添加上去的,删除这个元素之后再把它添加回来,这个事件才会没有.    empty()      并不删除节点，而是清空节点，能清空元素中的所有后代节点，这个方法不接受任何参数。    detach( [selector ] )    .detach() 方法和.remove()类似,但是.detach()保存所有jQuery数据和被移走的元素相关联事件。    selector一个选择表达式将需要移除的元素从匹配的元素中过滤出来。

6）复制节点

    $("#id").clone(false).     该方法返回的是一个节点的引用,参数默认为false,当参数为true，含义是复制元素的同时复制元素中所绑定的事件

7）替换节点

  replaceWith(newContent):  用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。  参数 newContent 用来插入的内容，可能是HTML字符串，DOM元素，或者jQuery对象。  该方法会删除与节点相关联的所有数据和事件处理程序。   replaceAll(target):  用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果

8）包裹节点

    wrap([wrappingElement])     在每个匹配的元素外层包上一个html元素。    $("strong").wrap("<b></b>");  用<b>标签把每个<strong>元素分别都包裹起来    参数 wrappingElement      一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。     wrapAll([wrappingElement]) :      将所有匹配的元素用一个元素来包裹。在所有匹配元素外面包一层HTML结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。      wrapInner([wrappingElement]):     每个匹配元素里面内容(子元素)都会被这种结构包裹。     unwrap()     这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。

2.节点属性操作
1）attr

a.获取属性

    var attrValue = $demo.attr("attrName");

b.设置属性，第一个参数为属性名，第二个参数为属性值

    $demo.attr("attrName","attrValue"); 

c.删除属性

    removeAttr("attrName");

2）prop

a.获取属性

    var propValue = $demo.prop("propName");

b.删除属性

    removeProp("propName");    To retrieve and change DOM properties such as the checked, selected,     or disabled state of form elements, use the .prop() method.    参考 http://www.cnblogs.com/zhwl/p/3520162.html

3）尺寸属性：

     height([value])获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值     width([value]) 获取匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配的元素设置宽度。      innerHeight([value])用于获得匹配集合中第一个元素的当前计算的内部高度（包括padding，但不包括border），或设置每一个匹配元素的内部高度。     innerWidth([value])用于获得匹配集合中第一个元素的当前计算的内部宽度（包括padding，但不包括border），或设置每一个匹配元素的内部宽度。     offset([coordinates{top,left}]) 在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。返回一个包含top和 left属性的对象         $("p:last").offset({ top: 10, left: 30 });     position()方法可以取得元素相对于父元素的偏移位置。与.offset()不同,      offset()是获得该元素相对于documet的当前坐标 当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。     offsetParent()取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。

3.节点样式操作

1）获取样式，设置样式

    $("p").attr("class","high"),它将原来的class替换为新的class

2）追加样式 addClass()

     如果给一个元素添加了多个class的值，那么就相当于合并了他们的样式.     如果有不同的class设定了同一样式属性，后者覆盖前者.     相当于这样的效果:         html:            <div id="div1" class="c1"></div>        jquery:        $("#div1").addClass("c3");        div元素的样式就变为了:        <div id="div1" class="c1 c3"></div>

3）移除样式 removeClass()

    从匹配的元素中删除全部或者指定的class    removeClass("one two") 移除两个class

4）切换样式

        toggleClass( className )        例如:            css代码:            c3{                border:1px solid green;                 width: 200px;                height: 200px;            }            jquery代码:            $("#btn").on("click",function(){                $("#div").toggleClass("c3");            });        注:点击#btn按钮后调用这个匿名函数进行样式切换,如果当前这个div上面有c3的样式那么就去掉c3样式,如果div上面没有c3样式那么就加上去        hasClass()          判断元素中是否含有某个class，如果有返回true，否则返回false        $("#div").hasClsss("c3");//true|false

5）设置和获取HTML，文本和值

        html()         获取集合中第一个匹配元素的HTML内容innerHTML        html(htmlString)        设置每一个匹配元素的html内容。.html() 方法对 XML 文档无效.         text()          得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，        text(textString)           设置匹配元素集合中每个元素的文本内容为指定的文本内容。         text() 在XML 和 HTML 文档中都能使用。方法不能使用在 input 元素或scripts元素上。        val()          获取匹配的元素集合中第一个元素的当前值        方法主要用于获取表单元素的值，比如 input, select 和 textarea。         val(value)        设置匹配的元素集合中每个元素的值。

4.节点遍历
注意:使用这些方法去解析html文档和xml文档都是可以的,因为html文档和xml文档都可以转换为dom模型.(也就是说在ajax中,如果后台传过来的是xml文档,那么我们使用jquery也可以用下面方法解析)

      1）children()  用于取得匹配元素的子元素集合（只考虑子元素而不考虑任何后代元素）      2）next()      取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。      3）prev()      取得匹配元素前面紧邻的兄弟元素      4）siblings()  取得匹配元素前后所有的兄弟元素      5）closest()   取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素      6）find(selector) 在当前元素对象中的子元素中查找，和参数所匹配的所有的后代元素。      7）filter(selector) 把当前所选择的所有元素再进行筛选过滤      8）nextAll()   查找当前元素之后所有的同辈元素。      9）prevAll()   查找当前元素之前所有的同辈元素。      10）parent()   取得匹配元素集合中，每个元素的父元素      11）parents()  获得集合中每个匹配元素的祖先元素，      例子: 对照函数的解释和例子中的输出结果可理解函数的用法      html:      <div id="div1">        <span id="s1">test1</span>        <span id="s2">test2</span>        <span id="s3">test3</span>        <span id="s4">test4</span>        <span id="s5">test5</span>        <span id="s6">test6</span>        <span id="s7">            <font>test_div7</font>            <span id="s8"></span>        </span>      </div>     jQuery：        console.log($("#div1").children());        console.log($("#div1").next());        console.log($("#s4").next());        console.log($("#s4").prev());        console.log($("#s4").siblings());        console.log($("#s4").closest("body"));        console.log($("#div1").find("span"));        console.log($("span").filter(":even"));        console.log($("#s4").nextAll());        console.log($("#s4").prevAll());        console.log($("#s4").parent());        console.log($("span").parent());        console.log($("#s4").parents());

5.CSS设置

    读取和设置style对象的各种属性。        css("attrName") 获取某个元素的指定样式    与attr() 方法一样，css()方法可以同时设置多个样式属性        css({"attrName1":"attrVal1","attrName2":"attrVal2"});     $("#div2").css({        "attrName1":"attrVal1",        "attrName2":"attrVal2"    });    例子:    html:    <input type="button" value="红色" id="red_btn">    <input type="button" value="绿色" id="green_btn">    <p id="my_p">大家好,才是真的好</p>    jquery:    $(function(){        $("#red_btn").on("click",function(){            $("#my_p").css("color","red");        });        $("#green_btn").on("click",function(){            $("#my_p").css("color","green");        });    });