JQuery简介:
jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
JQuery能做什么?
- 访问和操作DOM元素;
- 控制页面样式;
- 对页面事件进行处理;
- 扩展新的jQuery插件;
- 与Ajax技术完美结合;
注:jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率使用。JQuery开发效率高,开发方便。
JQuery的优势:
- 体积小,网页加载速度更快、
- 强大的选择器、
- 出色的DOM封装、
- 可靠的事件处理机制、
- 出色的浏览器兼容性、
- 使用隐式迭代简化编程(隐式迭代:看不到的循环)、
- 丰富的插件支持(在有JQuery的前提下,下载JQuery插件来使用)。
JQuery基本语法:
<script>
$(document).ready(function() {
alert("你好!");
});
</script>
DOM对象和JQuery对象的互相转化
(1) 使用(DOM对象)
- jQuery对象命名一般约定以$开头;
- 在事件中经常使用$(this),this是触发该事件的对象。
var txtName =document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName); //jQuery对象
(2) jQuery对象转DOM对象
- jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName"); //jQuery对象
var txtName =$txtName[0]; //DOM对象
通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName"); //jQuery对象
var txtName =$txtName.get(0); //DOM对象
JQuery选择器
- jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
- jQuery 中所有选择器都以美元符号开头:$()。
1)元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p>
元素:
$("p")
2)#id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的,所以要在页面中选取唯一的元素需要通过 #id 选择器。 语法:
$("#test")
3).class 选择器 jQuery 类选择器可以通过指定的 class 查找元素。
语法:
$(".test")