前端开发工程师-第1章 JQuery基础语法

前端开发工程师-第16章 XML和JSON|P

第一阶段（B）（前端框架） 15天 84学时

第1章 JQuery基础语法（6）

[学习课时] 本章共需要学习 6 课时

[目的要求]

掌握Jquery的下载、安装和使用的方法
掌握Jquery的选择器和事件机制
掌握Jquery的元素遍历方法
掌握Jquery样式的操作

[教学内容]

jQuery 是一个 JavaScript 库.

jQuery 安装

两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

下载地址：http://jquery.com/download/

jQuery 语法

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

美元符号($)：定义jQuery
选择符(selector)："查询"和"查找" HTML 元素
action()：执行对元素的操作

获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容 – innerText
html() - 设置或返回所选元素的内容（包括 HTML 标记） - innerHtml
val() - 设置或返回表单字段的值 – value
attr(‘name’) - 设置/改变属性值 – getAttribute - setAttribute

$("#test1").text("Hello world!");

$("#test2").html("<b>Hello world!</b>");

$("#test3").val("RUNOOB");

$("#runoob").attr("href","http://www.baidu.com ");

$("#runoob").attr({

"href" : "http://www.baidu.com ",

"title" : "jQuery 教程"

});

$("#runoob").attr("href", function(item,oldValue){

return oldValue + "/jquery";

});

jQuery 选择器

$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

jQuery 元素集合遍历

each() 方法用于向for循环一样循环操作元素集合

语法

$(selector).each(function(index,element))

参数

描述

function(index,element)

index - 选择器的 index 位置。

element - 当前的元素（也可使用 "this" 选择器）

返回 false 可用于及早停止循环

$("li").each(function(){

alert($(this).text())

});

jQuery CSS样式

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法：

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

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

$("p").css({"background-color":"yellow","font-size":"200%"});

实例：demo01

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .style {

                background-color: red;

                height: 60px;

            }

        </style>

        <script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function() {

                $('button:nth-child(1)').click(function() {

                    $('div').addClass('style');

                });

                $('button:nth-child(2)').click(function() {

                    $('div').removeClass('style');

                });

                $('button:nth-child(3)').click(function() {

                    $('div').toggleClass('style');

                });

            });

        </script>

    </head>

    <body>

        <button>添加样式</button>

        <button>删除样式</button>

        <button>只能切换</button>

        <div>

            测试样式

        </div>

    </body>

</html>

jQuery DOM遍历

遍历父元素

用于向上遍历 DOM 树：

parent(selector) - 被选元素的直接父元素
parents(selector) - 被选元素的所有祖先元素，一路向上直到文档的根元素<html>
parentsUntil(selector) - 向上直到给定元素之间的所有祖先元素

案例：demo02

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style>

            .ancestors * {

                display: block;

                border: 2px solid lightgrey;

                color: lightgrey;

                padding: 5px;

                margin: 15px;

            }

        </style>

        <script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

        </script>

        <script>

            $(document).ready(function() {

                $("span").parentsUntil("div").css({

                    "color": "red",

                    "border": "2px solid red"

                });

            });

        </script>

    </head>

    <body class="ancestors"> body (曾曾祖父元素)

        <div style="width:500px;">div (曾祖父元素)

            <ul>ul (祖父元素)

                <li>li (父元素)

                    <span>span</span>

                </li>

            </ul>

        </div>

    </body>

</html>

效果图

遍历同级元素

在 DOM 树进行水平遍历：

siblings(selector) - 返回被选元素的所有同胞元素
next(selector) - 返回被选元素的下一个同胞元素，只有紧挨着的一个
nextAll(selector) - 返回被选元素的所有同胞元素
nextUntil(selector) - 返回直到给定参数之间的所有跟随的同胞元素
prev(selector) - 同理向上遍历
prevAll(selector) - 同理向上遍历
prevUntil(selector) -同理向上遍历

