jQuery

jQuery

jQuery，顾名思义就是JavaScript和 Query（查询），辅助JavaScript开发的js类库。
核心思想是：write less，do more（写的更少，做的更多），实现了很多浏览器兼容问题。
免费、开源，语法非常便捷。

jQuery初体验

<!-- 引入 jQuery 类库 -->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    // 原来绑定单击事件的步骤：
    // window.onload = function() {
    // 	// 1. 获取标签对象
    // 	var btnObj = document.getElementById("btnId");
    // 	// 2. 标签对象.事件名 = function() {}
    // 	btnObj.onclick = function() {
    // 		alert("js的原生单击事件");
    // 	}
    // }
    // 使用jQuery绑定单击事件的步骤：
    // 相当于 window.onload = function() {}
    $(function () {
        // 1. 通过 $ 查询得到标签对象（被jQuery封装）
        var $btnId = $("#btnId");
        // 2. 绑定单击事件
        $btnId.click(function () {
            alert("jQuery绑定的单击事件");
        });
    });
</script>

jQuery核心函数

(是jQuery的核心函数，能完成jQuery的很多功能。)()就是调用$这个核心函数。

1. 传入参数为[函数]时：在文档加载完成后执行这个函数
2. 传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
3. 传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
4. 传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回

//核心函数的4个作用
//传入参数为[函数]时：在文档加载完成后执行这个函数
$(function () {
    alert("文档加载完成之后");
    //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
    var $span = $("<span>我是span标签</span>");
    //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
    var $div01 = $("#div01");       // id选择器
    var $span01 = $(".span01");     // 类选择器
    //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
    var element = document.getElementById("div02"); // dom对象
    alert(element);     // [object HTMLDivElement]
    var $element = $(element);      // 将dom对象封装成jQuery对象
    alert($element);        // [object Object]
    $element.append($span);
});

jQuery对象本质

就是dom对象的数组+jQuery提供的一系列功能函数。
jQuery对象不能使用dom对象的属性和方法。
dom对象也不能使用jQuery的属性和方法。

jQuery和dom对象想换转换

jQuery -->> dom

1. 先有jQuery对象
2. 直接通过下标 jQuery对象[下标] 获取对应的dom对象

dom -->> jQuery

1. 先有dom对象
2. 直接$(dom对象)即可得到对应的jQuery对象

基本选择器

• #id：根据给定的ID匹配一个元素
  用于搜索的，通过元素的 id 属性中给定的值
• element：根据给定的元素名匹配所有元素
  一个用于搜索的元素。指向 DOM 节点的标签名
• .class：根据给定的类匹配元素
  一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到
• *：匹配所有元素
  找到每一个元素
• selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回
  你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

$(function() {
    //1.选择 id 为 one 的元素 "background-color","#bbffaa"
    // css() 方法：访问匹配元素的样式属性。
    $("#btn1").click(function () {
        $("#one").css("background-color", "#bbffaa");
    });
    //2.选择 class 为 mini 的所有元素
    $("#btn2").click(function () {
        $(".mini").css("background-color", "#bbffaa");
    });
    //3.选择 元素名是 div 的所有元素 
    $("#btn3").click(function () {
        $("div").css("background-color", "#bbffaa");
    });
    //4.选择所有的元素 
    $("#btn4").click(function () {
        $("*").css("background-color", "#bbffaa");
    });
    //5.选择所有的 span 元素和id为two的元素
    $("#btn5").click(function () {
        $("span, #two").css("background-color", "#bbffaa");
    });
});

层级选择器

• ancestor descendant：在给定的祖先元素下匹配所有的后代元素
• parent > child：在给定的父元素下匹配所有的子元素
• prev + next：匹配所有紧接在 prev 元素后的 next 元素
• prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素

$(document).ready(function(){
    //1.选择 body 内的所有 div 元素 
    $("#btn1").click(function(){
        $("body div").css("background", "#bbffaa");
    });
    
    //2.在 body 内, 选择div子元素  
    $("#btn2").click(function(){
        $("body > div").css("background", "#bbffaa");
    });
    
    //3.选择 id 为 one 的下一个 div 元素 
    $("#btn3").click(function(){
        $("#one + div").css("background", "#bbffaa");
    });
    
    //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
    $("#btn4").click(function(){
        $("#two ~ div").css("background", "#bbffaa");
    });
});

过滤选择器

基本过滤选择器

• :first：获取匹配的第一个元素
• :last：获取匹配的最后个元素
• :not(selector)：去除所有与给定选择器匹配的元素
• :even：匹配所有索引值为偶数的元素，从 0 开始计数
• :odd：匹配所有索引值为奇数的元素，从 0 开始计数
• :eq(index)：匹配一个给定索引值的元素
• :gt(index)：匹配所有大于给定索引值的元素
• :lt(index)：匹配所有小于给定索引值的元素
• :header：匹配如 h1, h2, h3之类的标题元素
• :animated：匹配所有正在执行动画效果的元素

$(document).ready(function(){
    //1.选择第一个 div 元素  
    $("#btn1").click(function(){
        $("div:first").css("background", "#bbffaa");
    });
    
    //2.选择最后一个 div 元素
    $("#btn2").click(function(){
        $("div:last").css("background", "#bbffaa");
    });
    
    //3.选择class不为 one 的所有 div 元素
    $("#btn3").click(function(){
        $("div:not(.one)").css("background", "#bbffaa");
    });
    
    //4.选择索引值为偶数的 div 元素
    $("#btn4").click(function(){
        $("div:even").css("background", "#bbffaa");
    });
    
    //5.选择索引值为奇数的 div 元素
    $("#btn5").click(function(){
        $("div:odd").css("background", "#bbffaa");
    });
    
    //6.选择索引值为大于 3 的 div 元素
    $("#btn6").click(function(){
        $("div:gt(3)").css("background", "#bbffaa");
    });
    
    //7.选择索引值为等于 3 的 div 元素
    $("#btn7").click(function(){
        $("div:eq(3)").css("background", "#bbffaa");
    });
    
    //8.选择索引值为小于 3 的 div 元素
    $("#btn8").click(function(){
        $("div:lt(3)").css("background", "#bbffaa");
    });
    
    //9.选择所有的标题元素
    $("#btn9").click(function(){
        $(":header").css("background", "#bbffaa");
    });
    
    //10.选择当前正在执行动画的所有元素
    $("#btn10").click(function(){
        $(":animated").css("background", "#bbffaa");
    });
    
    //11.选择没有执行动画的最后一个 div
    $("#btn11").click(function(){
        $("div:not(:animated):last").css("background", "#bbffaa");
    });
});

内容过滤选择器

• :contains(text)：匹配包含给定文本的元素
• :empty：匹配所有不包含子元素或者文本的空元素
• :has(selector)：匹配含有选择器所匹配的元素的元素
• :parent：匹配含有子元素或者文本的元素

$(document).ready(function(){
    //1.选择 含有文本 'di' 的 div 元素
    $("#btn1").click(function(){
        $("div:contains('di')").css("background", "#bbffaa");
    });
    
    //2.选择不包含子元素(或者文本元素) 的 div 空元素
    $("#btn2").click(function(){
        $("div:empty").css("background", "#bbffaa");
    });
    
    //3.选择含有 class 为 mini 元素的 div 元素
    $("#btn3").click(function(){
        $("div:has(.mini)").css("background", "#bbffaa");
    });
    
    //4.选择含有子元素(或者文本元素)的div元素
    $("#btn4").click(function(){
        $("div:parent").css("background", "#bbffaa");
    });
});

可见性过滤选择器

• :hidden：匹配所有不可见元素，或者type为hidden的元素
• :visible：匹配所有的可见元素

$(document).ready(function(){
    //1.选取所有可见的  div 元素
    $("#btn1").click(function(){
        $("div:visible").css("background", "#bbffaa");
    });
    //2.选择所有不可见的 div 元素
    //不可见：display属性设置为none，或visible设置为hidden
    $("#btn2").click(function(){
        $("div:hidden").show("slow").css("background", "#bbffaa");
    });
    //3.选择所有不可见的 input 元素
    $("#btn3").click(function(){
        alert($(":input:hidden").attr("value"));
    });	
});

属性过滤选择器

