JQuery基础-CSDN博客

本文链接：https://blog.csdn.net/qq_28870891/article/details/105132908

JQuery基础要点：
一、导入Jquery文件到工程中语法格式：

 <script type="text/javascript" src="文件路径名"></script>

二、DOM对象与JQuery对象的区别：
	
	DOM对象：
		1、在浏览器加载网页时，由浏览器负责创建。
		2、一个HTML标签对应一个DOM对象
		3、可以通过管理DOM对象，来对关联HTML标签中属性进行操作。
	
	JQuery对象：
		1、JQuery对象是由$()函数负责创建的
		2、JQuery对象是一个数组
		3、JQuery对象中存放的本次定位的DOM对象
		4、可以通过JQuery对象中的功能函数来快速定位DOM对象进行操作管理
	
	DOM对象与JQuery相互转换：
		DOM对象转JQuery对象：
			var $obj = $(domobj);
		JQuery对象转DOM对象：
			for(var i=0;i<$obj.length;i++){
				var obj = $obj[i];	
			}
		JQuery对象与DOM对象的属性和功能函数彼此之间不能调用

三、选择器：
	JQuery中有三种选择器；
	
	1、标签选择器：$("标签名")	
		示例：var $arr = $("div");	
		根据标签名定位对应的元素，并返还一个满足该条件的所有元素的数组
	2、样式选择器：$(".样式名称")
		实例：var $arr = $(".classname");
		根据样式名称定位对应的元素，并返还一个满足该条件的所有元素的数组
	3、id选择器：$("id编号")
		实例：var $arr = $("#id");
		根据id编号定位对应的元素，并返还一个包含满足id的元素的数组
	
		(1)、$("*"):选择网页中所有的元素
		(2)、$("条件1,条件2"):选择条件为两个，满足其中一个即可

四、层级选择器：
	1、$("定位父标签条件>定位子标签条件")
		定位当前父标签下，所有满足条件的直接子标签
	
	2、$("定位父标签条件 定位子标签条件")
		定位当前父标签下，所有满足条件的字标签和间接子标签
	
	3、$("定位当前标签条件~定位兄弟标签条件")
		定位当前标签后面，所有满足条件的兄弟标签
	
	4、$("定位当前标签条件+定位兄弟标签条件")
		定位当前标签后面与之紧邻的，并且满足定位兄弟条件的标签，不满足兄弟标签则定位不到
	
	5、$("定位当前标签条件").siblings("定位兄弟标签条件")
		定位当前标签前后所有满足条件的兄弟标签

五、INPUT标签选择器：
	
	<input type="text">
	<input type="password">
	<input type="radio">
	<input type="checkbox">
	<input type="file">
	<input type="button">
	<input type="reset">
	<input type="submit">
	<input type="text">

	INPUT标签作用：作为浏览器向网站发送请求携带请求参数
	
	INPUT标签选择器语法：$(":input标签type属性名称")
			
			示例：$(":button") 定位页面中所有的button关联的DOM
			      $(":table") 无法定位到任何元素

