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

来源:转载

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


版权声明:本文为博主原创文章,未经博主允许不得转载。



分享给朋友:
您可能感兴趣的文章:
随机阅读: