什么是 jQuery ?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示: 除此之外,Jquery还提供了大量的插件。
jQuery 语法
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
1,使用jQuery必须先导入jQuery,x.x.x.js文件
2,jQuery中的选择器:
$("选择器").函数();
①$是jQuery的缩写,即可以使用jQuery("选择器").函数();
②选择器,可以是任何CSS支持的选择符
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
实例
用户点击按钮后,所有 <p> 元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
$("#test")
实例
当用户点击按钮后,有 id="test" 属性的元素将被隐藏:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$(".test")
实例
用户点击按钮后所有带有 class="test" 属性的元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
3,文档就绪函数,防止在文档未完全加载之前,运行jQuery代码,
$(document).ready(function(){
jQuery代码
});
简写形式:
$(function(){
});
【文档就绪函数和window.onload区别】
①window.onload必须等到网页中所有内容执行完后,才会加载代码。(包括图片,视频等资源)
文档就绪函数,只需要在网页DOM结构加载完毕之后,就可以执行代码。
②window.onload只能写一个,写多个只会执行最后一个。
文档就虚函数可以写多个,并且不会被覆盖。
4,原生JS对象与jQuery对象
①使用$("")选中的时jQuery对象,只能调用jQuery的函数,而不能使用元素JS的事件与函数
$("#p").click;√
$("#p").onclick = function(){} ×
解释:$("#p")是jQuery对象。 .onclick是原生JS事件
同理:使用document.getElement获取的是原生JS对象,也不能使用jQuery相关函数。
②原生JS对象转为jQuery对象
可以使用$()包裹原生JS对象,即可转为jQuery对象。
var p = document.getElementByTagName("p");
$(p).click(); √原生JS对象p已被转为jQuery对象。
③jQuery对象转为原生JS对象,使用.get(index)或[index]
$("#p").get(0).onclick = function(){}
$("#p").[0].onclick = function(){}
5,jQuery解决多库冲突
由于其他的库也会使用$作为自身标识,导致其他JS库与jQuery冲突;
要解决冲突,可以放弃使用$,直接使用jQuery对象。
【使用自执行函数传入jQuery对象简化写法】
jQuery.noConflict();//调用这个函数,将$控制权让渡给其他类库,即jQuery不能再使用$
!function(j){
函数之中就可以用字母j。代替jQuery对象
}(jQuery);