jQuery

语法

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

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作
  实例:

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

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

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

$("#test").hide() - 隐藏所有 id="test" 的元素

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

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

$(function(){
    // 执行代码
})

或者

$(document).ready(function(){
//do something
})

或者

$().ready(function(){
//do something
})

• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

window.onload = function () {
    // 执行代码
}

jQuery 选择器

元素选择器

在页面中选取所有p元素:

$("p")

id 选择器

通过 id 选取元素语法如下：

$("#test")

class 选择器

通过指定的 class 查找元素。语法如下：

$(".test")

更多实例

jQuery 事件

点击事件：

$("p").click();

入口事件

$(document).ready()

双击事件：

$("p").dblclick(function(){
  $(this).hide();
});

鼠标指针穿过事件：

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

鼠标指针离开事件：

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

鼠标指针移动到元素上方，并按下鼠标按键时

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

当在元素上松开鼠标按钮时，会发生 mouseup 事件

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

hover()模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()元素获得焦点事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

隐藏和显示

语法

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

例

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

jQuery toggle()

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();
});

获取内容和属性

• text() - 设置或返回所选元素的文本内容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

• html() - 设置或返回所选元素的内容（包括 HTML 标记）

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

• val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

• 获取属性 - attr()

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

添加元素

append() - 在被选元素的结尾插入内容

$("p").append("追加文本");

prepend() - 在被选元素的开头插入内容

$("p").prepend("在开头追加文本");

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）

$("#div1").remove();

empty() - 从被选元素中删除子元素

$("#div1").empty();

jQuery 操作 CSS

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

设置 CSS 属性

css("propertyname","value");

设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

基本写法

页面加载完成有两种事件

• 一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
• 二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

用jQ的人很多人都是这么开始写脚本的：

$(function(){
// do something
});

其实这个就是jq ready()的简写，他等价于：

$(document).ready(function(){
//do something
})

或者下面这个方法，jQuer的默认参数是：“document”；

$().ready(function(){
//do something
})

事件绑定的写法

这里按钮的id为button

• 绑定方法1

  $(function(){
        //在jq这样的双重绑定事件不会重叠
        $("#button").click(function(){
            alert(1)
        })
        $("#button").click(function(){
            alert(2)
        })
    })

• 绑定方法2

//绑定事件 方法2 bind 可以给一个对象写多个触发条件，执行一个函数
    $("#button").bind("click mouseenter",function(){
        alert(1)
    })
    //解除绑定
    $("#button").unbind("click");

提示：这里把bind换成bind也可以

• 所以如果你要添加事件的元素是后面动态加载进来的，建议直接用on方法绑定事件，或者待元素加载进来后再次调用一下bind函数绑定事件；
• 如果你能确保js执行之前你要绑定事件的元素已经加载了，建议用bind方法，个人认为bind方法效率应该比on方法效率高（没亲测过）；

事件冒泡

当div1包含div2包含div3时，给三个div分别绑定点击事件，点击div3时，三个div的点击事件都会执行

阻止事件冒泡

$('#div3').bind('click', function (event) {  //event:事件对象
    event.stopPropagation(); //停止事件冒泡
});