jQuery 教程

大纲

一、jQuery简介
二、jQuery 和Dom关系及jQuery版本
　　1、jQuery版本
　　2、jQuery和Dom转换
三、jQuery 选择器
　　1.1、基本
　　1.2、层级
　　2、基本筛选器
　　3、属性选择器
　　4.1、表单
　　4.2、表单对象属性
四：jQuery 示例
　　1、示例：全选、反选、取消
　　2.1、筛选器示例：左侧菜单点击展开内容
　　2.2、筛选器
　　3.1、jQuery 文本、样式以、属性、文档处理操作
　　3.2、示例：模态对话框
　　4、示例：tab切换菜单
　　5、示例：点赞以及jQuery css操作
　　6、示例：拖动面板以及位置操作
　　7.1、jQuery绑定事件及示例
　　7.2、JQuery事件之阻止事件发生及示例：表单验证
五、jQuery 扩展

一、jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：

　　具有独特的链式语法和短小清晰的多功能接口；

　　具有高效灵活的css选择器，并且可对CSS选择器进行扩展；

　　拥有便捷的插件扩展机制和丰富的插件。

　　jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

模块 <=> 类库
DOM/BOM/JavaScript的类库，所以jQuery也分为两部分：

查找元素
操作元素

jQuery 中文文档

jQuery官网地址

二、jQuery 和Dom关系及jQuery版本

1、jQuery版本

当前jQuery版本：这里使用的1.x系列最新版本

1.x系列 兼容性最好，1系列当前最新1.12 
2.x系列 
3.x系列 最新的版本，IE低版本不再支持

下载的时候有两个版本：一个标准版、一个min压缩版。测试时使用标准版，线上建议使用压缩版。

下载后，引入jQuery类库：

<head>
    <link rel="stylesheet" href="1.css">
    <!--引入css文件-->
    <style>
        /* 写css样式 */
    </style>

    <script src="jquery-1.12.4.js"></script>
    <!--引入jQuery类库，JavaScript一般放到body尾部-->
    <script>
        // script 代码。调用使用 jQuery.xxx
        // jQuery.xxx  <==>  $.xxx  $等同于jQuery关键字
    </script>
</head>

2、jQuery和Dom转换

> $('#i1')     // jQuery获取
[<input type="text" id="i1">]
> document.getElementById('i1')  // dom获取
<input type="text" id="i1">

> $('#i1')[0]  // jQuery对象转换为dom对象
<input type="text" id="i1">
> $(document.getElementById('i1')) // dom对象转换为jQuery对象
[<input type="text" id="i1">]
// 转换：
    // jquery对象[0]   => Dom对象
    // Dom对象         => $(Dom对象)

三、jQuery 选择器

1.1、基本

　　> id 选择器

　　$('#idName')

　　> class 选择器

　　$('.className')

　　> 标签选择器

　　$('tagName')

　　> 组合选择器

　　$('a,.c1,#i10')

1.2、层级

$('#i10 a') 子子孙孙（i10里所有a标签）
$(‘#i10>a’) 儿子（只取子标签里的a标签）
prev + next 　下一个标签
prev ~ siblings 兄弟标签

2、基本筛选器

:first          // 获取匹配的第一个元素
:last
:not(selector)  //去除所有与给定选择器匹配的元素
// 在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
:even           // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd            // 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)      :gt(index)      :lt(index) 
// 等于           大于          小于
:header         // 匹配如 h1, h2, h3之类的标题元素

3、属性选择器

之前的内容，没有对自定义属性进行查找的，如：<a fgf='22'></a>

jQuery 支持对自定义属性的获取查找.

$('[fgf]')       // 具有fgf属性的所有标签
$('[fgf="22"]')  // fgf属性等于22的标签
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

4.1、表单

<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>

$("input[type='text']")    // 不使用表单选择器，也能实现
$(':text')             // 使用表单选择器

4.2、表单对象属性

:enabled        // 可编辑，默认就是
:disabled       // 不可编辑
:checked        // 被选中（单选框、复选框)
:selected       // 被选中（下拉框)

四：jQuery 示例

1、示例：全选、反选、取消

2.1、筛选器示例：左侧菜单点击展开内容

筛选器：

$(this).next()         // 下一个
$(this).prev()         // 上一个
$(this).parent()       // 父
$(this).children()     // 孩子
$('#i1').siblings()    // 兄弟(不包含自己)
$('#i1').find('#i1')   // 子子孙孙中查找

添加移除样式：

$('#i1').addClass(..)  // 添加样式
$('#i1').removeClass(..)// 移除样式

示例：

<head>
    <style>
        .header{
            background-color: royalblue;
        }
        .content{
            min-height: 70px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
           // 当前点击的标签 $(this)； .next 获取某个标签的下一个标签
           // $(this).next().removeClass('hide');  移除hide属性
           // $(this).parent().siblings().find('.content').addClass('hide')
           $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
           // 链式编程
        })
    </script>
