文章目录
概述
jQuery是javascript类库,简称JS库。它预定义了一套对象和函数,简化了javascript的开发,帮开发者建立高难度交互的web2.0特性的富客户端页面。
jQuery的四个模块
1.jQuery - 应用于PC端Web
2.jQuery UI - 应用于Web页面效果
3.jQuery Mobile - 应用于移动端Web
4.Qunit - 应用于javascript代码的测试
jQuery特点
1.jQuery支持链式操作
示例:$(“#username”).val()
2.jQuery对象是类数组对象,获取元素2种方式
- jQuery[index]
- get(index)
使用jQuery的步骤
1.在HTML页面中引入jQuery文件
2.通过jQuery提供的选择器获取元素
3.使用jQuery提供的API内容完成功能
DOM对象与jQuery对象的转换
1.DOM对象转换为jQuery对象
语法: $(DOM对象)
示例:
var username = document.getElementById("username");// DOM对象
var $username = $(username);// 转换为jQuery对象
console.log($username.val());//使用jQuery方法
2.jQuery对象转换为DOM对象
语法: 获取第0个下标
示例:
var $uName = $("#uName");//jQuery对象
var uName1= $uName[0];//转换为DOM对象
console.log(uName1.value);//使用DOM方法
如何解决jQuery与其他JS库共存问题($符号)
1、先引入多个JS库,先调用的优先级高(如果发生符号冲突)
解决办法:4个
-
不再使用"$“,而使用"jQuery”
-
调用jQuery.noConflict()方法,将"$“符号的使用权交出(供其他JS库使用)
当调用该方法之后,如果再使用jQuery的话,只能使用"jQuery” -
先调用jQuery.noConflict()方法,交出使用权,在jQuery()中使用$
jQuery(
function($){// 函数域
// function中定义形参"$"
$("ul>li");
}
);
- 调用jQuery.noConflict()方法,使用自调函数,传递jQuerys,将参数设为$
(function($){// 函数域
$("ul>li");
})(jQuery);
常用API
选择器(9大类)
jQuery的选择器是沿用并且扩展CSS选择器
1、基本选择器
- #id :根据给定的ID匹配一个元素。
例:$("#myDiv");
- element :根据给定的元素名匹配所有元素。
例:$("div");
- .class :根据给定的类匹配元素。
例:$(".myClass");
*
:匹配所有元素。
例$("*")
- selector1,selector2,selectorN :将每一个选择器匹配到的元素合并后一起返回。
例:$("div,span,p.myClass")
2、层级选择器
- ancestor des