【笔记】jQuery基础课程（慕课）（上）

一、jQuery基础选择器

    jQuery能使用CSS选择器来操作网页上的标签元素。

    

    1. #id选择器 $("my_id")

        1）其中my_id根据id选择器获取页面中的指定标签，且返回唯一一个元素。

        2）例：$("#divtest").html("设置div的内容");

    

    2. element选择器 $("element")

        如$("div").css("font-weight", "bold");或$("button").attr("disable", "true");。

    

    3. .class选择器 $(".class")

    

    4. *选择器 $("*")

        1）$("*"); 获取页面中的所有元素；

        2）$("div *"); 获取div中的所有子元素。

    

    5. sele1,sele2,seleN选择器 $("div, p")

        一次选择多个元素。

    

    6. ance desc选择器 $("div span")

        获取div元素中的span子元素。

    

    7. parent>child选择器 $("parent>child")

        1）只选择父元素中的第一代子元素，而不包括孙元素。

        2）$("div>")或$("div>*")返回parent的所有第一代子元素。

    

    8. prev+next选择器 $("p+span")

        1）获取<p>元素下面紧邻的<span>元素（p与span是兄弟节点的关系，如果p下面紧邻的元素不是span元素，则无效果）。

        2）$("p+")或$("p+*")则直接返回p下面那一个元素，不管它是什么。

        

    9. prev~siblings选择器 $("p~span")

        1）也是返回prev元素之后的相邻元素，但与“+”不同，不是只获取第一个相邻元素，而是获取prev元素后面全部的相邻元素。

        2）同样$("p~")或$("p~*")为获取p之后的所有相邻元素。

        

    以上选择器全部在CSS中亲测可用，只是CSS中不能够将如parent>之后的内容省略，必须写完整为parent>*。

        

二、jQuery过滤性选择器

    

    1. :first过滤选择器 $("li:first")，获取第一个出现的li标签。

        :last过滤选择器 $("li:last")，获取最后一个出现的li标签。

        

    2. :eq(index)过滤选择器 $("li:eq(3)")，获取第4个出现的li标签（记数从0开始）。

    

    3. :contains(text)过滤选择器 $("li:contains('土豪')")，获取包含“土豪”字符内容的所有li元素。

    

    4. :has(selector)过滤选择器 $("li:has('p')")，获取元素中包含有<p>元素的所有li元素。

    

    5. :hidden过滤选择器 $("p:hidden"); 获得不可见的p元素，包括type属性值为hidden的元素。

    

    6. :visible过滤选择器 与:hidden相反，获得所有可见的元素。

    

    7. [attribute=value]属性选择器 $("li[title='我最爱']")，获取所有title是“我最爱”的li元素。li不一定要有，单引号也可以省略。

    

    8. [attribute!=value]属性选择器 获得不包含属性名，或属性名与对应值不同的全部元素。

    

    9. [attribute*=value]属性选择器 获得属性值中【包含】指定内容的所有元素。

    

    10. :first-child子元素过滤选择器 $("li:first-child")获取在每个父元素中第一个出现的li标签。$("ol li:first-child") 获取每个父元素中第一个出现的li标签，且该<li>标签的父元素或祖元素是ol。

    

    11. :last-child子元素过度选择器 获取每个父元素中返回的最后一个子元素。

    

