048_jQuery
一，jQuerycss
1，jQuery 介紹html
<1>，jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。前端
<2>，jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「python
前端的一個網站：http://www.bootcdn.cn/jquery
2，jQuery 的優勢編程
1，一款輕量級的JS框架。後端
jQuery核心js文件才幾十kb，不會影響頁面加載速度。瀏覽器
2，豐富的DOM選擇器。框架
jQuery的選擇器用起來很方便，好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而3，jQuery一行代碼就搞定了，再好比要將一個表格的隔行變色，jQuery也是一行代碼搞定。less
4，鏈式表達式。
jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。
5，事件、樣式、動畫支持。
jQuery還簡化了js操做css的代碼，而且代碼的可讀性也比js要強。
6，Ajax操做支持。
jQuery簡化了AJAX操做，後端只需返回一個JSON格式的字符串就能完成與前端的通訊。
7，跨瀏覽器兼容。
jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。
8，插件擴展開發。
jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。
3，使用注意
3.1，由於是第三方模塊，因此使用前必定要先導入在使用。導入要放在前面。
3.2，jQuery對象
1>，jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。
2>，雖然 jQuery 對象是包裝 DOM 後產生的，可是 jQuery 對象沒法使用 DOM 的任何方法，同理 DOM 也沒不能使用 jQuery 裏的方法。
3>，約定，在聲明一個jQuery對象變量的時候在變量名前面加上$：
var $variable = jQuery對像 var variable = DOM對象 $variable[0]//jQuery對象轉成DOM對象
4>，jQuery對象和DOM的使用：
$("#i1").html();//jQuery對象能夠使用jQuery的方法
$("#i1")[0].innerHTML;// DOM對象使用DOM的方法
5>，實例
二，jQuery基礎語法
$(selector).action()
1，查找標籤
1.1，基本選擇器
id 選擇器
$("#id")
標籤選擇器
$("tagName")
class 選擇器
$(".className")
配合使用
$("div.c1") // 找到有c1 class類的div標籤
全部元素選擇
$("*")
組合選擇器
$("#id, .className, tagName")
1.2，層級選擇器
x 、y 能夠爲任意選擇器
$("x y") // x 的全部後代 y（子子孫孫）
$("x > y") // x 的全部兒子 y（兒子）
$("x + y") // 找到全部緊挨在 x 後面的 y
$("x ~ y") // x 以後全部的兄弟 y
1.3，屬性選擇器
[attribute] [attribute=value] // 屬性等於 [attribute!=value] // 屬性不等於
例子：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']") // 取到checkbox類型的input標籤
$("input[type!='text']") // 取到類型不是text的input標籤
三，篩選器方法
1，基本篩選器
:first // 第一個 :last // 最後一個 :eq(index) // 索引等於index的那個元素 :even // 匹配全部索引值爲偶數的元素，從 0 開始計數 :odd // 匹配全部索引值爲奇數的元素，從 0 開始計數 :gt(index) // 匹配全部大於給定索引值的元素 :lt(index) // 匹配全部小於給定索引值的元素 :not(元素選擇器) // 移除全部知足not條件的標籤 :has(元素選擇器) // 選取全部包含一個或多個標籤在其內的標籤 //(指的是從後代元素找)
例子：
$("div:has(h1)") //找到全部後代中有h1標籤的div標籤
$("div:has(.c1)") //找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)") //找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))") //找到全部後代中不含a標籤的li標籤
實例：
練習：
自定義模態框，使用jQuery實現彈出和隱藏功能
jQuery版自定義模態框
2，表單篩選器
:text :password :file :radio :checkbox :submit :reset :button
例子：
$(":checkbox") // 找到全部的checkbox
實例：
1.2，表單對象屬性：
:enabled :disabled :checked :selected
例子：
找到可用的 input 標籤
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input標籤
找到被選中的 option
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">廣州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到全部被選中的option
3，下一個元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
4，上一個元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
5，父親元素
$("#id").parent()
$("#id").parents()
// 查找當前元素的全部的父輩元素
// 是鏈式的操做，結果是個列表，找的是當前標籤的父標籤，父標籤的父標籤直到html結束。
$("#id").parents("body") //鏈式找父標籤，直到body結束
$("#id").parentsUntil("body")
// 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止
6，兒子 和 兄弟 元素
$("#id").children()// 兒子們
$("#id").siblings()// 兄弟們
7，查找
搜索全部與指定表達式匹配的元素。這個函數是找出，正在處理的元素的後代元素的好方法。
$("div").find("p")
// 等價於
$("div p")
8，篩選
篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的
// 等價於
$("div.c1")
9，補充
.first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最後一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 .has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。 .eq() // 索引值等於指定值的元素
10，示例：左側菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>左側菜單示例</title> <style> .left { position: fixed; left: 0; top: 0; width: 20%; height: 100%; background-color: rgb(47, 53, 61); } .right { width: 80%; height: 100%; } .menu { color: white; } .title { text-align: center; padding: 10px 15px; border-bottom: 1px solid #23282e; } .items { background-color: #181c20; } .item { padding: 5px 10px; border-bottom: 1px solid #23282e; } .hide { display: none; } </style> </head> <body> <div class="left"> <div class="menu"> <div class="title">菜單一</div> <div class="items"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> <div class="title">菜單二</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> <div class="title">菜單三</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> </div> <div class="right"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(".title").click(function (){ // jQuery綁定事件 // 隱藏全部class裏有.items的標籤 $(".items").addClass("hide"); //批量操做 $(this).next().removeClass("hide"); }); </script>
-
每一个你不满意的现在，都有一个你没有努力的曾经。