JS 8 juery樣式操作 節點 事件

2021-09-01 23:44:40 字數 2032 閱讀 8255

1.1. css(「attr」,「value」)

為元素設定css樣式,引數為css屬性名和對應的屬性值,如果引數只有屬性名,表示讀取css樣式。

$('h1').css("color","red").css("background","green");
1.2. css(json物件)

json物件語法:

使用{}表示物件

物件由屬性和值組成(css屬性與值)

屬性與值都使用字串表示,之間使用 : 分隔

多組屬性之間,使用逗號隔開。

$("p").css();
示例見:01-css().html

根據層次關係獲取節點物件。

獲取當前節點下所有的直接子元素 / 或者獲取當前節點下,滿足選擇器的所有直接子元素。

獲取當前節點的父元素。

獲取父元素及祖先元素,或者獲取指定選擇器的祖先元素。

必須指定選擇器引數,獲取包含【直接】和】間接】的所有的後代元素。

獲取所有的兄弟元素 / 或獲取滿足選擇器的所有兄弟元素。

示例:02-parent.html

$("標籤語法")

示例:

var $div =$(

'');

$div.

html(""

);$div.

attr

("id"

,"box").

css();

//-------------

var $h1 =$(

"'")

; $h1.

css(

);

2.1內部新增(作為子元素新增):

將$new作為$obj的最後乙個子元素新增。

2. $obj.prepend($new);

將$new作為$obj的第乙個子元素新增。

2.1外部新增(作為兄弟元素新增)

1. $obj.after($new);

將$new作為$obj的後乙個兄弟元素新增。

2. $obj.before($new);

將$new作為$obj的前乙個兄弟元素新增。

$obj.remove();

刪除$obj.

原生js載入方法 onload:

window.onload = function () ;

jquery載入的三種寫法,ready:

1.  $(document).ready(function());

2. $().ready(function ());

3. $(function ());

原生與jq中onload的區別:

原生onload事件函式不能重複呼叫,重複書寫,後面的**會將前面的onload覆蓋掉。

jquery中優化了ready方法,可以重複使用,不會產生覆蓋問題,所有的**都會執行。

原生事件處理函式不變,jquery提供了新的繫結方式。

1.  $obj.事件函式名 (function());

事件函式名省略on 字首。

如: $div.click(function())

2. $("p").bind("事件函式名",function());

如: $("p").bind("click",function(evt));

bind()方法的底層實現:

$div.on("click",function());

jq獲取事件物件的方式及相關的屬性,同js。

瀏覽器自動將事件物件以引數形式傳遞到函式中。

JS操作css樣式

操作內聯樣式 通過js修改元素的樣式 通過style屬性設定的樣式都是內聯樣式,而內聯樣式具有較高的優先順序,所以通過js修改的樣式往往會立即顯示 讀取元素的樣式 獲取元素當前顯示的樣式 currentstyle 語法 元素.currentstyle.樣式名 getcomputedstyle 該方法...

js操作css樣式

1.js操作css樣式 例如 div style width 100px 就是在div標籤內我們新增乙個style屬性,並設定了width值,這種寫法會給標籤帶來大量的style屬性,跟實際專案是不符合的,我們沒有讓css和html分離。所以如果是為了獲取css樣式 用 window getcomp...

操作js的樣式

1.js操作css樣式 div.style.width 100px 在div標籤內我們新增了乙個style屬性,並設定 了width值。這種寫法會給標籤帶來大量的style屬性,跟實際專案是不符。我們沒有讓css和html分離。所以如果是為了獲取css樣式 window.getcomputedsty...