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);