10.jQuery屬性—文件—位置操作
阿新 • • 發佈：2020-08-08
目錄
一、jquery標籤屬性操作
jquery的屬性操作分為四個部分：html屬性，dom屬性，類樣式操作，值操作。
1、html屬性操作
對html文件的屬性進行讀取、設定、刪除操作。
（1）attr:設定屬性值或者返回被選中元素的屬性值
$('button').click(function(){ //jquery的屬性操作，html屬性操作:attr //attr只傳一個引數，表示獲取值 $('$ box p').text($('#box').attr('id')); //p標籤的內容 }); //attr()如果設定兩個值，表示設定屬性 $('#box').attr('class', 'foo'); //給當前標籤新增類屬性 //設定多個值使用物件儲存，如果設定多個類名不能使用attr()方法 $('#box').attr({'class':'foo2', name:'luffy'});
（2）removeAttr: 從每個匹配的元素中刪除一個屬性
//刪除一個屬性
$('#box').removeAttr('name');
$('#box').remobveAttr('class');
//刪除多個屬性
$('#box').removeAttr("name id class")
2、DOM屬性操作
（1）prop:獲取匹配的元素中的第一個元素的屬性值
//獲取第一個元素的class值 console.log($('li').prop('class')); //luffy //設定值 //prop()獲取在匹配的元素集中的第一個元素的屬性值 $('li').first().prop({'name':'an', 'name1':'bn'}); conole.log($('li').first());
（2）removeProp:用來刪除由.prop()方法設定的屬性集
//刪除dom物件的name
$('li').first().removeProp();
console.log($('li').prop('name'));
console.log($('li').prop('name1'))
3、類樣式操作
對DOm屬性的className進行新增，移除操作
（1）addClass（新增類）
為每個匹配的元素新增指定的類名
$('div').addClass('box'); //新增一個類名
$('div').addClass('box box2')
（2）removeClass（移除類）
從所有的匹配的元素中刪除全部或者指定的類
$('div').removeClass('box') //移除指定的類
$('div').removeClass() //移除全部的類
（3）toggleClass
切換css類名。如果有就移除，如果沒有就新增
$('span').click(function(){
//動態的切換class類名為active
$(this).toggleClass('active')
})
4、值操作
DOM屬性value進行讀取和設定操作
<div id="box">
開始
<p>我是一個段落</p>
<a href="">google</a>
<input type="text" value="哈哈" name="">
<button id="btn">按鈕<>
</div>
/*
開始
我是一個段落
google
*/
（1）text：僅僅獲取匹配元素包含的文字
console.log($("#box").text());
設定值：設定該所有文字內容。
$('#box').text('<a>google</a>'); //設定文字
（2）html：獲取選擇標籤所選中的內容
//html（）獲取所有
console.log($('#box').html());
/*
哈哈
<p>我是一個段落</p>
<a href="">google</a>
*/
設定值：設定該值的所有內容，會替換標籤中的原來的內容。
$('ul').html('<a href="#">google</a>')
//可以使用函式來設定素有匹配元素內容
$('ul').html(function(){
return 'hello'
})
（3）val：獲取值，用於表單控制元件中獲取值，
console.log($('input').val()); //哈哈
$('inpuit').val('你哈什麼哈')；
$('#btn').click(function(){
var val = $('input').val();
//設定上去
$('#box').text(val); //<div id="box">你哈什麼哈</div>
})
表單控制元件的常用方法：
$('input').change(function(){
console.log($(this).val())
})
二、操作表單域中的value值
<form action="">
<!--單選框-->
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="11" />gay
<!--複選框-->
<input type="checkbox" value="a" checked=""/>吃飯
<input type="checkbox" value="b" checked=""/>睡覺
<input type="checkbox" value="c" checked=""/>看書
<!--下拉列表-->
<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
1、input標籤中type屬性規定了input元素的型別
| 值 | 描述 |
|---|---|
| button | 定義可點選按鈕 |
| checkbox | 定義複選框 |
| file | 定義輸入欄位和“瀏覽”按鈕，供檔案上傳 |
| hidden | 定義隱藏的輸入欄位 |
| image | 定義影象形式的提交按鈕 |
| password | 定義密碼欄位，該欄位中自讀被掩碼 |
| radio | 定義單選按鈕 |
| reset | 定義重製按鈕，清除表單資料 |
| submit | 定義提交按鈕，提交按鈕會把表單資料傳送到伺服器 |
| text | 定義單行輸入欄位，使用者在其中輸入文字 |
通過選擇器獲取所有type=’radio‘即單選框的jquery物件
console.log($(':radio')); // :radio取的是type="radio"的
類似的type= ’checkbox‘，即複選框以如下的方式獲取
console.log($(':checkbox'));
2、獲取input中value
//1、獲取單選框的value值
console.log($('input[type=radio]:checked').val()); //屬性選擇器 輸出了
//2、複選框中value值 僅僅是獲取了第一個值
console.log($('input[type=checkbox]:checked').val()); // 輸出：a
//3.下拉列表被選中的值
var obj = $('#timespan option:selected');
console.log(obj.val()); // 輸出：1
// 如果<option value="2" selected="">8:30-9:00</option> 則預設選中2，輸出：2
3、設定input中value值
// 設定單選的值
$('input[type=radio]').val(['113']);
// 設定複選框的值
$('input[type=checkbox]').val(['b','c']);
// 設定下拉列表中選中的值，這裡面必須要用select
$('select').val(['3','2']);
4、文字框text：設定值和獲取值
//文字框 設定值和獲取值
console.log($("input[type=text]").val()); //獲取文字框中的值
//設定值
$('input[type=text]').val('試試就試試');
三、JQuery的文件操作
<body>
<span>哈哈</span>
<ul>
</ul>
<button id="btn">按鈕</button>
</body>
1、插入操作
（1）父元素.append(子元素)追加某元素，父元素中新增新的元素
//第一種方式
// 父級ul 追加 子級li
$('ul').append('<li><a href="#">luffy</a></li>');
//第二種方式
var oLi = document.createElement('li');
oLi.innerHTML = '路飛';
$('ul').append(oLi);
//第三種方式
// 如果直接的內容是當前頁面中的某些元素，那麼這些元素將從原位置上消失。簡言之，就是一個移動操作
$('ul').append($('span'));
（2）子元素.appendTo(父元素) 追加到某元素 子元素新增到父元素
// appendTo()方法
$('<a href="#">路飛2</a>').appendTo($('ul'));
（3）prepend() 前置新增， 新增到父元素的第一個位置
prependTo() 後置新增，第一個元素新增到父元素中
// 第一種寫法：
$('ul').prepend('<li>我是第一個元素</li>');
// 第二種寫法:
$('<li>我是第一個元素</li>').prependTo($('ul'));
（4）父.after(子) 在匹配的元素之後插入內容
父.before(子) 在匹配的元素之前插入內容
// 在ul標籤前面插了一個h2標籤
$('ul').before('<h2>我是一個二級標題</h2>');
// 在ul標籤後面（外面）插了一個h3標籤
$('ul').after('<h3>我是一個三級標題</h3>');
（5）子.insertAfter(父)
子.insertBefor(父)
// insertAfter
// 在</ul>後面插入了一個a標籤
$('<a href="#">最後一個</a>').insertAfter($('ul'));
// insertBefore
// 在<ul>標籤前面插入了一個a標籤
$('<a href="#">第一個</a>').insertBefore($('ul'));
2、複製操作
clone() 克隆匹配的DOM元素並且選中這些克隆的副本。
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素並且選中這些克隆的副本。
// 2.clone(true)：元素以及其所有的事件處理並且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)
$(this).clone(true).insertAfter(this);
})
3、替換操作
（1）replaceWith()：將所有匹配的元素替換成指定的HTML或DOM元素
//將所有的h5標題替換為a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將所有h5標題標籤替換成id為app的dom元素
$('h5').replaceWith($('#app'));
（2）replaceAll():用匹配的元素替換掉所有 selector匹配到的元素
$('<a href="#">替換的超連結</a>').replaceAll('button'); // 全部替換為超連結
4、刪除操作
（1）remove() 刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）
//remove():備選元素也被刪掉了 事件沒有了
$('ul').remove();
（2）empty(): 清空元素中的所有後代節點
// empty(): 清空元素中的所有後代節點(保留)
$('ul').empty();
（3）detach()：刪除節點後，事件會保留
//detach():移除匹配的節點元素 刪除節點後，事件會保留
var $btn = $('button').detach();
console.log($btn[0]); // <button>替換的按鈕</button>
$('ul').append($btn[0]);
四、jquery的位置屬性
1、position：獲取匹配到的元素相對父元素的偏移位置
// 獲取匹配元素的相對父元素的偏移 position
console.log($('p').position().left); // 30
console.log($('p').position().top); // 30
// 點選按鈕1秒內向下移動p元素50px
var offsetTop = $('p').position().top + 50 + 'px';
$('#btn').click(function () {
$('p').animate({top:offsetTop},1000)
})
2、scrollTop：獲取匹配元素相對滾動條頂部的偏移 文件被捲起的畫素值
scrollLeft：獲取匹配元素相對滾動條左側的偏移 文件被捲起的畫素值
// 獲取匹配元素相對滾動條頂部的偏移 文件被捲起的畫素值
console.log($(document).scrollLeft());
console.log($(document).scrollTop());
// 監聽文件滾動的jquery方法
$(document).scroll(function () {
console.log('水平'+ $(document).scrollLeft());
console.log('垂直'+ $(document).scrollTop());
})
3、offset：獲取匹配元素在當前視口的相對偏移
返回的物件包含兩個整型屬性：top 和 left
// offset 獲取匹配元素在當前視口的相對偏移 相對於瀏覽器
console.log($('#box').offset());
console.log($('p').offset().top); // 31
console.log($('p').offset().left); // 31
console.log($('#btn').offset().top); // 225
4、width()\height()：取得匹配元素當前計算的寬度/高度值
// 獲取元素的寬高 不包含padding
console.log('寬'+ $('#box').width()); // 寬200
console.log('高'+ $('#box').height()); // 高200
設定寬高：
// 設定寬高
$('#box').width(400);
5、innerHeight：獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）
innerWidth：獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）
// 獲取 width+2*padding 不包括邊框 獲取匹配元素的內部寬度
console.log($('#box').innerWidth()); // 410
6、outerHeight：獲取第一個匹配元素外部高度（預設包括補白和邊框）
outerWidth：獲取第一個匹配元素外部寬度（預設包括補白和邊框）
// width + 2*padding + 2*border 獲取匹配元素的外部寬度
console.log($('#box').outerWidth()); // 412