初识jQuery
jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。
一、jQuery的用途
01、访问和操作DOM元素 提供了一整套方便、快捷的方法来实现对指定元素的增删改查,既减少了代码量,又提高用户体验
02、控制页面样式 方便的控制页面的CSS文件
03、对页面事件的处理 css()、addClass()、removeClass()、toggleClass()
04、方便的使用jQuery插件 jQuery UI插件库、Form插件、Validate插件
05、与Ajax技术的完美结合
二、jQuery的优势
01、轻量级:体积小
02、强大的选择器:几乎支持所有css选择器,jQuery还有自定义的特有选择器
03、出色的DOM封装:封装了大量的DOM操作
04、可靠的事件处理机制:吸收了JavaScript事件处理函数的精华,使得jQuery在处理事件绑定是非常可靠
05、出色的浏览器兼容性:jQuery能够同时兼容多种浏览器,使显示效果在个浏览器之间没有差异
06、隐式迭代:能同时操作所匹配的对象集合,无需遍历
07、丰富的插件支持:jQuery的易扩展性,吸引全球开发者编写jQuery的扩展插件,
三、配置jQuery环境
01、获取jQuery的最新版本(进入官网 http://jquery.com)下载
02、开发版:用于测试、学习和开发
发布版:(min)用于发布的产品和项目(也叫压缩版)
03、引用:只要用<script>标签引入即可,注意多个<script>标签的顺序
四、jQuery语法结构
$(selector).action(); 包含三大部分:工厂函数、选择器、方法
$()---工厂函数
selector---选择器
action()---方法
·五、jQuery程序的代码风格
01、“$”的使用
它是jQuery的标志,即$等同于jQuery,也就是说$(document).ready()==jQuery(document).ready()
$(function(){...})==jQuery(function(){...})
02、链式操作
采用链式编程模式,来减少不必要的重复代码。举例而言,下方的next()的使用(诸如prev()、siblings()、parent().....)
$("h1").css("color","red").next().css("display","block");
03、隐式迭代
$("p").css("backgruond-color","blue') 会将所有的p标签的北京设置为蓝色
04、添加注释
开发阶段:增加代码的可读性,便于后期维护
维护阶段:把关键的模块形成开发文档,便于后期维护,即便删除代码注释,还可以通过文档得到关键信息
产品正式发布:删除注释,减少文件大小,加快下载速度,提高用户体验
六、DOM对象和jQuery对象
01、两者的方法不能混用
jQuery对象就是通过jQuery包装DOM对象后产生的对象,它能够使用jQuer中的方法。
jQuery对象无法直接使用DOM对象的任何方法,同样DOM对象也无法直接使用jQuery对象的任何方法
02、相互转换
jQuery对象转换成DOM对象
[index]方法: var $txtName=$("#txtName"); //jQuery对象
var txtName=$txtName.[0]; //DOM对象
get(index)方法: var $txtName=$("#txtName")
var txtName=$txtName.get(0);
DOM对象转换成jQuery对象
工厂函数$():var txtName=document.getElementById("txtName"); //DOM对象
var $txtName=$(#txtName) //jQuery对象