jQuery学习

jQuery是一个JavaScript库，极大地简化了JavaScript编程

目前jQuery兼容于所有主流浏览器，包括Internet Explorer 6

通过CDN引用jQuery：

<!-- 通过CDN引用jQuery -->
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

jQuery语法：

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作

基础语法：$(selector).action()

　　美元符号定义jQuery

　　选择符(selector)查询和查找HTML元素

　　jQuery的action()执行对元素的操作

实例：

　　$(this).hide()    //隐藏当前元素

　　$("p").hide()     //隐藏所有<p>元素

　　$("p.test").hide()     //隐藏所有class="test"的<p>元素

所有的jQuery函数都位于一个document ready函数中：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

或者简洁写法：
$(function(){
 
   // 开始写 jQuery 代码...
 
});

这样是为了防止文档在完全加载(就绪)之前运行jQuery代码，即只有在DOM(所有HTML标签)加载完成之后才可以对DOM进行操作

jQuery的入口函数与JavaScript入口函数的区别：

　　jQuery的入口函数是在所有DOM元素都加载以后才回去执行；并且可以执行多次，后一次执行不会覆盖上一次

　　JavaScript的window.onload事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行；只能执行一次，如果第二次再次执行，第二次执行的将会覆盖第一次

 

jQuery选择器

元素选择器：基于元素名选取元素

　　$("p")

id选择器：通过HTML元素deid属性选取指定的元素

　　$("#test")

.class选择器：通过指定的class查找元素

　　$(".test")

特殊：

　　$("p.intro")            //选取class为intro的p元素

　　$("p:first")             //选取第一个p元素

　　$("ul li:first")            //选取第一个ul元素的第一个li元素

　　$("ul li:first-child")                  //选取每个ul元素的第一个li元素

　　$("tr:even")                 //选取偶数位置的tr元素

 

jQuery事件

在jQuery中，大多数DOM事件都有一个等效的jQuery方法

// 定义一个触发事件
$("p").click


//定义一个带有执行代码的触发事件
$("p").click(function() {
    //动作触发后执行的代码
}）

常用jQuery事件方法：

click()

dbclick()             //双击元素时触发

mouseenter()            //鼠标指针穿过元素时触发

mouseleave()         //鼠标指针离开元素时触发

mousedown()           //鼠标指针移动到元素上方并按下鼠标按键时触发

mouseup()          //当在元素上松开鼠标按钮时触发

hover()              //模拟光标悬停，里面是mouseenter和mouseleave两个函数

focus()            //当元素获得焦点时触发

blur()               //当元素失去焦点时触发