JQuery基础知识

Posted 2020-11-10 guanzhicheng

JQuery

一、JQuery介绍
1、JQuery是一个轻量级的、兼容浏览器多的javascript库

2、JQuery使用户能够更方便地处理html Document、Events、实现动画效果、
方便地进行Ajax交互，能够极大地简化JavaScript编程，它的宗旨就是：
write less, do more.

二、JQuery对象
JQuery对象就是通过JQuery包装DOM对象后产生的对象，JQuery对象是JQuery独有的
如果一个对象是JQuery对象，那么它就可以使用JQuery里的方法:例如$("#il").html()
$("#il").html()的意思是:获取id值为i1的元素的html代码，其中html()是JQuery里的方法

相当于:document.getElementById("i1").innerHTML;
虽然JQuery对象是包装DOM对象后产生的，但是JQuery对象无法使用DOM对象的任何方法，
同理DOM对象也不能使用JQuery里的方法

一个约定，我们在声明一个JQuery对象变量的时候在变量名前面加上$:
var $variable = JQuery对象
var variable = DOM对象
$variable[0] //JQuery对象转成DOM对象

$("i1").html(); //JQuery对象可以使用JQuery的方法
$("i1")[0].innerHTML; //DOM对象使用DOM的方法

三、JQuery基础语法
$(selector).action()

1、查找标签
选择器：
id选择器：
$("id")
标签选择器：
$("tagName")
class选择器：
$(".className") 配合使用 $("div.c1") //找到有c1.class类的div标签
所有元素选择器:
$("*")
组合选择器:
$("#id,.className,tagName")
层级选择器：
x和y可以为任意选择器
$("x y"); //x的所有后代y(子子孙孙)
$("x > y"); //x的所有儿子y(儿子)
$("x + y"); //找到所有紧挨在x后面的y
$("x ~ y"); //x之后所有的兄弟y

基本筛选器：
: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标签

表单常用筛选:
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

例子:
$(":checkbox") //找到所有的checkbox

表单对象属性:
:enabled
:disabled
:checked
:selected

例子：
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

$("input:enabled") //找到可用的input标签

<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option value="guagnzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>