JQuery和JavaScript中功能相似函数总结和比较

1.JS中常用的方法总结：

1）JS中创建元素：

函数：createElement(TagName)、创建文本节点createTextNode(arg0)

Eg：

JS分页创建table：

//创建一行

var trobj = document.createElement(“tr”);

//创建第一个单元格

var tdobj = document.createElement(“td”);

tdobj.appendChild(document.createTextNode(stu.sid));

//将单元格添加到行

trobj.appendChild(tdobj);

…….多个单元格

//将行添加到tbody

tbody.appendChild(trobj); 

2）JS中的获取元素

函数：getElementById()、getElementsByName(等价于getElementsByTagName)

       Eg：var page = document.getElementById("jumpPage").value;

                var images = document.getElementsByName("img");

      3）JS中设置属性，得到属性的值：

     Eg：<div  id=”myDiv” class=”bd”  title=“good” lang=“en” dir=“ltr”></div>

             var  temp =  document.getElementById(“myDiv”);

3）JS中获取元素的属性、更改：

          （1）可以直接给属性赋值，

              Eg：//获得元素属性

                      alert(temp.className)

                      //设置元素属性

                       temp.title= “better”;

 

         （2）也可以通过DOM中的方法getAttribute()、setAttribute()、removeAttribute()

           Eg：：

                     //获得元素属性

                     alert(temp.getAttribute(“class”))

                    //设置元素属性

                     temp.setAttribute(“title”,”better”);

                    //删除元素属性

                    Temp.removeAttribute(“lang”);

  2.JQuery中常见的方法总结：

   （1）获取第一个匹配元素属性的属性值

        函数：attr(属性名)

        Eg: <img src=”test.jpg”/>

               $(“img”).attr(“src”);

       拓充：JQuery中的html()、text()、val()获取元素的属性值区别？

答：

1.html()用为读取和修改元素的HTML标签

2.text()用来读取或修改元素的纯文本内容

3.val()用来读取或修改表单元素的value值。

   （2）批量设置很多的属性：

        函数：attr(Map作为属性的名值对对象)

        Eg: $(“img”).attr({src : “test.jpg”, alt : “Test Image”});

     (3)为所匹配元素设置一个属性值：

        函数： attr(属性名,属性值);

        Eg: $(“img”).attr(“src”,”test.jpg”);

            $(“img”).attr(“className”,”selected”);  

       注意：设置class属性时，属性名为className

     (4)删除一个属性：

        函数：removeAttr（要删除的属性名）

         Eg: $(“img”).removeAttr(“src”);

     

     

      1) 为每个匹配的元素添加指定的类名：

   函数：addClass(一个或多个要添加到元素中的CSS类名)

  eg：$(“p”).addClass(“selectedhighlight”)

      2）从所有匹配的元素中删除全部或者指定的类:

          <p class="selectedfirst">Hello</p>

          1.删除全部类  $(“p”).removeClass();

          2.删除指定的类  $(“p”).removeClass(“selected”);

JQuery常见的选择器：

（1）ID 选择器：

Eg: <div id="myDiv">HELLO WORLD!</div>

    $(“#myDiv”).attr(“className”,”first”);

(2)类选择器

<div class="notMe">divclass="notMe"</div>

<div class="myClass">divclass="myClass"</div>

<span class="myClass">spanclass="myClass"</span>

$(“.myClsss”);

(3)元素选择器

        <img src=”test.jpg”/>

       $(“img”)；
（4）属性选择器

<input type="checkbox"name="newsletter" value="Hot Fuzz" />

<input type="checkbox"name="newsletter" value="Cold Fusion" />

<input type="checkbox"name="accept" value="Evil Plans" />

查找所有 name 属性是accept的 input 元素,同时设置checked属性值为true

$(“input[name= ‘accept’]”).attr(“checked”,”true”);