JQuery概述和选择器

·  阅读 37

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")
复制代码
分类:
前端
标签:
分类:
前端
标签: