jQuery基础

时向文

2023-12-01

jQuery

$是jQuery的核心函数

传入的参数为函数时，表示页面加载完成之后，相当于window.onload = function(){}
传入参数为HTML字符串时，会根据字符串创建这个HTML标签对象
传入参数为选择器字符串时：
- $("#id属性值"); id选择器
- $(“标签名”)
- $(".class属性值")
传入参数为DOM对象时，会将DOM对象转换为jQuery对象
- DOM对象
  - 通过getElementByID/Name/TagNAme等方法查询出来的标签对象时DOM对象
  - 通过createElement方法创建出来的对象时DOM对象
- jQuery对象
  - 通过jQuery的API创建的对象
  - 通过jQuery的API查询到的对象
  - 通过jQuery包装的DOM对象也是jQuery对象

jQuery对象

本质

jQuery对象时DOM对象数组 + jQuery提供的一系列功能函数

jQuery和DOM对象的使用区别

jQuery与DOM对象无法互相使用对方的属性和方法

DOM对象与jQuery对象互转

DOM对象转化为jQuery对象
- 先有DOM对象
- ${DOM对象} → jQuery对象
jQuery对象转化为DOM对象
- 先有jQuery对象
- jQuery对象[下表]取出相应的DOM对象

jQuery选择器

基础选择器

#id 选择器 $(" i d ") . c l a s s 选择器$ (.class)
element 选择器 $KaTeX parse error: Undefined control sequence: \* at position 11: (element) \̲*̲ 选择器：选择所有元素$ (*)
selector1, selector2 组合选择器$(“selector1”,“seletor2”)：将selector1, 2的查询结果组合到一起，查询结果与查询顺序无关，与页面标签顺序有关

层级选择器

ancestor descendant 后代选择器：在给定祖先元素下匹配所有后代元素
找表单中的input元素$("form input");
parent > child 子元素选择器
找表单中所有子级input$("form > input");
prev + next 相邻元素选择器
找跟在label后的input$("label + input");
prev ~ siblings 之后的兄弟元素选择器
找所有跟表单同辈的input元素$("form ~ input");

过滤选择器

基本过滤选择器

[标签]:first 取匹配到的第一个元素，li标签中的第一个元素$("li:first");
:last
:not(selector) 去除所有匹配元素
:even 匹配索引值为偶数的元素，从零开始
:odd 奇数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 所有大于索引值的元素
:lt(index) 小于
:header 匹配h1,h2等标题元素
:animated 匹配所有正在执行的动画效果元素

内容过滤选择器

[标签]:contains(text) 匹配包含文本的元素
:empty 匹配所有不包含子元素或文本的空元素
:parent 匹配含有子元素或文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

<div><p>Hello</p></div>
<div>Hello again!<div>

$("div:has(p)").addClass("test");
结果:<div class="test"><p>Hello</p></div>

属性过滤器

[标签][attribute] 匹配包含给定属性的元素
[attribute=‘value’] 匹配给定的属性是某个特定值的元素
[attribute!=‘value’] 匹配不含有指定属性，或属性不等于特定值的元素
[attribute^=‘value’] 匹配给定的属性以某些值开始的元素
[attribute $KaTeX parse error: Undefined control sequence: \* at position 24: …] 结尾 [attribute\̲*̲='value'] 包含 \[…$ (“input[id][name=‘gender’]”);`

表单过滤器

:input 匹配所有input，textarea，select和button元素
:text 匹配所有文本输入框
:password 匹配所有密码输入框
:radio 单选框
:checkbox 复选框
:submit
:image
:reset
:button
:file
:hidden

属性操作

有参数时设置，无参数时获取
html() 跟DOM属性innerHTML一样
text() 跟DOM属性innerTEXT一样
val() 跟DOM属性value一样

设置和获取属性值(一个参数时获取，两个参数时设置)
可以操作非标准属性

attr() 不推荐操作checked、readOnly、selected、disabled等属性
prop() 推荐操作checked、readOnly、selected、disabled等属性

CSS样式操作
addClass()
removeClass()
toggleClass()
offset()

动画操作

基本动画

show()
hide()
toggle()

淡入淡出动画

fadeIn()
fadeOut()
fadeTo()
fadeToggle()

jQuery事件操作

页面加载完成

$(function(){});和window.οnlοad=functoon(){}的区别

触发时间：

jQuery在浏览器解析完页面标签，创建好DOM对象后马上执行
原生的js除了等DOM创建对象，还要等标签显示时需要的内容加载完成

两事件触发顺序：

jQuery页面加载完成之后先执行
原生js的页面加载完成之后
即先完成jQuery再完成元素js

触发次数：

jQuery的页面完成加载后，会把全部注册的function函数，依次顺序全部执行
元素js页面加载完成后，只会执行最后一次的赋值

常用事件处理方法

click() 绑定\触发单击事件，传入参数为function时绑定事件，不传时触发事件
mouseover() 鼠标移入
mouseout() 鼠标移出
bind() 给元素一次性绑定一个或多个事件
one() 和bind一样，但one方法绑定的事件只会响应一次
unbind() 解除事件的绑定
live() 绑定事件，可以用来绑定选择器所匹配的元素的事件，即使这个元素是后面动态创建出来的也有效

事件的冒泡

事件冒泡指，父子元素同时监听同一个事件。当触发子元素事件的时候，同一个事件也传递到父元素的事件里去响应

在事件函数体内，return false;可以阻止事件的冒泡传递

事件对象

事件对象，是封装有触发事件信息的一个JavaScript对象。
我们重点关心的是怎么拿到这个JavaScript对象，以及使用

如何获取事件对象：
在给初始元素绑定事件时，在事件function()参数列表中加入一个参数，这个参数名习惯上取为event，这个event就是JavaScript传递事件处理函数的事件对象

//原生js
window.onload = function(){
	document.getElementById("areaDiv").onclick = function(event){
	console.log(event);
	}
}
//jQuery
$(function(){
	$("aredDiv").click(function(event){
	console.log(event);
	});
});

<body>
	<div id="aredDiv"></div>
</body>