</body>

2.2、筛选器

$('#i1').next()		// 下一个			
$('#i1').prev()    　　　//往上找

$('#i1').nextAll()	// 下面所有		   
$('#i1').prevAll()

$('#i1').nextUntil('#ii1')   // 下面直到哪里	 
$('#i1').prevUntil('#ii1')

$('#i1').parent()          // 父标签
$('#i1').parents()         // 取得一个包含着所有匹配元素的祖先元素的元素集合
$('#i1').parentsUntil()        //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li').eq(1)   <——>  $('li:eq(1)')
first()
last()
hasClass(class)

3.1、jQuery 文本、样式以、属性、文档处理操作

文本操作：

$(..).text()            // 获取文本内容
$(..).text("<a>1</a>")  // 设置文本内容

$(..).html()           // 获取
$(..).html("<a>1</a>")  // 设置

$(..).val()                // 获取
$(..).val(..)          // 设置

样式操作：

addClass 
removeClass 
toggleClass 比如实现网页开关灯功能

开关灯示例：

<head>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type='checkbox' id='i2'  />

    <input id="i1" type="button" value="开关" />
    <div class="c1 hide">asdfasdf</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function(){
//            if($('.c1').hasClass('hide')){
//                $('.c1').removeClass('hide');
//            }else{
//                $('.c1').addClass('hide');
//            }
            $('.c1').toggleClass('hide');    // 一句搞定
        })
    </script>
</body>

属性操作：

// 专门用于做自定义属性
$(..).attr('n')          // 获取
$(..).attr('n','v')      // 设置
$(..).removeAttr('n')    // 删除

<input type='checkbox' id='i1'  />
// 专门用于chekbox,radio  jQuery1、2版本checkbox使用attr的话有bug，所以用prop
$(..).prop('checked')
$(..).prop('checked', true)

文档处理：

append    // 往后加
prepend   // 往前加
after     // 紧挨着后面
before    // 紧挨着前面

remove    // 删除
empty     // 只清空内容

clone     // 克隆一份数据

3.2、示例：模态对话框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>
        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        function  confirmModal() {

            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement('td');
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');
        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });
//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value
        });
    </script>
</body>

　　注意：上面这个示例的添加新值为写死的，没有按照正确的业务逻辑去实现。

4、示例：tab切换菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            var target = $(this).attr('a');
            $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
        });
    </script>
</body>
</html>

　　上面是通过自定义属性实现的，下面不用自定义属性，用索引也能实现。

index 获取索引位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" >菜单一</div>
            <div  class="menu-item" >菜单二</div>
            <div  class="menu-item" >菜单三</div>
        </div>
        <div class="content">
            <div >内容一</div>
            <div class="hide" >内容二</div>
            <div class="hide">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        });
    </script>
</body>
</html>

5、示例：点赞以及jQuery css操作

Query css处理操作

$('t1').css('样式名称','样式值')
$('t1').css({'样式名称1':'样式值2','样式名称2':'样式值2'})
点赞：
      - $('t1').append()
      - $('t1').remove()
      - setInterval
      - 透明度 1 --> 0
      - position
      - 字体大小，位置

点赞示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            AddFavor(this);
        });
        function AddFavor(self) {
            // DOM对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize + "px");
            $(tag).css('right',right + "px");
            $(tag).css('top',top + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            }, 40);
        }
    </script>
</body>
</html>

6、示例：拖动面板以及位置操作

位置操作：

$(window).scrollTop()   // 获取windows滑轮位置  // 注意是谁的滑轮
$(window).scrollTop(0)  // 设置windows滑轮位置
scrollLeft([val])       // 左右滚动滑轮设置

$('#i1').offset()      // 获取标签位置
offset().left           // 指定标签在html中的坐标位置
offset().top            // 指定标签在html中的坐标位置

<!--    position()      指定标签相对父标签(找到relative)标签的坐标-->
<div style='relative'>
    <div>
        <div id='i1' style='position:absolute;height:80px;border:1px'></div>
    </div>
</div>
<script>  // 纯高度，边框，外边距，内边距
$('i1').height()           // 获取标签的高度 纯高度
$('i1').innerHeight()      // 获取自身高度+padding；
$('i1').outerHeight()      // 参数：false-->获取自身高度+padding+border；
$('i1').outerHeight(true)  // 获取自身高度+padding+border+margin；
</script>

拖动面板示例：

注意这里直接使用#title方式不是太好。

<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move'); // 当鼠标放倒对象上时，光标设置为'move'样式
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>
</body>

7.1、jQuery绑定事件及示例