六、过滤器
	概述：1、对已经定位到的Jquery对象中的DOM对象，进行二次过滤筛选
	      2、过滤器不能独立使用，必须声明在选择器后面
	      3、六种过滤器（三种最常见）
	 
	语法格式：
		[过滤条件] ：根据已经定位的DOM对象在Jquery对象中存储位置进行二次过滤筛选
		
		示例：
			1、$("选择器:first"):留下满足选择器条件的所有对象的第一个DOM对象
					     $(":button:first")：选择器选择所有button对象，再筛选定位所有button对象中第一个button对象
			
			2、$("选择器:last")：留下满足选择器条件的所有对象的最后一个DOM对象
					     $(":button:last")：选择器选择所有button对象，再筛选定位所有button对象中最后一个button对象
			
			3、$("选择器:eq(index)")：留下满足选择器条件的所有对象中指定下标值的DOM对象
					     $("div:eq(1)")：选择器选择所有div对象，再筛选定位下标为1的div对象
			
			4、$("选择器:lt(index)")：留下满足选择器条件的所有对象中指定下标值之前的所有DOM对象
					     $("div:lt(3)")：选择器选择所有div对象，再筛选定位下标为3之前的所有div对象
			
			5、$("选择器:gt(index)")：留下满足选择器条件的所有对象中指定下标值之后的所有DOM对象
					     $("div:gt(2)")：选择器选择所有div对象，再筛选定位下标为2之后的所有div对象
	
	基本属性过滤器：
		第一种语法格式：$("选择器条件[属性名]") ：选择器先进行选择，然后在通过属性名进行筛选，筛选条件是在标签内指定的属性
						    已经手动赋值。
						    示例：$("div[name]") :选择器进行选择，再过滤的到所有的div中满足name属性
						    经过手动赋值的div。

		第二种语法格式：$("选择器条件[属性名='属性值']") ： 选择器先进行筛选，然后再通过指定属性名和对应的属性值进行最后的
								    筛选。
								    示例：$("div[id='one']")
								    选择器先筛选出所有div标签，然后过滤器再筛选id=one的div

		第三种语法格式：$("选择器条件[属性名^='开头字符']")：选择满足属性值以开头符号为开头的标签
								     示例：$("div[id^='t']") ：获得所有div中id属性值以t开头的div标签
		
		第四种语法格式：$("选择器条件[属性名$='结尾字符']")：选择满足属性值以特定结尾符号结尾的标签
								     示例：$("div[id$='t']") ：获得所有div中id属性值以t结尾的div标签

		第五种语法格式：$("选择器条件[属性名*='特定字符']")：选择满足属性值包含特定字符的标签
								     示例：$("div[id*='t']") ：获得所有div中id属性值包含特指符号t的div标签
		
		第六种语法格式：$("选择器条件[属性名='值'][属性名^='特定字符'][属性名*='特定字符']") ：选择满足所有过滤条件的标签

	工作状态属性过滤器：
		
		HTML标签属性分类：
			1、基本属性：绝大部分标签都拥有的属性：id、name、title、rowspan
			2、样式属性：背景、字体、边框
			3、value属性：只存在表单验证区域中，input、select、textarea
			4、工作状态属性：只存在表单域标签，checked、disabled、selected
			5、监听事件属性：onclick、onchange.....
		示例：
			1、$("选择器:enabled")：获取满足条件并且处于可用状态的DOM
						示例:$(":button:enabled")：定位所有处于可用状态的button
			
			2、$("选择器:disabled")：获取选择器选择后满足不可用状态的DOM
						 例子：$(":button:disabled")定位所有处于不可用状态的button

			3、$("选择器:checked")：获取选择器选择后满足处于选中的状态的DOM
						示例：$(":checkbox:checked:first"):获得选择器选择后满足第一个
						已选择的状态的checkbox
			
			4、$("选择器:selected")：获得选择器选择后满足处于选中的DOM
						 示例：$(":select>option:selected")：下拉列表中选择的option

七、jquery中事件绑定方式
	1、$obj.jquery监听事件绑定函数(处理函数)
		示例：
			$(":button").click(fun1);
			为页面中所有的button元素绑定onclick以及对应的处理函数fun1()
		
		jquery监听事件与html的区别：
			html监听事件			jqyery监听事件
				onclick				$obj.click(fun)
				onchange			$obj.change(fun)
				onmouseover				$obj.mouceover(fun)
				
	2、$obj.bind("jquery监听事件函数名",处理函数名) 以这种方式绑定监听事件可以解除
	   $obj.unbind("jquery监听事件函数名") 将指定监听事件从dom对象上移除
	   $obj.unbind() 将所有监听事件从dom对象上移除


十、jquery对象的功能函数：
	css("属性名","属性值") ：负责Jquery对象中所有DOM对象的样式属性进行赋值，自动遍历对象赋值
	
	val()函数：读取jquery对象中第一个DOM对象的value值
	val("value")函数：对jquery对象中所有DOM对象的value进行统一赋值
	
	prop()函数：工作状态函数。checked,disabled,selected
		1、$obj.prop("checked",true) 为jquery对象中所有dom对象的checked属性赋值为true
		2、$obj.prop("checked")  读取jquery对象中第一个dom对象的checked属性值
	
	attr()函数：基本属性 id、name、title、rowspan
		1、$obj.attr("name","ck") 为jquery对象中所有dom对象的name属性统一赋值为ck
		2、$obj.attr("title") 读取jquery对象中第一个dom对象的title属性的值

	text()函数：操作属性innerText，双目标签文本显示内容
		1、$obj.text("123") 为jquery对象中所有dom对象的innerText属性赋值为“123”
		2、$obj.text(); 读取jquery对象中所有dom对象的innerText属性的值，并全部拼接并以字符串返回

	each(处理函数函数名):	遍历Jquery对象中的DOM函数，每次读取一个下标和一个对应下标的DOM对象给处理函数，
				所以处理函数必须下两个对应的参数
			function fun3(){
				var $obj = $(":radio");
				$obj.each(fun);

				/*
				for(var i=0;i<$obj.length;i++){
					var obj = $obj[i];
					if(obj.checked){
						alert(obj.value);
					}
				}
				*/
				}

			function fun(index,domobj){
				if(domobj.checked){
					alert(domobj.value);
				}
			}
	
	hide():让jquery对象包含的所有dom对象隐藏  类似style="display:none";
	show():让jquery对象包含的所有dom对象显示  类似style="display:block";
	以上还可以给定时间值，在指定时间内慢慢完成隐藏或显示

	remove():将当前标签与其子标签全部进行删除
	empty():将当前标签的子标签进行删除

	appen():$("标签1").appen($("标签2")) 将标签2装入标签1中
	appenTo():$("标签1").appenTo($("标签2")) 将标签1装入标签2中