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”);


你可能感兴趣的:(JavaScript,jquery,总结,函数,比较)