三、jQuery表单选择器

    

    1. :input表单选择器 $("#formId :input");

        返回全部的表单元素，不仅包括input标记的表单元素，还包括textarea、select、button等。

        

    2. :text表单文本选择器 $("#formId :text");

        获取表单中全部的单行文本输入框元素，不包括textarea、button等。

        

    3. :password表单密码选择器 $("#formId :password");

        获取表单中所有的密码输入框元素。

        

    4. :radio单选按钮选择器 $("#formId :radio");

        a. 获取表单中所有的单选按钮元素。

        b. 顺便复习单选按钮的标准写法：<label for="radio1">男</label> <input type="radio" id="radio1" name="sex"> name相同才能配成一对。

        

    5. :checkbox复选框选择器 $("#formId :checkbox");

        快速定位并获取表单中的复选框元素。

        

    6. :submit提交按钮选择器 $("#formId :submit");

        通常情况下，一个表单只允许有一个type属性为submit的提交按钮。

        

    7. :image图像域选择器 $("#formId :image");

        当input元素的type属性设置为image时，该元素就是一个图像域。只能获取<input>图像域，而不能获取<img>格式的图像元素。

        

    8. :button表单按钮选择器 $("#formId :button");

        能获取<button>和type属性为button的<input>元素。

        

    9. :checked选中状态选择器 $("formId :checked");

        可以获取处于选中状态的所有元素。

        

    10. :selected选中状态选择器 $("formId :selected");

        获取<select>下拉列表中处于选中状态的<option>元素。

        

    11. 有关选择器前是否加空格的问题

        1）空格代表的是一种包含的关系。

        例：$("ul:first"); 选择器前没有空格，则代表选择“第一个ul元素”。

            $("ul :first"); 选择器前有空格，则代表选择“ul元素中的第一个元素”。

        2）CSS选择器也同理。如“ul .class”有空格代表“XX元素里的类名为class的元素”，没有空格则代表类名为class的ul。

        2）但是经过试验，在CSS里的选择器没有像jQuery一样，表现出最后一个字符是空格就表示选择的是其子元素的现象。

    

四、jQuery操作DOM元素

    1. 通过attr()方法控制元素属性

        attr()的作用是设置或者返回元素的属性，attr(属性名)返回元素的属性值，attr(属性名,属性值)设置元素的属性值。

        设置复选框为不选择，$("#test").attr("checked", false);

        

    2. 通过html()和text()方法操作元素的内容

        1）方法为空，则获取该元素的内容；方法包含参数，则设置元素的内容。

        2）html()方法获取元素的html内容（包括元素里面的元素等），而text()内容只获取元素中的文本内容。

        3）元素.text("<b>加粗的字</b>"); 显示为“<b>加粗的字</b>”，而元素.html("<b>加粗的字</b>");显示为“加粗的字”。

        

    3. 通过addClass()和css()方法操作元素的样式

        1）元素.addClass(类名)，将该类在css文件中的样式加到元素上。

        2）元素.css(css属性名, css属性值)，直接设置该元素的css样式。

        3）可以结合json用css()同时给多个css属性赋值。如元素.css({"background-color":"red", "color":"white"});（字体颜色直接用color）

        

    4. 移除属性和样式

        1）removeAttr(属性名) 移除属性

        2）removeClass(类名) 移除样式    

    5. 使用append()方法向元素内追加内容

        1）内容是字符或HTML元素或返回字符串内容的函数。

        2）使用示例：$("body").append("<div id='test' title='hi'>一句话</div>");或$("body").append($(".white"));

        

    6. 使用appendTo()方法向被选元素内插入内容

        1）将<span class="red">内容</span>插入到div中。$(".red").appendTo("div"); //appendTo(括号里是一个选择器)

        2）$html="<span class='red'>小青蛙</span>"; $($html).appendTo("div"); //似乎只有选择器需要加引号，变量不需要。

        3）上例中，如有多个div，则同时向多个div中添加。

        

    7. 使用before()和after()在元素前后添加内容

        1）被添加的可以是字符串或元素。

        2）例：$(".green").before("<b>加粗的字</b>"); 在类名为green的元素前面加入加粗的字。（成为兄弟节点）

        3）$(".green").before($(".white")); 加入元素。

        4）简直神奇……我上午试验了，明明append()、before()、after()都不能添加元素，而只能添加字符串，可是到了下午，就莫名其妙全都能添加元素了……亏我上午还那么迷茫，很辛苦地整理了一下这些函数哪个能添加元素，哪个不能，结果到了下午就全都能了……真是神奇神奇神奇，我上午试验的时候到底做错了什么啊，好想知道……

    tip1：字符串$html写作$($html)即成为一个元素。

        

    8. 使用clone()方法复制元素

        1）$(selector).clone()，selector可以为一个元素（即写出选择器）或HTML内容（即HTML的字符串，如$html）。

        2）复制了一个被选元素，包括它的文本、节点和属性。

        3）例：$("body").append($(".red").clone());或$("body").append($($html).clone());

 
