前端之JQuery：JQuery基本語法
阿新 • • 發佈：2018-12-20
使用 splay 衣服 doc 介紹 第一個 ima gif input標簽
jQuery基本語法
一、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") 刪除類
以下需要註意的幾個圖片
（1）
（2）
（3）
（4）
二、練習題
答案
三、開關示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>開關</title>
<style>
.c1{
width: 200px;
height: 200px;
border :1px solid grey;
border-radius: 50%;
display: inline-block;
}
.c2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1"></div>
<button class="btn">點擊我</button>
<script src="jquery3_0_0.js"></script>
<script>
// 找到button添加事件
$(".btn").on(‘click‘,function () {
//當點擊的時候讓變色
$(".c1").toggleClass(‘c2‘)
});
</script>
</body>
</html>
前端之JQuery：JQuery基本語法