1. 程式人生 > >python就業班第25天----jquery進階

python就業班第25天----jquery進階

jquery動畫效果:

  • 淡入:fadeIn()
  • 淡出:fadeOut()
  • 切換淡入淡出:fadeToggle()

toggle:切換的意思 fade:逐漸消失,褪色的意思

  • 顯示元素:show()
  • 隱藏元素:hide()
  • 切換元素可見狀態:toggle()
  • 向下展開:slideDown()
  • 向上收起:slideUp()
  • 切換展開收起狀態:slideToggle()

$("#btn1").click(function(){$("#box").fadeIn()});

單標籤操作: 獲取input輸入框內容: alert( $("#content").val()); alert( $("#content").prop("value"));

注意:html()只能獲取雙標籤的內容,無法獲單標籤的

自定義屬性(不分單雙標籤):attr("自定義屬性名"); body裡面寫: <input type="text" id="content" haha="hehe"; script裡面寫: alert($("#content").attr("haha"));

鏈式呼叫:

<!DOCTYPE html>
<html lang="en">
<head>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { font-family: 'Microsoft Yahei'; } body, ul { margin: 0px; padding
: 0px; } ul { list-style: none; } .menu { width: 200px; margin: 20px auto 0; } .menu .level1, .menu li ul a { display: block; width: 200px; height: 30px; line-height: 30px; text-decoration: none; background-color: #3366cc; color: #fff; font-size: 16px; text-align: 10px; } .menu li ul a { font-size: 14px; text-indent: 20px; background-color: #7aa1ef; } .menu li ul { display: none; } .menu li ul .current { display: block; } .menu li ul a:havor { background-color: #f6b544; }
</style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $(".menu li a").click(function(){ // alert($(this).html()); // $(this).next() :ul標籤 // slideToggle():切換,展開卷起狀態,返回的還是ul本身 // parent,ul的父類元素li // siblings:找到li的兄弟元素 // children("ul"):找到子元素為ul的標籤 // slideup():讓ul標籤捲起 // 這個過程稱為鏈式呼叫 $(this).next().slideToggle().parent().siblings().children("ul").slideUp(); }) }) </script> </head> <body> <ul class="menu"> <li> <a href="#" class="level1">手機</a> <ul class="current"> <li><a href="#">iPhone X 256G</a></li> <li><a href="#">紅米4A 全網通</a></li> <li><a href="#">HUAWEI Mate10</a></li> <li><a href="#">vivo X20A 4GB</a></li> </ul> </li> <li> <a href="#" class="level1">筆記本</a> <ul> <li><a href="#">MacBook Pro</a></li> <li><a href="#">ThinkPad</a></li> <li><a href="#">外星人(Alienware)</a></li> <li><a href="#">惠普(HP)薄銳ENVY</a></li> </ul> </li> <li> <a href="#" class="level1">電視</a> <ul> <li><a href="#">海信(hisense)</a></li> <li><a href="#">長虹(CHANGHONG)</a></li> <li><a href="#">TCL彩電L65E5800A</a></li> </ul> </li> <li> <a href="#" class="level1">鞋子</a> <ul> <li><a href="#">新百倫</a></li> <li><a href="#">adidas</a></li> <li><a href="#">特步</a></li> <li><a href="#">安踏</a></li> </ul> </li> <li> <a href="#" class="level1">玩具</a> <ul> <li><a href="#">樂高</a></li> <li><a href="#">費雪</a></li> <li><a href="#">銘塔</a></li> <li><a href="#">貝恩斯</a></li> </ul> </li> </body> </html>

鏈式呼叫:next().slideToggle().parent().siblings().children(“ul”).slideUp(); //這個過程稱為鏈式呼叫

樣式和動畫衝突:樣式相當於設定起始值了。

例:聊天效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css"></style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
		$(function(){
			// 1.獲取傳送按鈕,輸入框,說的人,聊天對話方塊
			var talksub = $("#talksub");
			var talkwords = $("#talkwords");
			var who = $("#who");
			var words = $("#words");

			// 2.監聽按鈕的點選
			talksub.click(function(){
				// 2.1 判斷輸入框中是否填寫內容
				if(talkwords.val()==""){
					alert("輸入框內容不能為空");
					return;
				}
				
				// 2.2 判斷誰說的話
				var content = "";
				if(who.prop("value") == 0){ // A說的話
					content += '<div class="atalk"><span>A說:' + talkwords.val() + '</span></div>';
				}
				else{   // B說的話
					content += '<div class="atalk"><span>B說:' + talkwords.val() + '</span></div>';
				}
				// 2.3 將content新增對話方塊容器
				words.html(words.html() + content);
				// 2.4 清空輸入框中的內容
				talkwords.prop({"value":""});
			})
		})
    </script>
</head>
<body>
	<div class="talk_con">
          <div class="talk_show" id="words">
              <div class="atalk"><span>A說:吃飯了嗎?</span></div>
              <div class="btalk"><span>B說:還沒呢,你呢?</span></div>
          </div>
          <div class="talk_input">
              <select class="whotalk" id="who">
                  <option value="0">A說:</option>
                  <option value="1">B說:</option>
              </select>
              <input type="text" class="talk_word" id="talkwords">
              <input type="button" value="傳送" class="talk_sub" id="talksub">
          </div>
      </div>
</body>

插入圖jybday25-1

迴圈:遍歷標籤和遍歷陣列 遍歷陣列: 陣列.forEach(function(element){        console.log(element); }) 遍歷選擇器選擇的標籤: $(“選擇器”).each(function(){        console.log($(this).html()) })

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Document</title>
	    <script src="js/jquery-1.12.4.min.js"></script>
	    <script>
	        $(function () {
	            // 1.遍歷普通陣列
	            var array = ["天龍", "九陰", "天山折梅手"]
	            // 2.遍歷
	            array.forEach(function (element) {
	                console.log(element);
	            })
	            // 3.遍歷所有li標籤
	            $("#list li").each(function () {
	                // console.log(this.innerHTML); //原生方法
	                console.log($(this).html());
	            })
	        })
	    </script>
	</head>
	
	<body>
	    <ul id="list">
	        <li>隔壁老王1</li>
	        <li>隔壁老王2</li>
	        <li>隔壁老王3</li>
	        <li>隔壁老王4</li>
	        <li>隔壁老王5</li>
	        <li>隔壁老王6</li>
	        <li>隔壁老王7</li>
	        <li>隔壁老王8</li>
	    </ul>
	</body>
</html>

常見jquery事件: blur():元素失去焦點 blur:玷汙的意思 focus():元素獲取焦點

body裡面寫:

<body>
    <p>
        <label>使用者名稱</label><input type="text" name="username" id="">
    </p>
    
            
           

相關推薦

python就業25----jquery

jquery動畫效果: 淡入:fadeIn() 淡出:fadeOut() 切換淡入淡出:fadeToggle() toggle:切換的意思 fade:逐漸消失,褪色的意思 顯示元素:show() 隱藏元素:hide() 切換元素可見狀態:toggle()

python就業30----Flask路由和檢視

Flask簡介 服務端不能主動向客戶端通訊,只有瀏覽器進行請求,伺服器才能做出響應 Flask:輕量級,沒有發郵件,不能連資料庫,需要安裝拓展包等。可拓展性強 djano:提供相對完善功能 tornado:偏嵌入,非阻塞伺服器 flask組成:兩個核心 wer

python就業32----flask程式碼複用、資料庫

程式碼複用 flask中程式碼複用: 1.巨集(macro) 定義巨集: {% macro 巨集名(形參=預設值1, ...) %} html程式碼 {% endmacro %} 使用當前檔案巨集:{{ 巨集名(形參=值1,...) }} 2.繼承(

巨蟒python全棧開發-10 函式

一.今日主要內容總覽(重點) 1.動態傳參(重點) *,** *: 形參:聚合 位置引數*=>元組 關鍵字**=>字典 實參:打散 列表,字串,元組=>* 字典=&g

函式

---恢復內容開始--- 一 名稱空間:   全域性名稱空間:在定義函式和變數的時候會生成一個全域性名稱空間,在程式從上到下被執行的過程中被一次載入進記憶體。     例如:我們曾經定義過的函式名或變數名稱。   區域性名稱空間:就是函式內部定義的名稱。在函式呼叫過程中才會被放到記憶體中   內建名

python函數6(day 25

但是 encoding 類型 list函數 對象 item import cal bool 內置 函數: # print(abs(-1)) # print(abs(0)) # # # print(all(‘ ‘)) # print(all((1,‘ ‘,2,None)))

python學習制和字符編碼有關聯

我們 www python學習 怎麽 unicode pytho 國際 python編程 漢字 計算機所能識別只有0,1這兩種狀態,但是我們人類用字母,漢字,還有其他語言,那麽怎麽和計算機進行溝通呢,python編程語言最早unicode,現在統一用utf8,UTF8

python全棧脫產34------開啟程的兩種方式、join方法、程對象其他相關的屬性和方法、僵屍程、孤兒程、守護程、互斥鎖

for roc -- don 操作 windows main 周期 僵屍 一、開啟進程的兩種方式   方式一: from multiprocessing import Processimport timedef task(name): print(‘%s is run

python自動化開發-[]-面向對象高級篇與網絡編程

屬性字典 del log 工作 新增 subclass Coding ror play 今日概要:   一、面向對象進階     1、isinstance(obj,cls)和issubclass(sub,super)     2、__setattr__,__getattr_

Python---面向對象三彈(篇)

python對象 one iss pri each super left connect ext  Python對象中一些方法 一、__str__ class Teacher: def __init__(self,name,age): self.name

python自動化開發-[十三]-前端Css續

css python自動化 tle order deep font ppi 文檔流 family 今日概要:   1、偽類選擇器   2、選擇器優先級   3、vertical-align屬性   4、backgroud屬性   5、邊框border屬性   6、displ

python 基礎之--字典相關

input 循環 put 參數 技術 備註 get 括號 python zx #####################創建字典###################################### In [11]: dict([(‘name‘,‘bob‘

python函數5(day 24)

eat style python 通過 返回 for end 位置 sta 可叠代的:對象下有__iter__方法的都是可叠代的對象 叠代器:對象.__iter__()得到的結果就是叠代器 叠代器的特性: 叠代器.__next__() 取下一個值

python基礎學習

py 學習 6.1內置函數 6.1.1 filter函數 6.1.2 map函數 6.1.3 reduce函數 6.1.1:filter (函數名字, 序列) 過濾器對象 filter()函數是 Python 內置的另一個有用的高階函數,filter()函數接收一個函數 f

12月25 ImagePickerSheetController

local cti ray ria nstat selector main this gesture 1.ImagePickerSheetController open class ImagePickerSheetController: UIViewControlle

軟件測試培訓25

軟件 密碼錯誤 ron 管理 rom 存在 系統 可執行 不存在 場景法設計測試用例 在面向對象的軟件開發中,事件觸發機制是編程中經常遇到的。 (一)場景法原理 現在的軟件幾乎都是用事件觸發來控制流程的。像GUI軟件、遊戲等。事件觸發時的情景形成了場景,而同一事件不同的觸

18月25 github下載單個文件夾

date ner nor github www 需要 防止 智能 prim 1. 用 SVN 即可. 舉例說明: 譬如這個項目: Mooophy/Cpp-Primer · GitHub, 我只想看 ch03 文件夾的代碼怎麽辦? 先打開 ch03, 其

python學習筆記

for map 編程 www com wiki ont 通過 進入 函數的參數 局部變量和全局變量 遞歸函數和匿名函數 高階函數 函數式編程了解 一、函數的各種參數 關鍵參數和位置參數:只要記住關鍵參數必須要放在位置參數後面就行了 #參數問題 def test(x,

Python 學習筆記

lis 不想 list [] 基本 基礎數據類型 第四天 列表 類型 學習的第四天,萬惡之根源----基本數據類型(list,tuple) 一、列表   列表是python的基礎數據類型之一,可以存放各種數據類型    1 lst = [] 難受,不想總結Python

python學習歷程

常用 歷程 val 集合 默認值 返回 ict 返回鍵 鍵值對 主要學習內容:詞典操作 一 增刪改查   1. dict[不存在的key] = value, setdefault() dict.setdefault("a","b")a為查找key的,若有a則返