JQuery概述和选择器

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")