jQuery基本语法
生活随笔
收集整理的這篇文章主要介紹了
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() 所有的兄弟
（1）
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>?
?
轉載于:https://www.cnblogs.com/morgana/p/8492757.html
總結
以上是生活随笔為你收集整理的jQuery基本语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LM算法初识
- 下一篇： imx8mm偶现启动内核失败问题分析报告