遍历子元素

两个用于向下遍历 DOM 树的 jQuery 方法：

children(selector) - 返回被选元素的所有直接子元素
find(selector) - 返回被选元素的后代元素，一路向下直到最后一个后代

其他方法

first() 方法

返回被选元素的首个元素

last() 方法

返回被选元素的最后一个元素

eq(number) 方法

返回被选元素中带有指定索引（下标）号的元素

filter(selector) 方法

筛选所选元素中满足特定条件的元素

$("p").filter(".url");

not(selector) 方法

返回不匹配标准的所有元素

jQuery 事件

ready()：文档加载完毕事件

$(function() {

。。。。。

})

$(document).ready(function() {

。。。。。

});

holdReady()：暂停ready()事件

$.holdReady(true)

$(document).ready(function() {

    $("#first").click(function() {

        alert("解除延迟后被弹出");

    })

})

$("#second").click(function() {

    $.holdReady(false);

})

其他事件

方法	描述
blur()	当失去焦点事件
change()	当内容改变时
click()	当单机时
dblclick()	当双击时
focus()	添加/触发获得焦点时
focusin()	当元素（或在其内的任意元素）获得焦点时
focusout()	当元素（或在其内的任意元素）失去焦点时
hover()	当鼠标悬停时
keydown()	当键盘按下时
keypress()	当完成键盘按下并弹起整个过程时
keyup()	当键盘弹起时
mousedown()	当鼠标按下时
mouseenter()	当鼠标进入时
mouseleave()	当鼠标离开时
mousemove()	当鼠标移动时
mouseout()	当鼠标移开时
mouseover()	当鼠标悬停时
mouseup()	当鼠标按下弹起时
ready()	当 DOM 完全加载时
resize()	当浏览器窗口调整大小时
scroll()	当元素滚动时（需出现滚动条）
select()	当输入框和文本域内容被选择时
submit()	当表单提交时
contextmenu()	右键单机时

方法	描述
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置
event.stopImmediatePropagation()	阻止其他相同事件继续执行
event.stopPropagation()	阻止事件向上传递到父容器
event.target	返回哪个 DOM 元素触发事件
event.timeStamp	鼠标左键第一次按下到最后一次抬起所消耗的毫秒数
event.preventDefault()	阻止元素原本的事件
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下
event.result	获取上一个相同事件返回的内容

案例：demo03

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="utf-8">

                   <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

                   </script>

         </head>

         <body>

                   <div style="background-color: red;">

                            点击我

                            <span style="background-color: yellow;">点我</span>

                   </div>

                   <button>按钮</button>

                   <input type="text" />

         </body>

         <script type="text/javascript">

                   //文档加载完毕事件

                   $(document).ready(function() {

                            $("div").click(function() {

                                     return "你点击我勒!";

                            });

                            $("div").click(function(event) {

                                     $("span").html(event.result);

                            });

                   });

                   $(document).ready(function() {

                            $("span").click(function(event) {

                                     event.stopPropagation();

                                     alert("DIV里面的SPAN被点击");

                            });

                            $("p").click(function(event) {

                                     alert("The p element was clicked.");

                            });

                            $("div").click(function() {

                                     alert("DIV被点击");

                            });

                   });

                   $(document).ready(function() {

                            $("div").click(function(event) {

                                     alert("事件句柄 1 被执行");

                                     event.stopImmediatePropagation();

                            });

                            $("div").scroll(function(event) {

                                     alert("事件句柄 2 被执行");

                            });

                            $("div").click(function(event) {

                                     alert("事件句柄 3 被执行");

                            });

                   });

                   $(document).ready(function() {

                            $("button").click(function(event) {

                                     $("span").text(event.timeStamp);

                            });

                   });

                   $(document).ready(function() {

                            $("input").keydown(function(event) {

                                     $("span").html("Key: " + event.which);

                            });

                   });

         </script>

</html>