jquery樣式操作

2022-08-27 14:42:12 字數 1830 閱讀 4822

樣式類操作

addclass();// 新增指定的css類名。

removeclass();// 移除指定的css類名。

hasclass();// 判斷樣式存不存在

toggleclass();// 切換css類名,如果有就移除,如果沒有就新增。

示例**

$('.c1').addclass('c2');

$('.c1').addclass('c2');

$('.c1').hasclass('c2');

$('.c1').toggleclass('c2');

css樣式
原生js

標籤.style.color = 'red';

jquery

$('.c1').css('background-color','red');

同時設定多個css樣式

$('.c1').css()

位置操作
檢視位置

$('.c2').position(); //檢視相對位置

$('.c2').offset(); //檢視距離視窗左上角的絕對位置

設定位置

$('.c2').offset();

jquery繫結點選事件的寫法

原生js繫結點選事件

// $('.c1')[0].onclick = function ()

jquery繫結點選事件

$('.c1').click(function () )

點選事件和滾動事件的示例**

頂部位置

走你 返回頂部

尺寸
$('.c1').height();  //content 高度

$('.c1').width(); //content 寬度

$('.c1').innerheight();//content高度+padding高度

$('.c1').innerwidth(); //content寬度+padding寬度

$('.c1').outerheight();//content高度+padding高度 + border高度

$('.c1').outerwidth();//content寬度+padding寬度+ border寬度

示例:

html()//取得第乙個匹配元素的html內容,包含標籤內容

html(val)//設定所有匹配元素的html內容,識別標籤,能夠表現出標籤的效果

text()// 取得所有匹配元素的內容,只有文字內容,沒有標籤

text(val)//設定所有匹配元素的內容,不識別標籤,將標籤作為文字插入進去

示例:$('.c1').text('');

$('.c1').html('');

獲取值

input type='text'的標籤--$('#username').val();

input type='radio'標籤獲取被選中的標籤的值 --- $(':radio:checked').val();

input type='checkbox'標籤獲取被選中的標籤的值 --- 直接$(':checkbox:checked').val();是不行的,需要迴圈取值

var d = $(':checkbox:checked');

for (var i=0;i屠龍寶刀,點選就送!

$('.btn').click(function () )

jQuery樣式操作

獲取div的樣式 div css width div css color 設定div的樣式 div css width 30px div css height 30px div css 注意 選擇器獲取的多個元素,獲取資訊獲取的是第乙個,比如 div css width 獲取的是第乙個div的wid...

jquery樣式操作

同乙個函式完成取值和賦值 獲取div的樣式 div css width div css color 設定div的樣式 div css width 30px div css height 30px div css 選擇器獲取的多個元素,獲取資訊獲取的是第乙個,比如 div css width 獲取的是...

jquery樣式操作

獲取div的樣式 div css width div css color 設定div的樣式 div css width 20px div css height 20px div css 操作樣式類名 div1 addclass divclass2 為id為div1的物件追加樣式divclass2 d...