欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

牛叉的Jquery——Jquery與DOM對(duì)象的互相轉(zhuǎn)換及DOM的三種操作

 更新時(shí)間：2015年10月29日 10:40:52   作者：碼丶行者無(wú)疆  
Jquery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，本文給大家介紹Jquery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法。感興趣的朋友可以參考下

只有jQuery對(duì)象才能調(diào)用jQuery類(lèi)庫(kù)的各種函數(shù)，同樣有些dom對(duì)象的屬性和方法在jQuery上也是無(wú)法調(diào)用的，不過(guò)基本上jQuery類(lèi)庫(kù)提供的函數(shù)包含了所有的dom操作。這就需要我們知道如何將jQuery對(duì)象和DOM的相互轉(zhuǎn)換的方法。

1.jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。

2.jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換。

良好的書(shū)寫(xiě)風(fēng)格：

復(fù)制代碼 代碼如下:

var $input=$("input")

jQuery獲取的對(duì)象在變量前面加上$。

<1>jQUery對(duì)象轉(zhuǎn)成DOM對(duì)象,兩種方法：[index]和get(index)

a:var $cr=$("#cr")    //jQuery對(duì)象
    var cr=$cr[0]    //DOM對(duì)象
b:var $cr=$("#cr")    //jQuery對(duì)象
    var cr=$cr.get(0);    //DOM對(duì)象

<2>DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象

var cr=document.getElementById("cr");    //DOM對(duì)象
var $cr=$(cr);

3.解決與其他庫(kù)的沖突

jQuery.noConflict()。
jQuery用$作為自身的快捷方式。

4.使用jQuery的優(yōu)點(diǎn)

<1>簡(jiǎn)潔的寫(xiě)法
<2>支持CC1到CCS3
<3>完善的處理機(jī)制

運(yùn)行上面的代碼瀏覽器就會(huì)報(bào)錯(cuò)！
但是如果這么寫(xiě)的話：

復(fù)制代碼 代碼如下:

$('#tt').css("color","red");

瀏覽器不會(huì)因?yàn)闆](méi)有這個(gè)元素而報(bào)錯(cuò)！

5.jQuery選擇器

jQuery選擇器是jQuery的重中之重！

jQuery過(guò)濾選擇器與CSS中的偽類(lèi)選擇器相似。

<1>偶數(shù)與奇數(shù)選擇器

偶數(shù)：$("tr:even")
奇數(shù)：$("tr:odd")

<2>CSS3 偽類(lèi)選擇器奇偶數(shù)

復(fù)制代碼 代碼如下:

p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}

<2>表單類(lèi)型選擇器

<3>轉(zhuǎn)義選擇器防止出錯(cuò)

6.DOM操作分類(lèi)（1：DOM Core 2.HTML-DOM 3.CSS-DOM）

1.DOM Core

DOM Core并不專(zhuān)屬于JavaScript，任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它。它的用途并不僅限于處理網(wǎng)頁(yè)。也可以用來(lái)處理任何一種使用標(biāo)記語(yǔ)言編寫(xiě)出來(lái)的文檔，例如：XML。

2.HTML_DOM

在使用JavaScript和DOM為HTML文件編寫(xiě)腳本時(shí)，有許多專(zhuān)屬于HTML——DOM的屬性。
HTML_DOM提供了一些更加簡(jiǎn)明的記號(hào)來(lái)描述各種HTML元素的屬性。
如：

復(fù)制代碼 代碼如下:

document.forms
element.src

只能用于WEB

3.CSS_DOM

CSS_DOM是針對(duì)CSS的操作。主要是獲取和設(shè)置style對(duì)象的各種屬性。
通過(guò)改變style對(duì)象的各種屬性。改變不同效果。

復(fù)制代碼 代碼如下:

element.style.color=“red”;

7.遍歷節(jié)點(diǎn)

1.children()
2.next()
3.prev()
4.siblings()
5.closest()

8.jquey的css

<1>可以使用opacity設(shè)置透明度，jQuery已經(jīng)處理好了兼容性問(wèn)題。

$("p").css("opacity","0.5");

<2>$("p").height(100)    //100默認(rèn)單位是px,如果要用別的單位，必須要用字符串

<3>offset()方法

返回相對(duì)視窗的偏移

復(fù)制代碼 代碼如下:

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

<4>position()

復(fù)制代碼 代碼如下:

//返回相對(duì)最近一個(gè)position樣式的偏移。
var position=$("p").position();
var left=position.left;
var top=position.top;

<5>scrollTop()和scrollLeft()

復(fù)制代碼 代碼如下:

//返回滾動(dòng)條距離頂端的距離與距離左側(cè)的距離。
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//同樣可以設(shè)置滾動(dòng)到指定位置：
$("ab").scrollTop(300);

<6>pageX與pageY，獲取鼠標(biāo)在頁(yè)面上的位置

復(fù)制代碼 代碼如下:

$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});

相關(guān)文章

最新評(píng)論