1.18 JQuery1：動態操作HTML和CSS
摘要：
jquery選擇器
jquery用法思想一
選擇某個網頁元素，然後對它進行某種操作
jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。
$(document) //選擇整個文件物件
$(&#...
jquery選擇器
jquery用法思想一
選擇某個網頁元素，然後對它進行某種操作
jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。
$(document) //選擇整個文件物件
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素
對選擇集進行修飾過濾(類似CSS偽類)
$('#ul1 li:first') //選擇id為ul1元素下的第一個li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
對選擇集進行函式過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
選擇集轉移
$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素
jquery屬性操作
1、html() 取出或設定html內容
// 取出html內容
var $htm = $('#div1').html();
// 設定html內容
$('#div1').html('<span>新增文字</span>');
2、text() 取出或設定text內容
// 取出文字內容
var $htm = $('#div1').text();
// 設定文字內容
$('#div1').text('<span>新增文字</span>');
3、attr() 取出或設定某個屬性的值
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設定圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
jquery樣式操作
jquery用法思想二
同一個函式完成取值和賦值
操作行間樣式
// 獲取div的樣式
$("div").css("width");
$("div").css("color");
//設定div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特別注意
選擇器獲取的多個元素，獲取資訊獲取的是第一個，比如：$(“div”).css(“width”)，獲取的是第一個div的width。
操作樣式類名
$("#div1").addClass("divClass2") //為id為div1的物件追加樣式divClass2
$("#div1").removeClass("divClass")//移除id為div1的物件的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式
-
學院Go語言視訊主頁
ofollow,noindex" target="_blank">https://edu.csdn.net/lecturer/1928 -
掃碼獲取海量視訊及原始碼 QQ群：721929980