• [attribute]：匹配包含给定属性的元素
• [attribute=value]：匹配给定的属性是某个特定值的元素
• [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素
  此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
• [attribute^=value]：匹配给定的属性是以某些值开始的元素
• [attribute$=value]：匹配给定的属性是以某些值结尾的元素
• [attribute*=value]：匹配给定的属性是以包含某些值的元素
• [attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用

$(function() {
    //1.选取含有 属性title 的div元素
    $("#btn1").click(function() {
        $("div[title]").css("background", "#bbffaa");
    });
    //2.选取 属性title值等于'test'的div元素
    $("#btn2").click(function() {
        $("div[title='test']").css("background", "#bbffaa");
    });
    //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
    $("#btn3").click(function() {
        $("div[title!='test']").css("background", "#bbffaa");
    });
    //4.选取 属性title值 以'te'开始 的div元素
    $("#btn4").click(function() {
        $("div[title^='te']").css("background", "#bbffaa");
    });
    //5.选取 属性title值 以'est'结束 的div元素
    $("#btn5").click(function() {
        $("div[title$='est']").css("background", "#bbffaa");
    });
    //6.选取 属性title值 含有'es'的div元素
    $("#btn6").click(function() {
        $("div[title*='es']").css("background", "#bbffaa");
    });
    
    //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
    $("#btn7").click(function() {
        $("div[id][title*='es']").css("background", "#bbffaa");
    });
    //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
    $("#btn8").click(function() {
        $("div[title][title!='test']").css("background", "#bbffaa");
        // $("div[title]:not([title='test'])").css("background", "#bbffaa");
    });
});

表单过滤选择器

• :input：匹配所有 input, textarea, select 和 button 元素
• :text：匹配所有的单行文本框
• :password：匹配所有密码框
• :radio：匹配所有单选按钮
• :checkbox：匹配所有复选框
• :submit：匹配所有提交按钮
• :image：匹配所有图像域
• :reset：匹配所有重置按钮
• :button：匹配所有按钮
• :file：匹配所有文件域
• :hidden：匹配所有不可见元素，或者type为hidden的元素

表单对象属性

• :enabled：匹配所有可用元素
• :disabled：匹配所有不可用元素
• :checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
• :selected：匹配所有选中的option元素

//1.对表单内可用 text 赋值操作
$("#btn1").click(function(){
    // val() 方法用于获取或设置表单项的 value 值
    var $texts = $(":text:enabled");
    // 如果此jQuery对象是由多个dom对象组成
    // 进行获取操作只能获取到第一个dom对象的value值
    // 赋值时对全部的dom对象的value赋值
    $texts.val("锋哥好帅啊");
});
//2.对表单内不可用input赋值操作
$("#btn2").click(function(){
    $(":text:disabled").val("我是万能的程序员");
});
//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function(){
    alert($(":checkbox").length);
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
    var $checkboxes = $(":checkbox:checked");
    var str = "";
    // each() 方法用于遍历jQuery对象的所有dom对象
    // 传入一个函数用于遍历每个dom对象时的操作
    // 在每个函数内有一个this对象表示当前遍历到的dom对象
    $checkboxes.each(function () {
        str += "（";
        // this 是dom对象
        str += this.value;
        str += "）";
    });
    alert(str);
});
//5.获取下拉框选中的内容  
$("#btn5").click(function(){
    var str = "";
    var $options = $(":selected");
    $options.each(function() {
        str += "（";
        str += this.innerHTML;
        str += "）";
    });
    alert(str);
});

筛选

过滤

• eq(index|-index)：获取第N个元素
  一个整数，指示元素基于0的位置,这个元素的位置是从0算起
  一个整数，指示元素的位置，从集合中的最后一个元素开始倒数(1算起)
• first()：获取第一个元素
• last()：获取最后个元素
• hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true
• filter(expr|obj|ele|fn)：筛选出与指定表达式匹配的元素集合
• is(expr|obj|ele|fn)：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
• map(callback)：将一组元素转换成其他数组（不论是否是元素数组）
• has(expr|ele)：保留包含特定后代的元素，去掉那些不含有指定后代的元素
• not(expr|ele|fn)：删除与指定表达式匹配的元素
• slice(start,[end])：选取一个匹配的子集
  start：开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起
  end：结束选取自己的位置，如果不指定，则就是本身的结尾

