jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

半夏沉香丶

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/YY908046027/article/details/91346331

本文全面介绍了jQuery的选择器、操作DOM的方法、事件处理、表单验证及工厂方法等核心知识点，适合初学者快速上手和进阶学习。

1.JQuery01

1.基本选择器
#ID选择器：#D
2.类选择器：Class
3.通配符：*
4.并集：selector |
5.交集：
6.层次选择器：>(父子关系)+（同级关系）
7.过滤选择器：
7.1第一个元素：first ，最后一个元素：last
7.2偶数下标：even 奇数下标：odd
7.3取某一原数的下标：gt：大于，lt：小于
8.表单选择器：
8.1单选框：

$("#myForm  input redio:checked" ).val()

8.2多选框

$("#myForm  input:checkbox:checked").each(function){
	$(this.val());
}

8.3下拉框：

$("#myForm  select  option : selected").val();

2.JQuery02

$.each():遍历数组，对象，对象数组中的数据

$.trim():  去除字符串两边的空格

```
$.type(obj):得到数据的类型
```
```
$.isArray(obj):判断是否是数组
```

 $.isFaction(obj):判断是否是函数

 $.parsejson(obj):解析json字符串的js对象数组、

 attr():获取某个标签的值，或设置某个属性标签的值

```
 removeAttr():删除某个标签属性
```

 addclass()：给某个标签添加class属性值

 removeclass():删除某个标签class属性值

 prop()：和attr类似多用于属性值为Bodean情况

 html():获取某一个标签体的类容（包含子标签）

 text（）：获取某一个标签体的内容 不含子标签

3.JQuery03

1.过滤：
获取ul中所有的元素，然后找到第一个

$("ul>li").fiirst().css("background","yellow").

2.找到最后一个元素：

$("ul>li").last().css(....).

3.找到指定的某一个元素：

eq（）

4.JQuery04

1.$exetend():实现继承  例1.$exetend(s1,s2);

2.求最大值：
max：function(a,b){
	return a>b ？ a:b
}

3.求最小值
min：function(a,b){
	return a>b ？ a:b
}


4.表单验证
$("#myFrom").validutel{
	rules:{....}
	messages:{...}
}
5.required:ture 必须输入的字段
6.retome："chenk.php"：使用ajax方法调7.chenk.php验证输入值
8.email：true  必须正确的邮箱格式
9.url:正确的网格
10.data：正确的日期格式
11.datelso：true正确的格式日期 
12.number : 必须输入合法的数字
13.digits：必须输入正数
14.credit：true：必须输入整数
15.accpet：输入合法的后缀名的字符串

5.this指针的作用

作用：
1.事件源：获取当前按钮的值
2.当前元素：点击按钮获取所有标签的值

$(function () {
		$(":input").click(function() {
			//指的是当前事件源
			alert(this.value);
			$("a").each(function (index,item) {
				//指的是当前元素
				alert(index+","+$(this).html()+","+$(item).html());
			});
		});
	})

6.JQuery工厂方法

1.exp：选择器
context：环境，容器

1.exp选择器的几种
$(function () {
		//利用a标签获取jquery实例
		 $("a").click(function () {
			alert("Hello Word!!!");
		}); 
		
		//利用id=aa获取jquery实例
		 $("#aa").click(function () {
			alert("Hello Word!!!");
		}); 
		
		//类选择器
		 $(".a1").click(function () {
			alert("Hello Word!!!");
		}); 
		
		//包含选择器
		 $("c a").click(function () {
			alert("Hello Word!!!");
		}); 
		
		//组合选择器
		 $("a,span,a1").click(function () {
			alert("Hello Word!!!");
		});

2.contxt的用法

		//讲解第二个参数的作用（在div内部寻找a标签，然后给找到的标签添加事件）
		//如果第二个参数没有填，那么默认是document(页面去找)
		$("a,span,a1").click(function () {
			alert("Hello Word!!!");
		});

jQuery(html)、jQuery(element)
1.html：基于html的一个字符串
2.element：js对象，表示一个html元素对象
3.js对象与jquery对象的相互转换
案例：

$(function() {
		$(":input[name='name1']").click(function() {
			//在iD=selID1的select的jquery追加<option value='1'>湖南省</option>的html jquery实例
			$("#selID1").append("<option value='1'>湖南省</option>");
		});
		
		$(":input[name='name2']").click(function() {
			//将"<option value='1'>长沙市</option>"的html jquery实例追加到ID=selID2的jquery实例中
			$("<option value='1'>长沙市</option>").appendTo("#selId2");
		
			/* var $a1 = $("#a1");
			alert($a1.val());
			//jquery对象转js对象
			//var a1Node = $a1.get(0);
			var a1Node = $a1[0];
			alert(a1Node.value); */
			
			
			var a2Node = document.getElementById("a2");
			alert(a2Node.value);
			//js对象转jquery对象
			var $a2Node = $(a2Node);
			
			
			alert($a2Node.val());
		});
	})