jQuery基础应用

什么是 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);
上一篇:eclipse导入maven时,pom文件的project一直报错(Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.)


下一篇:微信小程序 - 自适应swiper高度(非组件)