绑定事件知识点：

  // DOM： 三种绑定方式（直接绑定;先获取Dom对象再绑定；同时绑定多个事件addEventListener)
  // jQuery：四种
    // 第一种： 获取jQuery对象，再绑定
    $('.c1').click()
    $('.c1').....

    // 第二种： 获取jQuery对象，再绑定，还可以解绑，用bind，ubind
    $('.c1').bind('click',function(){  // 绑定
    })

    $('.c1').unbind('click',function(){  // 解绑
    })

    // 第三种：*******有特殊功能，看示例（一开始并没有绑定事件，当点击的时候才给绑定事件） 用delegate, undelegate
    $('.c').delegate('a', 'click', function(){  // 绑定、委托
    })

    $('.c').undelegate('a', 'click', function(){  // 解绑
    })

    // 第四种：上面调用的实际上都是这种 用on, off
    $('.c1').on('click', function(){
    })
    $('.c1').off('click', function(){
    })

示例：添加内容，并自动绑定事件

  <body>
      <input id="t1" type="text" />
      <input id="a1" type="button" value="添加" />
      <ul id="u1">
          <li>1</li>
          <li>2</li>
      </ul>
  <script src="jquery-1.12.4.js"></script>
      <script>
          $('#a1').click(function () {
              var v = $('#t1').val();
              var temp = "<li>" + v + "</li>";
              $('#u1').append(temp);
          });
  //      第三种绑定方式
          $('ul').delegate('li','click',function () {
              var v = $(this).text();
              alert(v);
          })
  //      第一种绑定方式
  //        $('ul li').click(function () {
  //            var v = $(this).text();
  //            alert(v);
  //        })
  //      第二种绑定方式
  //        $('ul li').bind('click',function () {
  //            var v = $(this).text();
  //            alert(v);
  //        })
  //      第四种绑定方式
  //        $('ul li').on('click', function () {
  //            var v = $(this).text();
  //            alert(v);
  //        })
      </script>
  </body>

7.2、JQuery事件之阻止事件发生及示例：表单验证

a标签是不是默认有个onclick事件，如果再给绑定一个onclick事件会怎么样？

默认：先执行绑定事件，在执行a标签的默认事件。

阻止事件发生
    return false
# 当页面框架加载完成之后，自动执行
$(function(){
    $(...)
})

示例：

<body>
    <!--Dom方式：onclick里需要加return-->
    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>
    <!--jQuery方式：-->
    <a id="i1" href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // Dom方式：
        function ClickOn() {
            alert(123);
            return true;  // true：执行后面操作，dom绑定里需要加return
        }
        // jQuery方式：
        $('#i1').click(function () {
            alert(456);
            return false;  // false：不执行后面操作
        })
    </script>
</body>

示例：表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <!--功能：输入值：运行提交；未输入：不允许提交-->
    <form id="f1" action="s5.html" method="POST">
        <div><input name="n1" tex = "用户名" type="text" /></div>
        <div><input name="n2" tex = "密码" type="password" /></div>
        <div><input name="n3" tex = "邮箱" type="text" /></div>
        <div><input name="n4" tex = "端口" type="text" /></div>
        <div><input name="n5" tex = "IP" type="text" /></div>

        <input type="submit" value="提交" />
        <!--<img src="...">-->
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
//        // 当页面框架加载完毕后，自动执行，比如加载图片，框加载后，图片还没加载，函数就执行了
//        $(function(){
//
//        });
        $(function(){
            // 当页面所有元素完全加载完毕后，执行
            $(':submit').click(function () {
                $('.error').remove();  // 先清空错误样式
                var flag = true;  // 创建局部变量
                $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                    var v = $(this).val();
                    var n = $(this).attr('tex');
                    if(v.length <= 0){
                        flag = false;
                        var tag = document.createElement('span');
                        tag.className = "error";
                        tag.innerHTML = n + "必填";
                        $(this).after(tag);
                        // return false;  // 加上false后，第一个不合法，后面不通过
                    }
                });
                return flag;
            });
        });
//        $(':submit').click(function () {
//            var v = $(this).prev().val();
//            if(v.length > 0){
//                return true;
//            }else{
//                alert('请输入内容');
//                return false
//            }
//        })
    </script>
</body>
</html>

五、jQuery 扩展

如果想自定义jQuery功能，可以如下定义：

$.extend $.方法
$.fn.extend $(..).方法

<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        var v = $.wangsen();
        alert(v);
//        $('#i1').css()
//        $.ajax()
        // 第二种写法：.fn.extend
        $.fn.extend({
            "name1": function () {
                return 'fgf00';
            }
        });
        var v2 = $('#i1').hanyang();
        alert(v);
        // 第一种写法：.extend
        $.extend({
            'name2': function () {
                return 'fgf01';
            }
        });
        var v1 = $.wangsen();
        alert(v);
    </script>
</body>

如果引入第三方jQuery扩展，全局变量、扩展名，可能重复，因此使用还是都定义自执行函数.

(function (arg) {
    var status = 1;
    arg.extend({
       'name': function () {
           return 'fgf';
       }
    });
})(jQuery);

posted on 2017-12-12 16:39 Zoe233 阅读(195) 评论(0) 编辑收藏举报

大纲