查找

• children([expr])：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
• find(expr|obj|ele)：搜索所有（后代）与指定表达式匹配的元素
• next([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
• nextall([expr])：查找当前元素之后所有的同辈元素
• nextUntil([exp|ele][,fil])：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
• parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合
• parents([expr])：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
• parentsUntil([exp|ele][,fil])：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
• prev([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
• prevall([expr])：查找当前元素之前所有的同辈元素
• prevUntil([exp|ele][,fil])：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
• siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

串联

• add(expr|ele|html|obj[,con])：把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集
• andSelf()：加入先前所选的加入当前元素中
• contents()：查找匹配元素内部所有的子节点（包括文本节点）
• end()：回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态
  如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作

// eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function () {
    $("div").eq(3).css("background-color", "#bfa");
});
// first() 选择第一个 div 元素
$("#btn2").click(function () {
    $("div").first().css("background-color", "#bfa");
});
// last() 选择最后一个 div 元素
$("#btn3").click(function () {
    $("div").last().css("background-color", "#bfa");
});
// filter() 在div中选择索引为偶数的
$("#btn4").click(function () {
    $("div").filter(":even").css("background-color", "#bfa");
});
// is() 判断#one是否为:empty或:parent
$("#btn5").click(function () {
    alert($("#one").is(":empty"));
});
// has() 选择div中包含.mini的
$("#btn6").click(function () {
    $("div").has(".mini").css("background-color", "#bfa");
});
// not() 选择div中class不为one的
$("#btn7").click(function () {
    $("div").not(".one").css("background-color", "#bfa");
});
// children() 在body中选择所有class为one的div子元素
$("#btn8").click(function () {
    $("body").children("div.one").css("background-color", "#bfa");
});
// find() 在body中选择所有class为mini的div后代元素
$("#btn9").click(function () {
    $("body").find("div.mini").css("background-color", "#bfa");
});
// next() #one的下一个div
$("#btn10").click(function () {
    $("#one").next().css("background-color", "#bfa");
});
// nextAll() #one后面所有的span元素
$("#btn11").click(function () {
    $("#one").nextAll("span").css("background-color", "#bfa");
});
// nextUntil() #one和span之间的元素
$("#btn12").click(function () {
    $("#one").nextUntil("span").css("background-color", "#bfa");
});
// parent() .mini的父元素
$("#btn13").click(function () {
    $(".mini").parent().css("background-color", "#bfa");
});
// prev() #two的上一个div
$("#btn14").click(function () {
    $("#two").prev("div").css("background-color", "#bfa");
});
// prevAll() span前面所有的div
$("#btn15").click(function () {
    $("span").prevAll("div").css("background-color", "#bfa");
});
// prevUntil() span向前直到#one的元素
$("#btn16").click(function () {
    $("span").prevUntil("#one").css("background-color", "#bfa");
});
// siblings() #two的所有兄弟元素
$("#btn17").click(function () {
    $("#two").siblings().css("background-color", "#bfa");
});
// add() 选择所有的 span 元素和id为two的元素
$("#btn18").click(function () {
    $("span").add("#two").css("background-color", "#bfa");
});

属性操作

HTML代码/文本/值

• html()：设置和获取起始标签和结束标签的内容
  同dom的innerHTML属性一样
• text()：设置和获取起始标签和结束标签的文本
  同dom的innerText属性一样
• val()：设置和获取表单项的value属性值
  同dom的value属性

<script src="jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#btn1").click(function(){
		// html() 传递参数为设置、空参为获取
		$("#div01").html("<a href='http://cnblogs.com/geekfx' target='_blank'>极客锋行<a/>");
		alert($("#div01").html());

		// text() 传递参数为设置、空参为获取
		// 仅仅是文本内容 传入标签也是文本
		$("#btn1").text("按钮中间的文字发生了改变");

		// val() 用来获取设置表单项的value值
		alert($(":text[name='a']").val());
		$(":text[name='a']").val("锋哥好帅");

		// 也可以通过val()方法批量修改表单项的选中状态
		// $(":checkbox").val(["篮球", "御马"]);
		// $("#select").val(["gd"]);
		// $("#girls").val(["xk", "xy", "xw", "xh"]);

		// 也可以通过val()方法一次性批量修改单选、多选、下拉列表的状态
		$(":checkbox, #select, #girls").val(["xk", "篮球", "御马","xy", "xw", "xh", "sh"]);
	});
})
</script>
<body>
	<div id="div01"></div>
	<button id="btn1">获取文本框的name值</button>
	<form action="#" id="form1">
		文本框:<input  name="a" value="abc" type="text"/><br/>
		多选框:<input type="checkbox" name="interest" value="篮球">
		<input type="checkbox" name="interest" value="zuqiu">
		<input type="checkbox" name="interest" value="乒乓">
		<input type="checkbox" name="interest" value="御马"> <br>
		下拉列表：
		<select name="select" id="select">
			<option value="sd">山东</option>
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option value="gd">广东</option>
		</select> <br>
		下拉列表：
		<select multiple="multiple" name="boys" id="girls">
			<option value="xk">小空</option>
			<option value="xy">小野</option>
			<option value="xw">小武</option>
			<option value="xh">小惠</option>
		</select>
	</form>
</body>

属性

• attr(name|pro|key,val|fn)：设置或返回被选元素的属性值
• removeAttr(name)：从每一个匹配的元素中删除一个属性
• prop(name|pro|key,val|fn)：获取在匹配的元素集中的第一个元素的属性值
  随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
• removeProp(name)：用来删除由.prop()方法设置的属性集
  随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function () {
        // 一个参数表示获取此属性值
        alert( $("body :checkbox:first").attr("name") );
        // 两个参数表示设置指定属性的值
        $("body :checkbox:first").attr("name", "qwer");
        // 使用 attr() 方法获取checked选中状态
        alert($("body :checkbox:first").attr("checked"));   // 返回undefined

        // prop() 用来解决 attr() 属性获得 checked 属性为undefined的问题
        alert($("body :checkbox:first").prop("checked"));   // 返回false
        $("body :checkbox:last").prop("checked", true);     // 设置选中状态

        // attr() 方法还可以用来设置或获取自定义的属性
        $("body :checkbox:first").attr("abc", "abcValue");
        alert($("body :checkbox:first").attr("abc"));       // abc
    });
</script>
<body>
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="football">足球
</body>

CSS类

• addClass(class|fn)：为每个匹配的元素添加指定的类名
  一个或多个要添加到元素中的CSS类名，请用空格分开
• removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类
  一个或多个要删除的CSS类名，请用空格分开
• toggleClass(class|fn[,sw])：如果存在（不存在）就删除（添加）一个类

文档处理

内部插入

• append(content|fn)：向每个匹配的元素内部追加内容
• appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中
• prepend(content|fn)：向每个匹配的元素内部前置内容
• prependTo(content)：把所有匹配的元素前置到另一个、指定的元素元素集合中

外部插入