c6a2
       

    9. 使用replaceWith()或replaceAll()替换内容

        1）$(selector).replaceWith(content); 例：$(".green").replaceWith($html);或$(".green").replaceWith($($html));或$(".green").replaceWith($(".red"));

        2）$(content).replaceAll(selector); 例：$($html).replaceAll(".green");或$($html).replaceAll($(".green"));

        

    tip2：点号前必须是一个元素。appendTo()和replaceAll()两个方法可以直接在括号内（实际是选择器）中直接写选择器，而不用把元素“$(选择器)”完整地写出来，但写出来也是对的。

        其他方法的selector位置都在点号前，所以必须是一个元素，而后面括号里的content（内容）可以是一个字符串，也可以是一个元素。

        

    10. 使用wrap()和wrapInner()方法包裹元素和内容

        1）wrap()用于包裹元素本身 $(".red").wrap("<div></div>"); 将类名为red的元素包裹在<div>内。

        2）wrapInner()用于包裹元素中的内容 $(".red").wrapInner("<div></div>"); 将类名为red的元素里面的内容包裹在<div>内。

        

    11. 使用each()方法遍历元素

        <span class="green">香蕉</span>

        <span class="green">桃子</span>

        <span class="green">葡萄</span>

        <span class="green">荔枝</span>

        <script type="text/javascript">

           $("span").each(function (index) { // function为遍历时的回调函数，index为遍历元素的序号，从0开始。

                   if (index == 1) {

                       $(this).css("background-color", "red");

                   }

           });

        </script>

        

    12. 使用remove()和empty()方法删除元素

        1）remove()方法删除所选元素的本身和子元素，可以通过过滤参数选择指定需要删除的元素。

            如：上例的span中，$("span").remove(".red"); 删除span元素中类名为red的。

        2）empty()方法只删除所选元素的子元素

        

五、jQuery事件与应用

    

    1. 页面加载时触发ready()事件

        1）ready()类似于onLoad()事件，前者只要页面DOM结构加载后就触发，后者必须在页面全部元素加载成功才触发。

        2）ready()可以写多个，按顺序执行。

        3）$(document).ready(function(){})等价于$(function(){})。

        

    2. 使用bind()方法绑定元素的事件

        1）例：$("#btntest").bind("click mouseout", function () { // 绑定多个事件，事件与事件之间是或的关系，并不需要同时满足。

            函数体;

            })；

    3. 使用hover()方法切换事件

        $(selector).hover(over, out); over参数为移到所选元素上时触发的函数，out参数为移出所选元素时触发的函数

        

    4. 使用toggle()方法绑定多个函数（主流稳定的版本为jQuery1.8.2，在1.9.0之后的版本不支持）

        1）toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，每次点击依次执行。

        2）当执行到最后一个函数时，再次点击返回执行第一个函数。

        3）本身就可以实现元素的隐藏和显示的切换，如$("div").toggle()，直接就可以实现切换。

        

    5. 使用unbind()方法移除元素绑定的事件

        1）$(selector).unbind(event, func); event参数表示需要移除的事件名称，多个事件名称用空格隔开。func参数为事件执行时调用的函数名称。

        2）$("div").unbind("dblclick"); 移除div元素所绑定的双击事件。如果没有传入参数，unbind()方法会删除指定元素的所有事件处理程序。

        

    6. 使用one()方法绑定元素的一次性事件

        1）one()方法可以绑定元素任何的有效事件，但这种方法绑定的事件只会触发一次。

        2）$(selector).one(event, [data], func); event为事件名称，data为触发事件时携带的数据，func为触发该事件时执行的函数。

        3）$("div").one("click", function() {

                函数体；

            })

            

    7. 调用trigger()方法手动触发指定的事件

        1）$(selector).trigger(event)，event是事件名称，可以是元素自带事件，也可以是自定义事件。

        2）如$("div").bind("change-color", function () {

                函数体；

            }); 自定义一个事件。如果要触发这个事件，需要用$("div").trigger("change-color");来触发。

            

    8. 文本框的focus和blur事件

        1）focus事件在元素获取焦点时触发

        2）blur事件在元素失去焦点时触发，如$("input").bind("blur", function () {});

        

    9. 下拉列表框的change事件

        1）当一个元素的值发生变化时，将触发change事件。

        2）例：$("select").bind("change", function () {});

        

    10. 调用live()方法绑定元素的事件

        1）与bind()方法相同，live()方法可以绑定元素的可执行事件，不同的是，live()方法还可以绑定动态元素，即用代码添加的元素的事件。

        2）例：$("#btntest").live("click", function () {

                函数体;

            });

            $("body").append("<input id="btntest" type="button" value="点击就不可用了" />");

        3）虽然按钮元素是在事件绑定声明之后，并且是通过追加的方式添加至页面的，但由于使用的是live()方法绑定元素事件，所以仍然生效。

        

