eg:
<div id="hd">
<p>后盾人 人人做后盾0</p>
<p id="one">后盾人 人人做后盾1</p>
<span>1111111</span>
<p hd="houdunren" class='hd'>后盾人 人人做后盾2</p>
<p name='about'>后盾人 人人做后盾3</p>
<p class='hd'>后盾人 人人做后盾4 <span>123</span></p>
<p class='hd'>后盾人 人人做后盾5</p>
<p name='abc'>后盾人 人人做后盾6 <span>123</span></p>
<p name='abc'>后盾人 人人做后盾7</p>
<div>
<p>我們也是p標簽8</p>
<p>我們也是p標簽9</p>
<p>我們也是p標簽10</p>
<p></p>
<p></p>
</div>
</div>
給8、9、10 添加樣式
$("#hd>div p").css({'color':'blue','font-size':'25px'});
給id=one添加樣式 (1)
$("#one").css({'color':'blue','font-size':'25px'});
選擇的是緊鄰在#one后面的p標簽 (2)
$("#one+p").css({'color':'blue','font-size':'25px'});
選擇的是#one后面所有同級p標簽 (2-7)
$("#one~p").css({'color':'blue','font-size':'25px'});
選擇的是#hd里第一個p標簽 (0)
$("#hd p:first").css({'color':'blue','font-size':'25px'});
選擇的是#hd里最后一個p標簽 (最后一個空標簽)
$("#hd p:last").css({'color':'blue','font-size':'25px'});
選擇的是#hd里的p標簽,排除掉id是one的 (0,2,3,4,5,6,7,8,9,10)
$("#hd p:not(#one)").css({'color':'blue','font-size':'25px'});
選擇的是#hd里序號是偶數的p標簽 (0,2,4,6,8,10)
$("#hd p:even").css({'color':'blue','font-size':'25px'});
選擇的是#hd里序號是奇數數的p標簽 (1,3,5,7,9)
$("#hd p:odd").css({'color':'blue','font-size':'25px'});
選擇的是#hd里的3號p標簽 (2)
$("#hd p:eq(3)").css({'color':'blue','font-size':'25px'});
選擇的是#hd里序號大于3的p標簽 (3-10)
$("#hd p:gt(3)").css({'color':'blue','font-size':'25px'});
選擇的是#hd里序號小于3的p標簽 (0-2)
$("#hd p:lt(3)").css({'color':'blue','font-size':'25px'});
選擇的是內容中包含 盾3 的p標簽 (3)
$("#hd p:contains(盾3)").css({'color':'blue','font-size':'25px'});
選擇#hd里空的p標簽 (最后的空標簽)
$("#hd p:empty").css({width:'300px',height:'50px',background:'blue'});
選擇的是#hd里非空的p標簽 (0-10)
$("#hd p:parent").css({width:'300px',height:'50px',background:'blue'});
選擇的是含有span標簽的p標簽 (4,6)
$("#hd p:has(span)").css({'color':'blue','font-size':'25px'});
選擇有name屬性的p標簽 (3,6,7)
$("#hd p[name]").css({'color':'blue','font-size':'25px'});
選擇的是#hd里name屬性值等于abc的p標簽 (6,7)
$("#hd p[name=abc]").css({'color':'blue','font-size':'25px'});
選擇的是#hd里hd屬性值等于houdunren的p標簽 (2)
$("#hd p[hd=houdunren]").css({'color':'blue','font-size':'25px'});
選擇的是name屬性值以a開頭的p標簽 (3,6,7)
$("#hd p[name^=a]").css({'color':'blue','font-size':'25px'});
選擇的是name屬性值以t結尾的p標簽 (3)
$("#hd p[name$=t]").css({'color':'blue','font-size':'25px'});
選擇的是name屬性值中有b的p標簽 (3,6,7)
$("#hd p[name*=b]").css({'color':'blue','font-size':'25px'});
選擇的是#hd中有class屬性并且hd屬性以h開頭的p標簽 (2)
$("#hd p[class][hd^=h]").css({'color':'blue','font-size':'25px'});
eg:
<ul>
<li>后盾人 人人做后盾1</li>
<li>后盾人 人人做后盾2</li>
<li>后盾人 人人做后盾3</li>
<li>后盾人 人人做后盾4</li>
<li>后盾人 人人做后盾5</li>
</ul>
<ul>
<span>12</span>
<li>后盾人 人人做后盾6</li>
<li>后盾人 人人做后盾7</li>
<li>后盾人 人人做后盾8</li>
<li>后盾人 人人做后盾9</li>
<li>后盾人 人人做后盾10</li>
<span>13</span>
</ul>
<ul>
<span>11</span>
<li>我也是li11</li>
</ul>
選擇ul li 中的第一個 (1)
$("ul li:first").css({'color':'blue','font-size':'25px'});
選擇的是ul里的li的父級元素中的第一個子元素(要求這個子元素是li標簽)
$("ul li:first-child").css({'color':'blue','font-size':'25px'}); (1)(6//必須開頭是li標簽才能被選中。)
$("ul li:nth-child(1)").css({'color':'blue','font-size':'25px'}); (1)(6//必須開頭是li標簽才能被選中。)
$("ul li:nth-child(2)").css({'color':'blue','font-size':'25px'}); (2,6,11)
$("ul li:nth-last-child(2)").css({'color':'blue','font-size':'25px'}); (9,4)
選擇的是ul里的li的父級元素中的最后一個子元素(要求這個子元素是li標簽)
$("ul li:last-child").css({'color':'blue','font-size':'25px'}); (5,11)(10//必須結尾是li標簽才能被選中。)
選擇的是ul里面的獨生子li(要求這個li沒有任何兄弟元素)
<ul>
<li>我也是li11</li>
</ul>
$("ul li:only-child").css({'color':'blue','font-size':'25px'});
選擇的是ul里面的第一個li標簽,存在其他標簽也可以被選中 (1,6,11)
$("ul li:nth-of-type(1)").css({'color':'blue','font-size':'25px'});
$("ul li:first-of-type").css({'color':'blue','font-size':'25px'});
選擇的是ul里面的最后一個li標簽 (5,10,11)
$("ul li:last-of-type").css({'color':'blue','font-size':'25px'});
選擇倒數第二個li標簽 (5,10)
$("ul li:nth-last-of-type(2)").css({'color':'blue','font-size':'25px'});
選擇的是ul里面的獨生子li(要求這個li沒有任何兄弟元素) (11)
$("ul li:only-of-type").css({'color':'blue','font-size':'25px'});
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs