jQuery学习之前

jQuery 是 JavaScript 的一个类库,类似 python 中的模块。
jQuery在线手册:http://jquery.cuishifeng.cn/
官网:http://jquery.com/

版本选择

目前jQuery有三个大版本:1.x、 2.x、 3.x。教学推荐使用1.x的最新版本,这个版本兼容IE低版本。
去官方页面:http://code.jquery.com/ ,可以获取到最新的版本,我这会用的是 jquery-1.12.4 。

添加jQuery

前面说到,jQuery是一个类库,那么在使用之前,就需要将库添加到网页中。用下面的语句把你的jQuery文件添加到网页中:

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

这里也可以不使用本地的文件,把src的值替换成互联网上的地址,就是各大网站提供的CDN库,比如下面这个是新浪的:

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>

使用CDN就不会从你的网站下载这个库文件了,另外,许多用户在访问其他站点时,已经访问过这些大网站,加载过 jQuery 。结果就是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
如果觉得用别人的不放心,担心CDN失效,可以用下面的代码,先尝试加载CDN,如果失败再加载本站的库文件:

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>window.jQuery || document.write("<script src='jquery-1.12.4.min.js'><\/script>")</script>

调用jQuery

通过 '$' 提示符,或者关键字 jQuery 都可以调用 jQuery。一般都用的是 $ 吧。
验证,下面的代码用到了jQuery语句,只有成功添加了jQuery才有显示:

<body>
<p>验证 jQuery ...</p>
<!--确保在这之前,页面中有添加jQuery的语句-->
<script>
    $("body").append("jQuery添加成功")
    // jQuery("body").append("jQuery添加成功")
</script>
</body>

jQuery和DOM的关系及互相转换

在进行操作之前,都是要先获取到对象,然后操作这个对象。这里先来看一下使用jQuery获取到的对象和通过DOM获取到的对象有什么关系。先打开一个如下的页面,加载了jQuery,并且有一个 id='i1' 的标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
</head>
<body>
<p id="i1">获取对象</p>
</body>
</html>

打开页面后,进入控制台进行操作,获取并查看标签的对象:

> $('#i1')  // jQuery通过id获取对象
< [object Object]: {0: Object, context: Object, length: 1, selector: "#i1"}
> document.getElementById('i1')
< <p id="i1">获取对象</p>
> $('#i1')[0]  // jQuery对象下标0的内容和DOM对象的一样
< <p id="i1">获取对象</p>
> $(document.getElementById('i1'))  // DOM对象也可以转换成jQuery对象
< [object Object]: {0: Object, context: Object, length: 1}

总结,jQuery的下标0 和 DOM 获取到的对象是一样的。jQuery对象包含完整的DOM对象。于是我们也知道的两种对象间互相转换的方式:

  • jQuery对象[0] :转换成DOM对象
  • $(DOM对象) :转换成jQuery对象

这样,如果已经有了一个DOM对象,可以转换成jQuery对象后,继续使用jQuery。反之,已经有了一个jQuery对象后,如果只想用原生的语句,也可以转换成DOM对象后,继续使用原生语句。

jQuery-选择器

选择器的作用就是通过它可以找到某个或者某些标签。

基本选择器

基本的选择器的语法和css里的一样,只要加上引号变成字符串后,放到 $() 的括号中就行了。
#id :通过id匹配
element :通过标签名匹配
.class :通过类名匹配
* :匹配所有元素
selector1,selector2,selectorN :使用多个选择器进行匹配,用逗号隔开,合并匹配到的结果,或的关系。

层级选择器

ancestor descendant :选择器之间用空格分隔,找到前一个选择器下的所有的符合后一个选择器的元素。包括子元素和下面更深层的元素
parent &gt; child :中间是大于号'>',匹配到父元素后,再匹配它下一级的子元素。这里只匹配一层,这是和上面的区别,上面会匹配所有层级。
prev + next :匹配到前一个选择器之后,在同层以及更深层匹配后一个选择器。
prev ~ siblings :匹配到前一个选择器之后,在他的同层级匹配后一个选择器。匹配兄弟标签。

基本筛选器