六、jQuery动画特效

    

    1. 调用show()和hide()方法显示和隐藏元素

        1）$(selector).show(speed, [callback]);

        2）$(selector).hide(speed, [callback]);

        

    2. 动画效果的show()和hide()方法

        1）参数speed设置显示或隐藏的速度值，可为“slow”、“fast”或毫秒数值。

        2）参数callback为显示或隐藏动作执行完成后调用的函数名。

        3）例：$("ul").hide("slow", function () {

                函数体;

            });

            

    3. 调用toggle()方法实现动画效果

        1）只要调用就自动实现显示和隐藏效果，参数可以为空。

        2）$(selector).toggle(speed, [callback]); 其中参数与show()、hide()一模一样。

        

    4. 使用slideUp()和slideDown()方法的滑动显示隐藏效果

        1）同样是显示和隐藏的效果。slideUp()向上滑动直至消失（仅适用于显示的元素），slideDown()向下滑动直至出现（仅适用于被隐藏的元素）。

        2）$(selector).slideUp/Down(speed, [callback]); 格式与show()、hide()、toggle()相同。

        3）用firebug查看，发现是元素的height和margin-top在变化，元素本身滑动位置较小（margin-top），而height则是从原高度变为0。

        

    5. 使用slideToggle()方法切换slideUp()和slideDown()

        1）$(selector).slideToggle(speed, [callback])，格式与以上所有动画方法一样。

        2）hide()、show()、toggle()一组，slideUp()、slideDown()、slideToggle()一组。

        3）使用toggle()或slideToggle()时，不需要进行条件判断，方法会自动判断当前是显示还是隐藏。

        

    6. 使用fadeIn()与fadeOut()方法实现淡入淡出效果

        1）调用格式与所有动画效果相同。

        2）fadeIn()淡入隐藏的元素，fadeOut()淡出显示的元素。

        

    7. 使用fadeTo()方法设置淡入淡出效果的不透明度

        1）$(selector).fadeTo(speed, opacity, [callback]);

        2）不能自动实现淡入淡出的切换，效果本质上是从现在的透明度按速度转变为设置的透明度。

        

    8. 调用animate()方法制作简单的动画效果

        1）$(selector).animate({width:"80px", height:"80px"}, speed, [callback]);

        2）动画效果是按照速度向设定好的css效果靠近。

        

    9. 调用animate()方法制作移动位置的动画

        1）在移动位置之前，必须将被移动元素的position属性设置为absolute或relative，否则无法移动。

        2）$(selector).animate({width:"+=30px",height:"+=30px"}, speed, [callback]); 增大30px的效果。

        

    10. 调用stop()方法停止当前所有动画效果

        $(selector).stop([clearQueue], [goToEnd]); 两个可选参数都是布尔值类型，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

        

    11. 调用delay()方法延时执行动画效果

        设置一个延时值来推迟动画效果的执行。$(selector).delay(duration); duration为延时值，参数为毫秒。