1.18 JQuery1:動態操作HTML和CSS
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語言視訊主頁
https://edu.csdn.net/lecturer/1928 -
掃碼獲取海量視訊及原始碼 QQ群:721929980
相關文章
- JQuery1:動態操作HTML和CSSjQueryHTMLCSS
- HTML+CSS實現動態相簿HTMLCSS
- mORMot 1.18 第13章 動態陣列ORM陣列
- HTML和CSSHTMLCSS
- 動態載入JS和CSSJSCSS
- 使用 JS 來動態操作 css ,你知道幾種方法?JSCSS
- html和css總結HTMLCSS
- HTML CSS 浮動佈局⑤HTMLCSS
- HTML5 和 CSS3的新互動特性HTMLCSSS3
- Day9:html和cssHTMLCSS
- Day6:html和cssHTMLCSS
- Day2:html和cssHTMLCSS
- 解耦 HTML、CSS 和 JavaScript解耦HTMLCSSJavaScript
- 解耦HTML、CSS和JavaScript解耦HTMLCSSJavaScript
- 結構化HTML和CSSHTMLCSS
- JavaScript動態生成html元素JavaScriptHTML
- jQuery和CSS3繪製動態笑臉jQueryCSSS3
- 動態載入css方法實現和深入解析CSS
- HTML5和CSS3中的互動新特性HTMLCSSS3
- Quartz (2) - 動態操作quartz
- 動態遊標的操作~~~
- html和css選擇器使用HTMLCSS
- html和css書寫規範HTMLCSS
- HTML頁面和CSS檔案HTMLCSS
- css動態邊框效果CSS
- HTML基礎8–CSS、滑動門HTMLCSS
- js動態載入 js檔案和 css檔案JSCSS
- HTML————9、HTML CSSHTMLCSS
- html select動態賦值HTML賦值
- Python HTML和CSS 1:html文件結構和常用標籤PythonHTMLCSS
- html元素的動態新增和刪除程式碼例項HTML
- 360安全衛士靜態頁面(html+css)HTMLCSS
- HTML5和CSS3提高HTMLCSSS3
- 前端-html和css基礎知識前端HTMLCSS
- html和css的全盤複習HTMLCSS
- HTML標籤和CSS個人總結HTMLCSS
- HTML和CSS是什麼玩意兒?HTMLCSS
- html cssHTMLCSS