jQuery基础

一、引入

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
官方网址：http://jquery.com/

二、dom对象和jQuery包装集对象

	dom：根据id获取值为“div1”的对象
	var dom1=document.getElementById("div1"); 
	console.log(dom1);//
	jQuery：根据id获取值为“div1”的对象
	var jQuery1=$("#div1");
	console.log(jQuery1);

dom对象转jQuery包装集对象

var 包装集对象名 = $("dom对象名");

jQuery包装集对象转dom对象

方法一：var dom对象名 = 包装集对象名[0];
方法二：

$('dom对象名').each(function() {
		//遍历  
		var 包装集对象名 = $(this);  }
) 

三、选择器

基础选择器

选择器	名称	举例	说明
id 选择器	#id	$("#id名")	只会获取一个id对象，若有同名id，则会获取第一个。
元素名称选择器	标签名	$(“标签名”)	选择所有指定标签的包装集对象
类选择器	.class名	$(".class属性名")	选择class属性是指定值的元素
选择所有选择器	*	$("*")	选择页面中所有的元素
组合选择器	选择器1,选择器2…，选择器n	$(“选择器1,选择器2…，选择器n”);	选择所有指定选择器选中的元素

层次选择器

选择器	名称	举例	说明
后代选择器	父选择器 子选择器	$(“父选择器 子选择器”)	以空格分隔，选择父选择器中的所有子选择器
子代选择器	父选择器>子选择器	$(“父选择器>子选择器”)	以大于号">"分隔，选择父选择器中的下一级子选择器
相邻弟弟选择器	兄选择器 + 弟选择器	$(“兄选择器 + 弟选择器”)	以加号"+"分隔，选择兄选择器中后面紧靠着自己的下一个弟选择器，如果后面不是弟选择器选中的元素，那么length=0
同辈弟弟选择器	兄选择器 ~ 第选择器	$(“兄选择器 ~ 第选择器”)	以波浪号"~"分隔，选择兄选择器中后面所有的弟选择器选中的元素

表单选择器

选择器	名称	举例	说明
表单选择器	:input	$(":input")	查找所有的 表单元素，注意：$(“input”)查找所有input元素
文本框选择器	:text	$(":text")	查找所有文本框
密码框选择器	:password	$(":password")	查找所有密码框
单选按钮选择器	:radio	$(":radio")	查找所有单选按钮
复选框选择器	:checkbox	$(":checkbox")	查找所有复选框
提交按钮选择器	:submit	$(":submit")	查找所有提交按钮
图像域选择器	:image	$(":image")	查找所有图像域
重置按钮选择器	:reset	$(":reset")	查找所有重置按钮
按钮选择器	:button	$(":button")	查找所有按钮
文件域选择器	:file	$(":file")	查找所有文件域

属性选择器

选择器	举例	说明
[属性名]	$("[属性名]")	该属性的所有元素
[属性名=值]	$("[属性名=值]")	所有属性的值等于 “值” 的元素
[属性名!=值]	$("[属性名!=值]")	所有属性的值不等于 “值” 的元素
[属性名$=值]	$("[属性名$=‘值’]")	所有属性的值包含以 “值” 结尾的元素

过滤选择器

选择器	注意
:checked	获取所有被选中状态的元素（单选框、复选框）
:selected	获取下拉框的选中项
:eq(index)	匹配指定下标的元素
:gt(index)	匹配大于指定下标的元素
:odd	匹配奇数下标
:even	匹配偶数下标

四、jQuery DOM 操作

操作元素的属性

方法	说明
attr(属性名称)	获取指定的属性值
attr(属性名称，属性值)	设置指定的属性值
prop(属性名称)	获取指定的属性值
prop(属性名称，属性值)	设置指定的属性值
removeAttr(属性名)	移除指定的属性
removeProp(属性名)	移除指定的属性

注意：
1.attr()和prop()都可以设置、获取固有元素的值。
2.attr()可以设置、获取自定义元素的值，prop()不可以。
3.当属性的返回值类型为bool型时(checked、selected、disabled)：
 返回值为true，attr()获取的属性值为 属性名 ，prop()获取的属性值为true
 返回值为false，attr()获取的属性值为default ，prop()获取的属性值为false

操作元素的样式

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,”样式名”)	修改class属性的值，修改样式，且将class属性值进行直接的替换，原来的样式会被覆盖
addClass(“样式名”)	添加样式名称，给元素追加样式，原来的样式依然保留；
css()	添加行内样式，优先级最高
css({‘样式名’:’样式值’,’样式名2’:’样式值2’，……})	同时添加多个样式
removeClass(class)	移除样式名称

操作元素的内容

方法	说明
html()	获取元素的html内容
html(“html内容”)	设定元素的html内容
text()	获取元素的文本内容，不包含html
text(“text内容”)	设置元素的文本内容，不包含html
val()	获取元素value值
val(‘值’)	设定元素的value值

注意：
1.html()和text()操作非表单内容，val()操作表单内容
2.html()会识别内容中的标签，而text()不会

操作元素

（1）创建元素：

$('元素/元素内容')
例：$('<p>p标签</p>')

（2）追加元素：

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector)	把 content 元素或内容加入 selector 元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector)	把 content元素或内容插入selector 元素内，默认是在尾部
before()	在元素前插入指定的元素或内容:$(selector).before(content)
after()	在元素后插入指定的元素或内容:$(selector).after(content)

注意：
1.若追加已存在的元素，相当于将该元素剪切，再粘贴到指定位置

（3）删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()	清空所选元素的内容

（4）遍历元素

each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。

五、Jquery 事件

ready()事件

使用：

$(document).ready(function(){})
或者
$(function(){})
ready()可以写多个，按顺序执行

与onload()区别:

ready()预加载事件：当文档中的dom结构加载完毕后执行
onload()事件：当文档中的dom结构和资源加载完毕后执行

bind()绑定事件

使用：

$(selector).bind( 需要绑定的事件 [, 传递的参数，键值对形式], 事件触发执行的函数)
或
$(selector).事件(事件触发执行的函数)

绑定多个事件：

方法1：
$(selector).bind( '事件1 事件2 ……', function(){});
方法2：
$(selector).bind( '事件1', function(){}).bind( '事件2', function(){})……;
方法3：
$(selector).bind( {'事件1':function(){},'事件2':function(){}……} );
方法4：
$(selector).事件1(function(){}).事件2(function(){})……;