【JavaWeb-jQuery】笔记（1）--- jQuery概述；dom对象和jquery对象；jQuery选择器；jQuery过滤器

1、介绍：

• jQuery 是一个快速，小巧，功能丰富的 JavaScript 库， 它通过易于使用的 API 在大量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

2、dom 对象和 jquery 对象：

• dom 对象，使用 javascript 的语法创建的对象叫做 dom 对象， 也就是 js 对象。

//obj是dom对象，也叫做js对象
var obj = document.getElementById("txt1");  

• jquery 对象，使用 jquery 语法表示对象叫做 jquery 对象， 注意 ---> 所有 jquery 表示的对象都是数组。

//jobj就是使用jquery语法表示的对象。 也就是jquery对象，它是一个数组，现在数组中就一个值
var jobj = $("#txt1");

• dom 对象可以和 jquery 对象相互转换。

           dom 对象可以转为 jquery ，语法： $(dom对象);

           jquery 对象也可以转为 dom 对象，语法： 从数组中获取第一个对象，第一个对象就是 dom 对象， 使用[0]或者get{0)。

• 为什么要进行 dom 和 jquery 的转换，目的是要使用 jquery / dom 的方法。

3、选择器：

• 选择器就是一个字符串， 用来定位 dom 对象的，定位了 dom 对象，就可以通过 jquery 的函数操作 dom

常用的选择器：

1）id 选择器，通过 dom 对象的 id 定位 dom 对象的，通过 id 找对象

$("#dom对象的id值");

2）class 选择器，class 表示 css 中的样式，使用样式的名称定位 dom 对象

$(".class样式名);

3）标签选择器，使用标签名称定位 dom 对象的 

$("标签名称");

代码练习：

4、表单选择器：

• 使用 标签的 type 属性值，定位 dom 对象的方式

$(":type属性值");
$(":text");//选择的是所有的单行文本框
$(":button");//选择的是所有的按钮

代码练习：

	
		
		
	
		
		
	
	
		

		男

		女

		
		迪迦奥特曼
		
		欧布奥特曼

		盖亚奥特曼

		
		
		
		
		
		
	

5、过滤器：

• 过滤器就是过滤条件，对已经定位到数组中的 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。 

$("选择器:first"): //第一个dom对象
$("选择器:last"): //数组中的最后一个dom对象
$("选择器:eq(数组的下标)");//获取指定下标的dom对象
$("选择器:lt(下标)");//获取小于下标的所有dom对象
$("选择器:gt(下标)");//获取大于下标的所有dom对象

代码练习：

6、表单属性过滤器：

• 根据表单中 dom 对象的状态情况，定位dom对象
• 选择可用的文本框：

$(“:text:enabled”);

• 选择不可用的文本框： 

$(“:text:disabled”);

• 复选框选中的元素：

$(“:checkbox:checked”);

• 选择指定下拉列表的被选中元素：

选择器>option:selected;

代码练习：

	
		
		
	
		
		
	
	
		

		

		

		

		
		老八蜜汁小汉堡

		老坛酸菜牛肉面

		双汇淀粉肠

		
		
			java语言
			go语言
			python语言