• after(content|fn)：在每个匹配的元素之后插入内容
• before(content|fn)：在每个匹配的元素之前插入内容
• insertAfter(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面
• insertBefore(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的前面

包裹

• wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来
• unwrap()：这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素
• wrapall(html|ele)：将所有匹配的元素用单个元素包裹起来
• wrapInner(html|ele|fn)：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

替换

• replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素
• replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素

删除

• empty()：删除匹配的元素集合中所有的子节点
• remove([expr])：从DOM中删除所有匹配的元素
  这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除
• detach([expr])：从DOM中删除所有匹配的元素
  这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

复制

• clone([Even[,deepEven]])：克隆匹配的DOM元素并且选中这些克隆的副本

CSS

CSS

• css(name|pro|[,val|fn])：访问匹配元素的样式属性

位置

• offset([coordinates])：获取匹配元素在当前视口的相对偏移
• position()：获取匹配元素相对父元素的偏移
• scrollTop([val])：获取匹配元素相对滚动条顶部的偏移
• scrollLeft([val])：取匹配元素相对滚动条左侧的偏移

尺寸

• heigh([val|fn])：取得匹配元素当前计算的高度值（px）
• width([val|fn])：取得第一个匹配元素当前计算的宽度值（px）
• innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）
• innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
• outerHeight([soptions])：获取第一个匹配元素外部高度（默认包括补白和边框）
• outerWidth([options])：获取第一个匹配元素外部宽度（默认包括补白和边框）

var $divEle = $('div:first');

$('#btn01').click(function(){
    //addClass() - 向被选元素添加一个或多个类
    $divEle.addClass("redDiv blueBorder");
});

$('#btn02').click(function(){
    //removeClass() - 从被选元素删除一个或多个类 
    $divEle.removeClass("redDiv");
});

$('#btn03').click(function(){
    //toggleClass() - 对被选元素进行添加/删除类的切换操作 
    $divEle.toggleClass("redDiv blueBorder");
});

$('#btn04').click(function(){
    //offset() - 返回第一个匹配元素相对于文档的位置。
    console.log($divEle.offset());
    $divEle.offset({
        top: 100,
        left: 200
    });
});

效果

事件

$(function() {
  
})

和

window.onload = function() {
  
}

的区别？

• 何时触发
  1. jQuery的页面加载完成之后是在浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行
  2. 原生js的页面加载完成之后除了要等浏览器内核解析完页面创建好DOM对象，还要等标签显示时需要的内容加载完成
• 触发顺序
  1. jQuery页面加载完成之后先执行
  2. 原生页面加载完成之后后执行
• 执行次数
  1. jquery页面加载完成之后把全部注册的函数，依次顺序全部执行
  2. 原生js的页面加载完成之后，只会执行最后一次赋值的函数

事件绑定

//*1.通常绑定事件的方式
//给元素绑定事件  
//jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
//绑定事件可以链式操作
$(".head").click(function(){
    $(".content").toggle();
}).mouseover(function(){
    $(".content").toggle();
}).mouseout(function () {
    $(".content").toggle();
});

//*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
//bind(事件字符串,回调函数),后来添加的元素不会绑定事件
//使用bind()绑定多个事件   type可以接受多个事件类型，使用空格分割多个事件
 $(".head").bind("click mouseover",function(){
    $(".content").toggle();
});


//3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
$(".head").one("click mouseover",function(){
    $(".content").toggle();
});

//4.live方法会为现在及以后添加的元素都绑定上相应的事件
$(".head").live("click",function(){
    $(".content").toggle();
});

$("#panel").before("<h5 class='head'>什么是jQuery?</h5>");

事件移除

//给li绑定两种事件：单击和鼠标移入
$("li").bind("mouseover click", function () {
    alert("给li绑定两种事件：单击和鼠标移入");
});
//点击第一个button，将#bj上的单击事件移除
$("button:first").click(function () {
    $("#bj").unbind("click");
});
//点击第二个button，将#rl上的所有事件移除
$("button:eq(1)").click(function () {
    $("#rl").unbind();
});

事件冒泡

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到父元素的事件里去响应。

如何阻止事件的冒泡

在事件函数体内，return false可以阻止事件的冒泡传递。

//冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
//解决冒泡问题：return false;

//给span绑定一个单击响应函数
$("span").click(function(){
    alert("我是span的单击响应函数");
    return false;
});

//给id为content的div绑定一个单击响应函数
$("#content").click(function(){
    alert("我是div的单击响应函数");
    return false;
});

//给body绑定一个单击响应函数
$("body").click(function(){
    alert("我是body的单击响应函数");
});

//取消默认行为
 $("a").click(function(){
    return false;
});

事件对象

事件对象是封装有触发的事件信息的一个JavaScript对象。

如何获取事件对象

给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名习惯于取名为 event。
这个event就是JavaScript传递事件处理函数的事件对象。

//1.原生javascript获取 事件对象
window.onload = function () {
    document.getElementById("areaDiv").onclick = function (event) {
        console.log(event);
    }
};
//2.JQuery代码获取 事件对象
$(function () {
    $("#showMsg").click(function (event) {
        console.log(event);
    });
    //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
    $("#showMsg").bind("mouseover mouseout", function (event) {
        if(event.type == "mouseover") {
            console.log("使用bind方法绑定的鼠标移入事件");
        } else if(event.type == "mouseout") {
            console.log("使用bind方法绑定的鼠标移出事件");
        }
    });
});