2. 程式人生 > >jQuery的DOM操作與練習

jQuery的DOM操作與練習

阿新 • • 發佈：2019-01-21

*0 jQuery常用操作DOM的API

   1)jQuery物件.addClass().addClass();
   2)removeClass()
   3)toggleClass()
   4)hasClass()
   5)val()，如果將val()設定給一個select/raido/checkbox元素，內容取決於option元素的value或顯示的內容值，value優先
   6)text()和html():text()取得是標籤之間的內容，html()不僅含有內容，還可能含有標籤
   7)prev()
   8)siblings()：要能產生一個數組
   9)show()和hide()
  10)fadeIn()和fadeOut()

實現功能：

（1） 用按鈕選擇複選框：全選，全取消，全反選

（2）使用者名稱輸入文字框，點選文字框出現游標開始輸入

（3）點選按鈕選擇對應的下拉列表框值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.6.js"></script>
		<style type="text/css">
			.divClass{
				font-size: 30px;
			}
			.myClass{
				color: aquamarine;
			}
			
		</style>
	</head>

	<body>
		/*
	 <div align="center">
	 	<table border="1" align="center" height="300px" width="250px" bgcolor="darkseagreen">
	 		<tr>
	 			<th>狀態</th>
	 			<th>使用者名稱</th>
	 		</tr>
	 		<tr>
	 			<td><input type="checkbox"/></td>
	 			<td>bob</td>
	 		</tr>
	 		<tr>
	 			<td><input type="checkbox"/></td>
	 			<td>may</td>
	 		</tr>
	 		<tr>
	 			<td><input type="checkbox"/></td>
	 			<td>job</td>
	 		</tr>
	 		<tr>
	 			<td><input type="checkbox"/></td>
	 			<td>jack</td>
	 		</tr>
	 		<tr bgcolor="coral">
	 			<td>
	 				<input type="button" value="全選中" />
	 			</td>
	 			<td>
	 				<input type="button" value="全取消" />
	 			</td>
	 			<td>
	 				<input type="button" value="全反選" />
	 			</td>
	 		</tr>
	 	</table>
	 </div>
	 <hr />
	 <div>
	 	無樣式
	 </div>
	 <div class="divClass">
	 	有樣式
	 </div>
	 <hr />
	 <table border="1" align="center">
	 	<tr>
	 		<th>使用者名稱</th>
	 		<td><input id="in" type="text" value="輸入使用者名稱" /></td>
	 	</tr>
	 </table>
	 
	 <hr />
	 <div align="center">
	 <input class="in" type="button" value="選中一號" />
	 <input class="in" type="button" value="選中二號" />
	 <select>
	 	<option>0</option>
	 	<option>1</option>
	 	<option>2</option>
	 	<option>3</option>
	 </select>
	 
	 <input type="button" value="選中北京和廣州" />
	 <select multiple size="4">
	 	<option>北京</option>
	 	<option>上海</option>
	 	<option>廣州</option>
	 	<option>深圳</option>
	 </select>
	 </div>
	 <script type="text/javascript">
	 	//alert("ss");
	 	//全取消失效
	 	$("input[value='全取消']").attr("disabled","disabled");
	 	
	 	//選中
	 	$("input[value='全選中']").click(function()
	 	{
	 		//找到所有checkbox
	 		$(":checkbox").attr("checked","checked");
	 		//全選中失效
	 		$(this).attr("disabled","disabled");
	 		//全取消生效
	 		$("input[value='全取消']").removeAttr("disabled");
	 		
	 	});
	 	//取消
	 	$("input[value='全取消']").click(function()
	 	{
	 		
	 		$(":checkbox").removeAttr("checked");
	 		 //全取消失效
	 		$(this).attr("disabled","disabled");
	 		$("input[value='全選中']").removeAttr("disabled");
	 	});
	 	//
	 	$("input[value='全反選']").click(function()
	 	{
	 		//禁用選中的複選框
	 		$(":checkbox:checked").attr("disabled","disabled")
	 		  //將未選中的複選框選中
	 		
	 		$(":checkbox:not(:checked)").attr("checked","checked");
	 	});
	 	//
	 	$("div").first().addClass("divClass");
	 	$("div").last().removeClass("divClass");
	 	$("div").first().toggleClass("divClass");
	 	$("div").last().toggleClass("divClass");
	 	//
	 	//為input元素新增樣式
	 	$("input").first().addClass("myClass");
	 	//為input元素新增事件
	 	//alert("");
	 	$("#in").first().focus(function()
	 	{
	 		//alert("");
	 		$(this).val("");
	 		$(this).removeClass("myClass");
	 	})
	 	$(".in").first().click(function()
	 	{
	 		$("select").val("1");
	 	})
	 	$(".in").first().next().click(function()
	 	{
	 		$("select").val("2");
	 	})
	 	$("input").last().click(function()
	 	{
	 		$("select").val(['北京','廣州']);
	 	})
	 </script>
	</body>

</html>


相關推薦

jQuery的DOM操作與練習

*0 jQuery常用操作DOM的API    1)jQuery物件.addClass().addClass();    2)removeClass()    3)toggleClass()    4)hasClass()    5)val()，如果將val()設定給一個

列表、元組、字典、集合的定義、操作與綜合練習

alt 定義 cor sco end OS bubuko move remove l = [‘Lucy‘,‘Abb‘,‘Lily‘] l.append(‘Abb‘) l.pop() print(1) t = (‘Lucy‘,‘Abb‘,‘Lily‘) scores =

Python練習(九)——面向物件，檔案操作與資料庫操作

面向物件，檔案操作與資料庫操作複習題目: 檔案score.dat中儲存的是100名學生的姓名和Python課、高數和英語成績。 （1）定義學生類，其中包含姓名、Python課、高數和英語成績及總分、均分資料成員，成員函式根據需要確定。 （2）讀入這名學

MySQL主從復制原理深入解析與練習

數據庫 記錄 sql語句 change master MySQL主從復制原理深入解析與練習MySQL主從復制畫圖描述：MySQL主從復制原理上圖詳解：①　用戶做crud操作，寫入數據庫，更新結果記錄到binlog中；②　主從同步是主找從的，從庫IO發起請求，主庫的主進程看從庫的master

accp8.0轉換教材第1章多線程理解與練習

獲取 stack 創建 exc 同步方法 emp 默認 一個 ack 一.單詞部分： ①process進程 ②current當前的③thread線程④runnable可獲取的 ⑤interrupt中斷⑥join加入⑦yield產生⑧synchronize同時發生 二.預習部

#18 cisco設備系統操作與計算機的進制轉換

cisco設備系統操作與計算機的進制轉換cisco設備的操作系統： IOS：Internetwork Operating System，互聯網絡操作系統，BSDUNIX簡化版 交換機IOS：幾兆大小 路由器IOS：幾十兆大小Huawei 或者 H3C的操作系統： Comware：Communi

accp8.0轉換教材第9章JQuery相關知識理解與練習

ntb 驗證 單詞 手機號碼 sdn load .com read 要求 自定義動畫 一.單詞部分： ①animate動畫②remove移除③validity有效性 ④required匹配⑤pattern模式 二.預習部分 1.簡述JavaScript事件和jquery事件

python2.7.13標準庫文件目錄操作與文件操作

mov abs 庫文件 shell htm .com 及其 rec lose 標準庫的中文參考文檔： http://python.usyiyi.cn/translate/python_278/library/index.html 官方標準庫文檔：https://docs.p

MD5的學習與練習

seq image fileinput 文本 canonical display 調用 substr 中文 MD5加密的Java實現 在各種應用系統中，如果需要設置賬戶，那麽就會涉及到存儲用戶賬戶信息的問題，為了保證所存儲賬戶信息的安全，通常會采用MD5加密的方式來，

accp8.0轉換教材第10章Ajax和jQuery理解與練習

put else win send jquery實現 servlet ews window 8.0 C/S （Client/Server）結構，即大家熟知的客戶機和服務器結構。 B/S（Browser/Server）結構即瀏覽器和服務器結構。 認識ajax 、XMLHttp

accp8.0轉換教材第11章JAjax加護擴展理解與練習

func 原生態 事件 提交 pic 請求 val .get table ①雜記：前面有原生態JavaScript實現ajax這裏又多了更簡單的方法實現ajax ②$.get()方法的常用參數 參數 類型 說明 url String 必選，規定發送地址 d

Java並發——原子變量和原子操作與阻塞算法

index 復雜 多線程 保護 註意 java並發 edm urn 相同 十五年前，多處理器系統是高度專用系統，要花費數十萬美元（大多數具有兩個到四個處理器）。現在，多處理器系統很便宜，而且數量很多，幾乎每個主要微處理器都內置了多處理支持，其中許多系統支持數十個或數百個處理

關於wamp的HTML， PHP， mysql 三者的操作與聯系 - mysql簡單配置（三）

長度 -1 logs 建議 用戶 不用 自帶 .com upd 　　上一章講完HTML與PHP之間的傳值方法，這一章將wamp中mysql的使用，為下一章PHP調用數據準備。 再次說明作者的wamp版本是3.0.6 64bit 　　打開wamp自帶的mysql試圖數據庫

【網絡爬蟲入門05】分布式文件存儲數據庫MongoDB的基本操作與爬蟲應用

數據庫的操作 理解 src web 文件存儲 學習 json格式 關系型 log 【網絡爬蟲入門05】分布式文件存儲數據庫MongoDB的基本操作與爬蟲應用 廣東職業技術學院 歐浩源 1、引言 網絡爬蟲往往需要將大量的數據存儲到數據庫中，常用的有MySQL、Mon

hbase優化操作與建議

global locks 讀寫 wke filesize 默認 apach 鏈接 連接 一、服務端調優 　　1、參數配置 　　　　1）、hbase.regionserver.handler.count：該設置決定了處理RPC的線程數量，默認值是10，通常可以調大，

MySQL 查詢語句select講解與練習

mysql 查詢語句select講解與練習select語句執行流程：START————>FROM------>WHERE(選擇，合適的行)--------->GROUP BY(分組)---------->HAVING(對分組進行過濾)————>ORDER BY(排序)————&g

scala中list集合的操作與總結

unit flat script red char cte 條件 atm pan /** * Created by root * Description : List */ object ListTest { def main(args: Array[

Linux Shell：文件目錄操作與實例

linux 文件 目錄 shell 本文介紹基礎的文件操作：創建，移動，編輯，刪除 文件和文件夾命令與案例:mkdir 創建目錄--創建兩個目錄tangym@ubuntu:~$ mkdir test2 test3--在test1下面創建一個新的目錄mydirtangym@ubuntu:~$ m

Linux學習閑談(一)——Shell基本操作與命令

模式 http 方括號 -a ali 入參 post lac 變量引用 Linux學習閑談(一) ——Shell基本操作與命令 （轉載請附上本文鏈接——linhxx） 1、#!/bin/sh 放在程序開頭，表示用/bin/sh方式來解析。 2、變量 1）變量賦值 v

Python文件操作與集合

效果 文件操作 str 模式 strong python 數據 acc 讀寫 python下的文件操作非常至關緊要，這裏將重點講講python下對文件的各種操作 1. open() 想要對文件操作，一個步驟就是打開該文件進行訪問，所以的一切操作都從些命令開始 **>