通过基本选择器和层级选择器,我们就获得了一个也可能是多个符合条件的标签。接下来还可以继续进行筛选:
:first :获取第一个元素
:last :获取最后一个元素
:eq(index) :匹配一个给定索引值的元素
上面的是常用的,下面的几个是用的不多的,还是知道一下:
:even:odd :匹配所有索引值为偶数/奇数的元素,从 0 开始计数
:gt(index):lt(index) :匹配所有大于/小于给定索引值的元素
:header :匹配所有标题元素,就是 h1 到 h6 标签
另外还有更多筛选器,是的不多,就不一一列出了。下面的是匹配奇数和偶数的应用,为表格的奇数行和偶数行应用不同的样式,防止看错行:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table thead{
            background-color: blue;
            color: white;
        }
        table tbody .odd{
            background-color: gray;
        }
        table tbody .even{
            background-color: white;
        }
    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>NAME</th>
        <th>AGE</th>
        <th>DEPT.</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Adam</td>
        <td>22</td>
        <td>IT</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>32</td>
        <td>IT</td>
    </tr>
    <tr>
        <td>Carmen</td>
        <td>30</td>
        <td>Sales</td>
    </tr>
    <tr>
        <td>David</td>
        <td>40</td>
        <td>HR</td>
    </tr>
    <tr>
        <td>Edda</td>
        <td>26</td>
        <td>HR</td>
    </tr>
    </tbody>
</table>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $("table tbody tr:odd").addClass('odd');
    $("table tbody tr:even").addClass('even');
</script>
</body>
</html>

内容和可见性(略)

属性选择器

这里提供的方法就是通过属性来查找元素:
[attribute] :匹配含有这个属性的元素,只要属性存在,具体值是多少不关注。
更多匹配属性和值的查找方法:
[attribute=value] :匹配给定的属性是某个特定值的元素
[attribute!=value] :匹配所有不含有指定的属性,或者属性不等于特定值的元素。等价于 :not([attribute=value]) ,要匹配含有元素但是值不等的情况,使用 [attribute]:not([attribute=value])
[attribute^=value] :匹配给定的属性是以某些值开始的元素
[attribute$=value] :匹配给定的属性是以某些值结尾的元素
[attribute*=value] :匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] :复合属性选择器,需要同时满足多个条件时使用。与的关系

子元素(略)

表单和表单对象(可忽略)

通过基本的选择器也可以查找到对象了,不过jQuery针对表单有一些更简化的语法可以使用。如果遇到表单操作比较多的话,到时候再看看就会了。
表单对象里有两个属性需要了解一下:
:enabled :匹配所有可用元素,就是可编辑的元素,比如 ‘<input type="text">’
:disabled :匹配所有不可用元素,和上面相反
这里只是和表单相关,并不是只在表单中查找。另外,input标签中,加上disabled之后,也会变成不可编辑:

<body>
<input type="text" value="我可以编辑">
<input type="text" value="我不可以编辑" disabled>
</body>

示例:全选、取消、反选

之前学习js的时候,通过js方法实现了过相同的功能。这次用jQuery再来做一遍:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="全选" id="btn_chooseAll">
    <input type="button" value="取消" id="btn_cancelAll">
    <input type="button" value="反选" id="btn_reverse">
</div>
<div>
    <table border="1">
        <thead>
        <tr>
            <th>choice</th>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Adam</td>
            <td>23</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Bob</td>
            <td>24</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Clark</td>
            <td>25</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $('#btn_chooseAll')[0].onclick = function () {
        // :checkbox 是匹配所有复选框
        // 并且这里jQuery也不用我们循环了
        // prop()方法,可以获取元素的属性,第二个参数是给属性赋值
        $('#tb :checkbox').prop('checked', true)
    };
    $('#btn_cancelAll')[0].onclick = function () {
        $('#tb :checkbox').prop('checked', false)
    };
    $('#btn_reverse')[0].onclick = function () {
        // each()是jQuery遍历的方法
        $('#tb :checkbox').each(function () {
            // 这里把this转换成jQuery对象
            $(this).prop('checked', !this.checked)
        })
    };
</script>
</body>
</html>

先提前学习了解一个jQuery属性的知识:
prop()属性,这个是专门用来对 checked 和 seleced 做操作的(相对于另一个attr()属性)。基本的用法是,获取值(没设置第二个参数),或者设置值(给第二个参数传值)。
$('#tb :checkbox').prop('checked', true) 这句,因为jQuery的方法内置了循环,所以我们直接进行操作,其实是一个批量操作。
$(this).prop('checked', !this.checked) 这句,前一个this用到了jQuery的prop,所以把它转成了jQuery对象。后一个this,直接用DOM的方法取值,所以直接用this,即DOM对象。

jQuery-筛选

也叫遍历方法或遍历函数。
这里的筛选和上面的选择器中的基本筛选器是不同的。所有的选择器的代码都是以字符串的形式写在同一个引号里的,通过选择器,我们可以获取到一个(或一组)jQuery对象。这里是对已有的jQuery对象执行的方法。
在jQuery对象的基础上再对元素进行筛选(查找、串联),就需要这里的筛选方法。筛选方法也有参数(可选),这里的参数还是上面学习的选择器。
常用的方法如下:

  • .next() :获得匹配元素集合中每个元素紧邻的同辈元素。上一个
    • .nextAll() :获得匹配元素集合中每个元素之后的所有同辈元素
    • .nextUntil() :获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
  • .prev() :获得匹配元素集合中每个元素紧邻的前一个同辈元素。下一个
    • .prevAll() :获得匹配元素集合中每个元素之前的所有同辈元素
    • .prevUntil() :获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
  • .parent() :获得当前匹配元素集合中每个元素的父元素。父亲
    • .parents() :获得当前匹配元素集合中每个元素的祖先元素
    • .parentsUntil() :获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
  • .children() :获得匹配元素集合中每个元素的所有子元素。孩子
  • .siblings() :获得匹配元素集合中所有元素的同辈元素。兄弟
  • .find() :获得当前匹配元素集合中每个元素的后代。子子孙孙

其他比较有用的方法:

  • .eq() :将匹配元素集合缩减为位于指定索引的新元素。通过索引选择,可以是负数倒着找。
  • .first() :将匹配元素集合缩减为集合中的第一个元素。第一个
  • .last() :将匹配元素集合缩减为集合中的最后一个元素。最后一个
  • hasClass(class) :检查当前的元素是否含有某个特定的类。返回布尔值

示例:左侧管理菜单

依然是之前的js,现在通过jQuery重做:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: blue;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
    <div class="item">
        <div class="header">菜单1</div>
        <div class="content hide">
            <div>内容1-1</div>
            <div>内容1-2</div>
            <div>内容1-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header">菜单2</div>
        <div class="content hide">
            <div>内容2-1</div>
            <div>内容2-2</div>
            <div>内容2-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header">菜单3</div>
        <div class="content hide">
            <div>内容3-1</div>
            <div>内容3-2</div>
            <div>内容3-3</div>
        </div>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    // 绑定事件,函数作为事件方法的参数,这里用一个匿名函数
    $('.header').mouseover(function () {
        // 当前标签父标签的所有兄弟标签的子标签中查找'.content'的标签
        $(this).parent().siblings().children('.content').addClass('hide');
        // 当前标签的下一个标签,移除'hide'
        $(this).next().removeClass('hide')
        // 上面两行可以合并为下面的一行代码,这叫链式编程
        // $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');
    })
</script>
</body>

链式编程:上面的两行代码可以合并为下面的一行代码 $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide') 。原理是 $(this).next().removeClass('hide') 不只是操作了class属性,它也是也返回值的(可以修改代码把它赋值给一个变量查看变量的值)。这个返回值就是操作的jQuery对象。所以后面是在这个对象的基础上继续进行操作。这个叫做链式编程,jQuery支持链式编程。

jQuery-属性

内容操作

下面的三个方法用来操作HTML代码、文本或值。没有参数是获取值,传入参数则是设置值:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

样式操作

其实是操作class,一般是通过修改class来改变样式的,有下面3个方法:

  • addClass() :向匹配的元素添加指定的类名。
  • hasClass() :检查匹配的元素是否拥有指定的类。
  • toggleClass() :从匹配的元素中添加或删除一个类。没有就加上,有则删除

