【前端】jQuery選擇器

阿新 • • 發佈：2018-12-22

<!DOCTYPE html>
<html>
<head>
	<title>jQuery | Selectors</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		body {
			font-size: 17px;
			font-family: arial;
			background: #f4f4f4;
			line-height: 1..5em;
		}

		header { 

			background: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
			border-bottom: 4px #000 solid;
			margin-bottom: 10px;
		}

		#container {
			width:90%;
			margin: auto;
			padding: 10px;
		}
	</style>
</head>
<body>

	<header>
		<h1>jQuery</h1>
	</header 
>

	<div id="container">
		<h1 id="heading1"> Heading One</h1>
		<p id="para1">Hello</p>
		<h1 class="heading2">Heading Two</h1>
		<p class="para2">World<span> TEST </span></p>

		<ul id="list">
			<li>List Item </li>
			< 
li>List Item </li>
			<li>List Item </li>
			<li>List Item </li>
			<li>List Item </li>
			<li>List Item </li>
		</ul>
		<input type="button" value="Button 1">
		<input type="submit" value="Button 2">
		<input type="text">

		<a href="https://google.com">Google</a>
		<a href="https://yahoo.com">Yahoo</a>

	</div>
	

	<script>
		// $('h1').hide() // 標籤名選擇
		// $('h1#heading1').hide(); // 標籤名 + id組合選擇
		// $('h1.heading2').hide() // 標籤名 + 類選擇
		// $('p span').css('color', 'red') // p下面的span，修改顏色
		$('ul#list li:first').css('color', 'red') 
		$('ul#list li:last').css('color', 'green')
		$('ul#list li:even').css('background-color', 'yellow')
		$('ul#list li:odd').css('background-color', '#ccc')
		$('ul#list li:nth-child(3n)').css('list-style', 'none')

		// 按照型別選擇
		$(':button').hide() 
		$(':submit').hide()
		$(':text').hide()

		// 選擇連結
		$('[href]').css('color', 'red')
		$('a[href="https://yahoo.com"]').css('color', 'green')
		
		// 全選
		// $('*').hide()
	</script>
</body>
</html>

顯示效果如下：

在這裡插入圖片描述

程式碼可以直接閱讀，註釋比較明確。總體看，jQuery選擇器用起來非常簡潔，且提供了直接操作元素的方法。

END.

【前端】jQuery選擇器

<!DOCTYPE html> <html> <head> <title>jQuery | Selectors</title> <s

【轉】JQuery選擇器

log fieldset radi query 選擇器序號 html 數組 cnblogs 原址：http://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的選擇器可謂之強大無比，這裏簡單地總結一下

【ElementUI】日期選擇器時間選擇範圍限制

del this 以及 ui框架 .get led () 設置 ons 　　ElementUI是餓了麽推出的一套基於vue2.x的一個ui框架。官方文檔也很詳細，這裏做一個element-ui日期插件的補充。　　官方文檔中使用picker-options屬性來限制可選擇的

【ElementUI】日期選擇器時間選擇範圍限制，只能選今天之前的時間，或者是隻能選今天之後的時間。今天是否可以選

<el-date-picker v-model="value1" type="date" placeholder="選擇日期" :picker-options="pickerOptions0"> </el-date-picke

【前端】jQuery DataTables 使用手冊（精簡版）【前端】jQuery DataTables 使用手冊（精簡版）

【前端】jQuery DataTables 使用手冊（精簡版）一、常用屬性 //把公共的設定項都放在這裡，就不需要每個頁面都設定一遍了，放在jQuery物件上是為了避免汙染全域性變數window.dataTablesSettings = { processing : false,//是否顯

【前端】jQuery常用基礎知識點總結

目錄 jQuery概念：入口函式： jQuery選擇器：樣式操作：屬性操作：特殊動畫：事件：事件冒泡：事件委託： jQuery中的DOM操作： jQuery概念： JQuery: JavaScript Query; 這

【前端】jQuery動畫

<!DOCTYPE html> <html> <head> <title>jQuery| Effects & Animate</title

【WEB】CSS選擇器總結

一、上下文選擇器 1.標籤選擇器 <style> h1 {font-size: 16px;} p {color:red;} </style> 程式碼中的h1和p就是選擇器，他們是選擇器裡面最常用的一種，叫做標籤選擇器。我們可

【CSS】複合選擇器

CSS基礎選擇器基礎選擇器比較簡單，主要有標籤選擇器（元素選擇器），類選擇器，多類名選擇器，ID選擇器，萬用字元選擇器。以上都比較簡單，在這裡我們主要說一下複合選擇器 CSS複合選擇器複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組

【CSS】CSS選擇器優先順序及!important屬性

CSS的選擇器是有權重的，當不同選擇器的樣式設定有衝突時，會採用權重高的選擇器設定樣式。權重（即優先順序）的規則如下，權重越高，優先順序越高：同一個元素可以使用多個規則來指定它的同一樣式（

【ElementUI】時間選擇器限制選擇範圍 disabledData

關於結束時間不能大於開始時間的問題，在elementui裡我們用官方提供的 disabledDate 選項來解決。 HTML：給選擇器加上:picker-options屬性 //開始時間 <

【jsoup】使用選擇器語法來查詢元素

使用選擇器語法來查詢元素問題你想使用類似於CSS或jQuery的語法來查詢和操作元素。方法 File input = new File("/tmp/input.html"); Document

【ionic3】地區選擇器

1、安裝 ion-multi-picker npm install ion-multi-picker --save 2、匯入 app.module.ts ... import {Mul

【CSS3】:checked選擇器

在表單元素中，單選按鈕和複選按鈕都具有選中和未選中狀態。（大家都知道，要覆寫這兩個按鈕預設樣式比較困難）。在CSS3中，我們可以通過狀態選擇器“:checked”配合其他標籤實現自定義樣式。而“:checked”表示的是選中狀態。示例演示：通過“:checked”

【前端】強大的javascript原生選擇器querySelector 和 querySelectorAll

它的 color 通過 tor size 便是進行 play tar querySelector 和 querySelectorAll 　　在傳統的 JavaScript 開發中，查找 DOM 往往是開發人員遇到的第一個頭疼的問題，原生的 JavaScript 所提供的

web前端【第三篇】CSS選擇器

方式設置導入標簽 info attr pos pan import 一、css概述 CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標簽的渲染和布局 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。例如

【輕鬆前端之旅】CSS選擇器中的空格與尖括號有何區別？

CSS選擇器中的空格與尖括號有何區別？例子1： .a .b { margin: 0; } 空格隔開a和b，選擇所有後代元素。例子2： .a>.b { margin:

【前端】CSS基礎02-萬用字元,id,類選擇器

1:萬用字元選擇器和ID選擇器的使用: 2:類選擇器的使用,CSS類選擇器的選擇符號是"." 3:綜合demo 4:複合選擇器 4.1(既...又...)不常用 4.2 後

jquery選擇器【radio checkbox】選擇【查詢div下的表單具有某種屬性的控制元件：注意是div下】

txt3<pre name="code" class="html"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

【前端】jQuery選擇器

相關推薦