好程式設計師帶你認識“jQuery”
好程式設計師 帶你認識 “jQuery” , jQuery是JavaScript的一個類庫,$符號它對於jQuery他們是等價的,$(""li)找到所有的li。下面,跟著 好程式設計師 的腳步,去了解一下它的選擇器的一些主要功能。
選擇器 :基本選擇器、層級選擇器、屬性選擇器與CSS類似。
基本篩選器
$('li:first') //第一個元素
$('li:last') //最後一個元素
$("tr:even") //索引為偶數的元素,從 0 開始
$("trdd") //索引為奇數的元素,從 0 開始
$("tr:eq(1)") //給定索引值的元素
$("tr:gt(0)") //大於給定索引值的元素
$("tr:lt(2)") //小於給定索引值的元素
$(":focus") //當前獲取焦點的元素
$(":animated") //正在執行動畫效果的元素
first()
last()
next() nextAll()
prev() prevAll()
siblings 除了自身以外的數
find() 空格 查詢後再元素 find(“p”)
chilren() 查詢子代
$(“li.box”) 等價於filter
內容選擇器
$("div:contains('nick')") //包含nick文字的元素
$("td:empty") //不包含子元素或者文字的空元素
$("div:has(p)") //含有選擇器所匹配的元素
$("td:parent") //含有子元素或者文字的元素
表單選擇器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的單行文字框
$(":password") //所有密碼框
$(":radio") //所有單選按鈕
$(":checkbox") //所有核取方塊
$(":submit") //所有提交按鈕
$(":reset") //所有重置按鈕
$(":button") //所有button按鈕
$(":file") //所有檔案域
$("input:checked") //所有選中的元素
$("select option:selected") //select中所有選中的option元素
篩選器
過濾
$("p").eq(0) //當前操作中第N個jQuery物件,類似索引
$('li').first() //第一個元素
$('li').last() //最後一個元素
$(this).hasClass("test") //元素是否含有某個特定的類,返回布林值
$('li').has('ul') //包含特定後代的元素
查詢
$("div").children() //div中的每個子元素,第一層
$("div").find("span") //div中的包含的所有span元素,子子孫孫
$("p").next() //緊鄰p元素後的一個同輩元素
$("p").nextAll() //p元素之後所有的同輩元素
$("#test").nextUntil("#test2") //id為"#test"元素之後到id為'#test2'之間所有的同輩元素,掐頭去尾
$("p").prev() //緊鄰p元素前的一個同輩元素
$("p").prevAll() //p元素之前所有的同輩元素
$("#test").prevUntil("#test2") //id為"#test"元素之前到id為'#test2'之間所有的同輩元素,掐頭去尾
$("p").parent() //每個p元素的父元素
$("p").parents() //每個p元素的所有祖先元素,body,html
$("#td1").parentsUntil("#td2") //id為"#td1"元素到id為'#td2'之間所有的父級元素,掐頭去尾
$("div").siblings() //所有的同輩元素,不包括自己
CSS操作
樣式
$("p").css("color"); //訪問檢視p元素的color屬性
$("p").css("color","red"); //設定p元素的color屬性為red
$("p").css({ "color": "red", "background": "yellow" });
//設定p元素的color為red,background屬性為yellow(設定多個屬性要用{}字典形式)
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2644762/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師帶你認識HTML5中的WebSocket程式設計師HTMLWeb
- 帶你認識那些App可靠性設計APP
- 好程式設計師web前端帶你瞭解JS的作用域鏈程式設計師Web前端JS
- 好程式設計師web前端分享Cookie知識程式設計師Web前端Cookie
- @程式設計師,你需要點金融常識程式設計師
- 程式設計師,請保護好你的 API!程式設計師API
- 帶你真正瞭解Java,Java程式設計師必學知識點整理Java程式設計師
- 好程式設計師web前端學習路線nodeJs學習過程之認識nodejs程式設計師Web前端NodeJS
- 好程式設計師web前端教程分享Jquery常見面試題程式設計師Web前端jQuery面試題
- 好程式設計師Web前端培訓分享jQuery面試題梳理程式設計師Web前端jQuery面試題
- 好程式設計師web前端培訓JavaScript學習筆記--jQuery程式設計師Web前端JavaScript筆記jQuery
- 好程式設計師分享Web前端知識之HTML程式設計師Web前端HTML
- 好程式設計師:Java程式設計師面試秘籍程式設計師Java面試
- 帶你真正認識ViewView
- 認識jqueryjQuery
- JQuery認識jQuery
- 程式設計師大殺器?帶你玩轉ChatGPT程式設計師ChatGPT
- 1024 程式設計師節,帶你走程式序員的世界—程式設計師
- 好程式設計師前端教程CSS基礎知識點程式設計師前端CSS
- 好程式設計師Web前端分享一些小知識!程式設計師Web前端
- 好程式設計師Java學習路線帶你5分鐘瞭解希爾排序程式設計師Java排序
- 好程式設計師web學習路線初步認知react框架程式設計師WebReact框架
- 三年java程式設計師面試感悟,讓你從新認識自己的不足!Java程式設計師面試
- 好程式設計師不寫程式碼程式設計師
- 好程式設計師告訴你Java架構師學習路線程式設計師Java架構
- 好程式設計師JavaScript分享ES6相關知識程式設計師JavaScript
- 好程式設計師web前端分享web前端入門知識程式設計師Web前端
- 好程式設計師web前端教程分享JS基礎知識程式設計師Web前端JS
- 程式設計師,請你不要在坑程式設計師了?程式設計師
- 好程式設計師分享JQuery.get提交頁面不跳轉的解決方法程式設計師jQuery
- 一文帶你認識DockerDocker
- 好程式設計師Java培訓分享Java程式設計師技能提升指南程式設計師Java
- 好程式設計師Java培訓Java程式設計師必學技術程式設計師Java
- 好程式設計師Python培訓分享Python程式設計師面試技巧程式設計師Python面試
- 不會填坑的程式設計師不是一個好程式設計師!程式設計師
- 好程式設計師web前端分享CSS基礎知識之position程式設計師Web前端CSS
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- 好程式設計師web前端培訓分享JavaScript相關知識程式設計師Web前端JavaScript