jQuery基础

最新推荐文章于 2023-06-11 13:49:24 发布

原创最新推荐文章于 2023-06-11 13:49:24 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #jQuery

前端专栏收录该内容

48 篇文章

订阅专栏

1、jQuery简介

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

2、jQuery能做什么

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

3、jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

4、jQuery库文件

jQuery库分开发版和发布版

名称	大小	说明
jquery-1.版本号.js（开发版）	约268KB	完整无压缩版本，主要用于测试、学习和开发
jquery-1.版本号.min.js（发布版）	约91KB	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

在页面中引入jQuery

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

5、jQuery基本语法

$(document).ready()

$(document).ready()与window.onload类似，但也有区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 }) ;

DOM模型（浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构）

把这些节点对象按照一定顺序绘制到浏览器窗口中
以对象描述文档的方式就是DOM
节点对象就被称为DOM对象

节点类型
元素节点：文档中的所有元素

<h2>……</h2>

文本节点：元素节点内的文本内容

<p>你最喜欢的食品是？ </p>

属性节点：元素节点的子节点

<p title="提示">……</p>

6、DOM对象和jQuery对象

①DOM对象：直接使用JavaScript获取的节点对象

var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;

② jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );
等同于
document.getElementById("title").innerHTML;

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

7、jQuery语法结构

$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

实例：

$("#current").addClass("current");

8、jQuery代码风格

“$”等同于“ jQuery ”

$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})

操作连缀书写

 $("h2").css("background-color","#CCFFFF").next().css("display","block");

9、常用语法

语法	说明
css("属性","属性值")	为元素设置CSS样式的值
hasClass()	检查匹配的元素是否拥有指定的类。
addClass()	为元素添加类样式，提示：如需添加多个类，需使用空格分隔类名。
removeClass()	从被选元素移除一个或多个类。如果没有规定参数，则该方法将从被选元素中删除所有类。如需移除若干类，需使用空格来分隔类名。
attr()	设置或返回匹配元素的属性和值。
removeAttr()	从所有匹配的元素中移除指定的属性。
html()	设置或返回匹配的元素集合中的 HTML 内容。
val()	设置或返回匹配元素的值。
next()	获得元素其后紧邻的同辈元素
prev()	获得元素前面紧邻的同辈元素

10、jQuery对象与DOM对象的互转

①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对象

②DOM对象转jQuery对象

var txtName =document.getElementById("txtName"); //DOM对象

var $txtName =$(txtName);   //jQuery对象

jQuery对象命名一般约定以$开头

在事件中经常使用$(this)，this是触发该事件的对象