下面是一个简单的开灯/关灯效果的例子,演示一下 toggleClass() 方法:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: gray;
        }
        .c1{
            height: 48px;
            width: 120px;
            line-height: 48px;
            text-align: center;
            background-color: white;
        }
        .dark{
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
<div class="c1">开灯/关灯</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $('.c1').click(function () {
        $(this).toggleClass('dark')
    })
</script>
</body>

属性操作

传一个参数是获取属性值,传两个参数是设置属性值:

  • attr() :设置或返回匹配元素的属性和值。自定义的属性用这个方法
  • removeAttr() :从所有匹配的元素中移除指定的属性。
  • prop() :设置或返回被选元素的属性和值。单选框和复选框用这个方法
  • removeProp() :移除由 prop() 方法设置的属性。

prop() 和 attr() 之间的不同:以复选框为例,attr()返回值是 ‘checked’ (而且1.x和2.x版本都有问题,例子中的值不会改变),而prop()返回值是 true 或 false。测试如下:

<body>
<p>
    <input id="btn1" type="button" value="查看attr()和prop()的值">
</p>
<p>
    <input id="check1" type="checkbox" checked="checked">
    <label for="check1">勾选这个复选框</label>
</body>
</p>
<p>
    attr('checked'):<span id="attr1"></span>
    <br>
    prop('checked'):<span id="prop1"></span>
</p>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $('#btn1').click(function () {
        $('#attr1').text($('#check1').attr('checked'));
        $('#prop1').text($('#check1').prop('checked'));
    })
</script>

示例:TAB分页菜单

直接上代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .w{
            width: 700px;
            margin: 0 auto;
        }
        .menu{
            height: 38px;
            background-color: gray;
        }
        .menu .menu-item{
            float: left;
            line-height: 38px;
            background-color: blue;
            color: white;
            padding: 0 10px;
            cursor: pointer;
        }
        .menu .menu-item:hover{
            background-color: orange;
            color: black;
        }
        .active{
            text-decoration: underline;
        }
        .content{
            min-height: 100px;
            background-color: darkseagreen;
            color: black;
        }
    </style>
</head>
<body>
<div class="w">
    <div class="menu">
        <div class="menu-item active" target="menu1">菜单一</div>
        <div class="menu-item" target="menu2">菜单二</div>
        <div class="menu-item" target="menu3">菜单三</div>
    </div>
    <div class="content">
        <div target="menu1">内容一</div>
        <div class="hide" target="menu2">内容二</div>
        <div class="hide" target="menu3">内容三</div>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $('.menu-item').click(function () {
        // 处理菜单
        $(this).addClass('active').siblings().removeClass('active');
        // 处理内容,这里的参数需要字符串,得拼接一下
        $('.content').children("[target='" + $(this).attr('target') + "']").removeClass('hide')
            .siblings().addClass('hide');
    })
</script>
</body>

获取索引-index()

.index() :获得第一个匹配元素相对于其同胞元素的索引位置。
写完整是这样的 $(selector).index(element) 。前面的jQuery对象如果是多个元素,则默认获取第一个匹配元素(即第一个元素)的索引。还可以通过为index传入选择器作为参数匹配到符合条件的第一个元素。
上面的例子也可以通过用index方法更简单的来实现。不需要设置自定义属性(例子中是target)。首先获取到点击的菜单(即this)的index属性,这也是要显示的内容在content中的索引位置。只需要替换掉上面例子中的最后一句代码,完成的jQuery代码如下:

<script>
    $('.menu-item').click(function () {
        // 处理菜单
        $(this).addClass('active').siblings().removeClass('active');
        // 处理内容
        $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
    })
</script>

jQuery-文档处理

插入的方法:

  • append() :在内部的末尾追加内容
  • prepend() :在内部的开头插入内容
  • before() :在元素的后面插入内容,外部
  • after() :在元素的前面插入内部,外部

删除的方法:

  • remove() :包括标签一起删除
  • 'empty()' :只清空内容(中间的标签会删除),保留最外层的标签

复制的方法:

  • clone() :克隆一个副本

jQuery-CSS

这里是通过直接修改元素的style属性,来实现样式的修改:
css("propertyname"); :只传入属性,返回css属性的值
css("propertyname","value"); :依次传入样式的属性和值,设置css属性。
css({"propertyname":"value","propertyname":"value",...}); :传入一个字典作为参数,一次设置多个css属性。

示例:点赞效果

点赞之后,会在边上出现 ‘+1’ 的提示。并且提示的文字会逐渐变大、变淡、然后移动。变大通过修改字体(font-size)属性。变淡通过修改透明度(opacity)。移动是在父标签设置 position: relative; ,然后自己设置 position: absolute; ,然后修改 top 和 left 属性实现上面的效果。这里要有一个定时器,定时修改上面的属性。最后记得要清除定时器和整个新加的标签。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            border: 1px solid black;
            line-height: 200px;
        }
        .item{
            position: relative;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">
        <span>赞</span>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $('.item').click(function () {
        // 新建标签,设置提示的内容
        var tag = document.createElement('span');
        $(tag).text('+1');  // .appendTo(this) 最后加上这些代码,效果和下一行一样
        $(tag).css('color', 'green');
        // 需要变化的属性值,这里定义到变量里,方便后面修改
        var fontSize=15, top=0, left=20, opacity=1;
        // 给标签设置初始的css属性
        $(tag).css('position', 'absolute').css('top', top+'px').css('left', left+'px');
        $(tag).css('fontSize', fontSize+'px').css('opacity', opacity);
        // 将标签添加到页面中
        $(this).append(tag);
        // 定时器,定时修改css属性。这里要赋值保存,方便之后清除这个定时器
        var obj = setInterval(function () {
            fontSize = fontSize + 5;
            top = top - 5;
            left = left +5;
            opacity = opacity - 0.1;
            $(tag).css('top', top+'px').css('left', left+'px');
            $(tag).css('fontSize', fontSize+'px').css('opacity', opacity);
            // 判断条件理论上可以设置为等于0,但是浮点运算后的结果可能会有一点点的偏差,不是正好等于0
            // 用小于0 或者 小于等于0 的逻辑比较保险
            if (opacity < 0){
                // 清除掉定时器
                clearInterval(obj);
                // 标签也要清除掉
                $(tab).remove();
            }
        }, 100);
    })
</script>
</body>
</html>

位置和尺寸

滚轮的操作:

  • $(selector).scrollTop(offset) :返回或设置匹配元素的滚动条的垂直位置。
  • $(selector).scrollLeft(offset) :返回或设置匹配元素的滚动条的水平位置。

$(window) 这个对象就是操作浏览器窗口的滚轮。
offset 缺省时是获取位置,传入参数时是设置位置,要返回顶部,就设为0。

定位的操作:

  • offset() :返回第一个匹配元素相对于文档的位置。
  • position() :返回第一个匹配元素相对于父元素的位置。

返回 top 和 left 两个值。可以再用 .top .left 获取到某个具体的值。

尺寸的操作:

  • height() :纯高度,就是css的height属性,可以传入参数设置高度。
  • width() :宽度,具体同上
  • innerHeight() :算上内边距的高度
  • innerWidth() :宽度,具体同上
  • outerHeight() :算上内边距和边框的高度
  • outerWidth() :宽度,具体同上
  • outerHeight(true) :算上内边距、边框和外边距的高度
  • outerWidth(true) :宽度,具体同上

jQuery-事件绑定

常用的几种事件绑定的方式,还可以解除绑定:

  • $().click() :触发事件
  • $().click(function) :绑定事件
  • $().bind('click', function) :另外一种绑定事件的方式。和上面是一类
  • $().unbind(‘click’) :解除事件的绑定
  • $().delegate(childSelector, 'click', function) :为前面父元素下的子元素绑定事件。这种绑定方式对绑定后才创建的新的子元素一样有效。这个叫委托,事件是委托在父元素上的。
  • $().undelegate('click') :解除事件的绑定
  • $().on('click', function) :这个是最原生的绑定方式,上面的绑定方式在内部调用的都是这个on。所以这个方法其实还有更多参数选择。
  • on(events,[selector],[data],fn) :上面的两种绑定方法(bind 和 delegate)在高版本中都被取缔了,用on都可以替代。
  • $().off('click') :解除绑定

阻止事件的发生

先来看一下 &lt;a&gt; 标签,点击后页面会跳转。这里可以认为该标签默认就绑定了一个事件。如果给a标签再绑定上一个事件是什么情况呢?实测一下:

<body>
<a onclick="jump(this)" href="http://blog.51cto.com/steed">走你</a>
<script>
    function jump(obj) {
        alert(obj.href);
    }
</script>
</body>

点击后,会先触发我们的事件,然后再执行页面跳转。这里如果给事件一个返回值,就会有不同的效果。如果返回 false 时,将中断操作。要接收到函数的返回值,标签中得写成这样 onclick="return jump(this)" 。代码如下:

<body>
<a onclick="return jump(this)" href="http://blog.51cto.com/steed">走你1</a>
<a id="i2" href="http://blog.51cto.com/steed">走你2</a>
<script>
    function jump(obj) {
        alert(obj.href);
        return false
    }
    document.getElementById('i2').onclick = function () {
        alert(this.href);
        return false
    }
</script>
</body>

上面的事件都会返回一个 false ,会中断操作,不会进行之后的页面跳转。如果返回 true ,或者不设置返回值,则会继续操作。上面第二个标签中的事件绑定是在js出完成的,不用做别的额外操作,只要在绑定的函数的结尾多写一句 return 就好了。
阻止事件发生的意义:做表单验证的时候,如果验证通过,则返回true,页面跳转。如果验证失败,则返回false,阻止页面继续跳转:

<body>
<form action="https://www.baidu.com/s">
    <input type="text" name="wd" placeholder="请输入要搜索的内容" />
    <input type="submit" value="搜索" />
</form>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(':submit').click(function () {
        if ($(this).prev().val().length > 0){
            return true
        } else {
            alert("请输入内容");
            return false
        }
    })
</script>
</body>

示例:表单验证

示例来做一个更加复杂的表单验证。这次有3个input框同时需要验证,这就需要再写个循环。如此我们的事件里就嵌套了两层函数,通过return false阻止事件会有问题。这里只有3个输入框全部填入内容才能提交表单,否则会显示错误信息:

<body>
<form id="f1" action="http://blog.51cto.com/steed">
    <p>
        <label for="username">用户名:</label>
        <input id="username" name="username" type="text">
    </p>
    <p>
        <label for="password"> 密码:</label>
        <input id="password" name="password" type="password">
    </p>
    <p>
        <label for="verify">验证码:</label>
        <input id="verify" name="verify" type="text">
    </p>
    <p><input type="submit" value="提交"></p>
</form>
<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $(':submit').click(function () {
        var flag = true;  // 这个变量用于存储下面的函数执行的错误结果
        $('.error').remove();  // 先删除之前一次操作添加的标签
        $('#f1').find("input[type='text'], input[type='password']").each(function () {
            if($(this).val().length <= 0){
                flag = false;  // 如果验证出错,就设置为false
                var tag = document.createElement('span');
                tag.innerText = '必填';
                tag.classList.add('error');  // 统一加个class,方便批量删除标签
                $(tag).css({'color': 'red', 'fontSize': 12});  // 顺便用jQuery的方法设置一下css
                $(this).after(tag);
                // 这里return false会阻止each继续遍历,相当于break。
                // return false;  // 去掉这句的注释是另外一个效果,只提示第一个错误
            }
        });
        // 这里return false才是验证失败。
        // 但是验证是在内层的函数里完成的,所以需要一个变量把结果传递出来
        return flag;
    })
</script>
</body>

这里click事件函数内部,还要遍历一遍所有的输入框。内部的遍历函数可以返回false,上面注释掉了。
如果是内部的遍历函数返回了false,则中断内层的遍历,阻止遍历之后的输入框。如果去掉注释,效果是只会提示第一个错误信息。
要想阻止提交表单,需要在外层的click事件的函数最后返回一个false。但是这里的结果需要内层的函数来验证。基于作用域的原理,先在外层声明一个变量(flag),然后内层的验证结果验证到错误就把变量置为false。这样最后就可以通过把flag作为返回值,返回整个验证过程是否有错误。

jQuery-页面载入事件(ready)

就叫ready()方法,或ready()事件,一般用下面的简写。
$(function) :写在这个方法里的函数,当页面框架加载完成后就立即执行。在DOM的结构加载完后就触发,而不是还要等css,js,图片等都加载完成后再触发。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

<script>
    $(function(){
        // 你的代码
    })
</script>

理解:
一、如果把事件绑定写在ready方法里,那么一定是等待框架加载完毕才执行的绑定。没有ready方法的情况,代码是从上到下顺序执行的。如果你的绑定方法写在标签生成之前,此时是获取不到绑定方法后面的DOM中的标签的。不过一般都建议把js写在最后,也不会有这个问题。
二、等待被调用的方法,可以不用写在ready事件里。把所有其他的 jQuery 事件和函数置于ready事件中是非常好的做法。是否写在ready()事件里,影响的只是执行的时机。
三、不必所有的代码都写在一个ready事件中。可以在同一个页面中无限次地使用ready事件。

jQuery-扩展

扩展,就是定义自己的jQuery方法。这里有两种扩展的方法:
$.extend({key: function}) :调用方法,$.key()。
$.fn.extend({key: function}) :调用方法:$().key()。前面的括号里可以写上选择器。

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>
    $.extend({
        'sayHi': function () {
            return 'Hi jQuery'
        }
    });
    $.fn.extend({
        "hello": function () {
            return 'Hello World!'
        }
    });
    alert($.sayHi());
    alert($('body').hello());
</script>

扩展方法的命名空间

一般的做法是把扩展的方法写在一个js文件中,然后在使用前引入。就像我们引入jQuery库一样,扩展的方法就是我们自己的库。
所有引入的方法和我们自己在页面用定义的方法是共享命名空间的。函数名(或者叫方法名)肯定是不能重复的。但是变量名可以通过自执行函数(闭包),每个扩展方法都是自己独立的命名空间。
先写一个自己的扩展库,保存为js文件:

// 文件名:myJQ.js
(function () {
    // 闭包解决的是变量命名空间的问题,name变量只在这个闭包中有效
    var name = 'jQuery';

    $.extend({
        'sayHi': function () {
            return 'Hi ' + name
        }
    });

    $.fn.extend({
        "hello": function () {
            return 'Hello ' + name
        }
    });
})();

上面的自执行函数,也是可以传参数的。这里没什么参数要传,不过一般会把jQuery传进去:

(function ($) {
    // 这里面是你的扩展方法,在这里面,可以放心的使用$符号
})(jQuery);

这样即使外面$符号用作别的定义了,在扩展内部,$就是jQuery。
然后在页面中就像调用其它jQuery方法一样调用自定义的扩展函数:

<script src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script src="myJQ.js"></script>
<script>
    alert($.sayHi());
    alert($().hello());
</script>

js的扩展

顺便记一下js的扩展。简单的把函数写到一个单独的js文件中也是可以的。如果考虑到变量命名空间的问题,还是加个闭包:

(function () {
    var name = 'Adam';
    sayHi = function () {
        return 'Hi ' + name
    };
})();

因为函数名我们需要在全局可以调用的,所以上例中的函数名是全局变量。但是如果有太多的方法,免不了和全局的名称会有冲突。这就需要把多个方法写到一个类中去,做成一个类库:

// 先定义好全局的类名
if (typeof myFunc !== "object"){
    myFunc = {};
}

(function () {
    var name = 'Bob';
    // 往类里添加方法
    myFunc.hello = function () {
        return 'Hello ' + name;
    };
    myFunc.welcom = function () {
        return name + ' welcom !'
    }
})();

作业

后台管理平台 ,编辑表格:

  1. 非编辑模式:可对每行进行选择; 反选; 取消选择
  2. 编辑模式:进入编辑模式时如果行被选中,则被选中的那行变为可编辑状态,未选中的不改变
    • 退出编辑模式时,所有的行进入非编辑状态
    • 处于编辑模式时,行被选中则进入编辑状态,取消选择则进入非编辑状态

老师演示的简单表格,状态用的是下拉框:
Python自动化开发学习17-jQuery