1. 程式人生 > >01-jQuery基本語法

01-jQuery基本語法

lin sibling first type ngs dom對象 奇數 .class 添加

一、jQuery基礎

1.為什麽要用jquery?
寫起來簡單,省事,開發效率高,兼容性好
2、什麽是jQuery?
jQuery是一個兼容多瀏覽器的JavaScript庫(類似python裏面的模塊)
3、如何使用jQuery?
1、導入 <script src="jquery-3.2.1.js"></script>
或者<script src="jquery-3.2.1.min.js"></script>
2、語法規則:$("")
4、JS和jQuery的區別?
jQuery就是用JS寫的
js是基礎,jQuery是工具

5、jQuery介紹
- 版本
- 1.x
兼容IE8。。。
- 3.x
最新
- .min.xx
壓縮的:生產環境用
- 沒有壓縮的(沒有.min.xx):開發用
6、 jQuery知識點
  html:裸體的人
  css:穿了衣服的人
   JS:讓人動起來
7、選擇器:
1、基本選擇器
- ID選擇器 $("#id的值")
- 類選擇器(class) $(".class的值")
- 標簽選擇器(html標簽) $("標簽的名字")

- 所有標簽 $("*")

- 組合選擇器 $("xx,xxx")
2、層級選擇器
- 從一個標簽的子子孫孫去找 $("父親 子子孫孫")
- 從一個標簽的兒子裏面找 $("父親>兒子標簽")
- 找緊挨著的標簽 $("標簽+下面緊挨著的那個標簽")
- 找後面所有同級的 $("標簽~兄弟")

8、jQuery對象:
- 用jQuery選擇器查出來的就是jQuery對象

- jQuery對象,他就可以使用jQuery方法,不能使用DOM的方法

- DOM對象和jQuery對象轉換:
- $(".c1")[0] --> DOM對象
- $(DOM對象)
9、篩選器
- 寫在引號裏面的
基本篩選器
  $(" :first") 找第一個
  $(" :not(‘‘)") 不是/非
  $("#i1>input":not(‘.c1,.c2‘))
  $(" :even") 偶數
  $(" :odd") 奇數
  $(" :eq(index)") 找等於index的
  $(" :gt(index)") 找大於index的
  $(" :lt(index)") 找小於index的
  $(" :last") 最後一個
  $(" :focus") 焦點
       內容==========
  $(" .c1:contains(‘我是第一個‘)") 包含文檔的內容的標簽
  $(" :empty") 標簽內容為空的
  $(" :has(‘‘)") 包含標簽的標簽
  $(" :parent") 找有孩子的父親
  $("#i7").parent() 找i7的父親

可見性========
  $(" :hidden") 找到隱藏的
  $(" :visible") 找不隱藏的,也就是顯示的
  屬性==========
  input[name] --> 找有name屬性的input
  input[type=‘password‘] --> 類型是password的input標簽
表單==========
   :input
  :password
  :checkbox
   :radio
  :submit
   :button
  :image
  :file

表單對象屬性=========
:enable 可選的
:disable 不可選
:checked 選中的
:selected 下拉框選中
- 寫在信號外面當方法用的
過濾===========
$("").first() 找第一個
$("").parent() 找父親
$("").eq(index) 找等於index的
.hasClass() 判斷有沒有某個類的
查找
.children() 找孩子
.find() 查找
.next() 下面的
.nextAll() 下面所有的
.nextUntil() 找下面的直到找到某個標簽為止

.parent() 找父親
.parents() 找所有的父親
.parentsUntil() 直到找到你要找的那個父親為止

.prev() 上面的
.prevAll() 上面的所有
.prevUntil() 上面的直到找到某個標簽為止

.siblings() 所有的兄弟

- toggleClass() 切換|開關:有就移除,沒有就添加

- addClass("hide") 添加類

- removeClass("hide") 刪除類  

技術分享圖片

二.練習題

技術分享圖片

01-jQuery基本語法