jQuery快速入门

一、jQuery

1、jQuery是什么？

  1. 是一个工具，简单方便的实现一些DOM操作

  2. jQuery使用户能够更方便地处理HTML、Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。

  3. jQuery是一个轻量级、兼容多游览器的JavaScript库。
  4. jQuery能做的事儿：　　
    1. 查找标签
    2. 修改样式
    3. 事件
    4. Ajax
    5. 插件机制

2、jQuer的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

  2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

  5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

  7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

3、jQuery版本

  • 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

  • 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

  • 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

 

二、jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：例如$("#id").html()。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$。

注意：虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法调用DOM的方法，DOM也无法调用jQuery的方法。

var $variable = jQuery对像
var variable = DOM对象

但是可以将jQuery互相转换对象：

//使用jQuery查找到的是一个列表第一个就是DOM对象
var dom = $("#id")[0];  
//接着就可以使用DOM方法了
dom.innerHTML



//将DOM转为jQuery对象使用jQuery方法
$(dom).html()

 

三、jQuery基础语法

$(selector).action()

jQuery下载链接：jQuery官网

中文文档：jQuery AP中文文档

导入jQuery

<script src="jquery-3.3.1.min.js"></script>

 

四、查找标签

1、基本选择器

  • id选择器
$("#i1")  //根据id进行选择
  • 标签选择器：
$("a")   //标签名例如div、a..........
  • class选择器:
$(".test")    //.类名
  • 配合使用（类似取交集并集）
$("a.test")    //标签.类名   找到有test类并且是a标签
  • 所有元素选择器:
$("*")
  • 组合选择器:
$("#i1,a,div")  //找到所有包含i1、a、div的元素

 

2、层级选择器:

  • x和y可以为任意选择器
$("x y");          // x的所有后代y

$("x > y");      // x的所有儿子y

$("x + y")；    // 找到所有紧挨着x后面的y

$("x ~  y");    // x之后所有的兄弟y

 

3、基本筛选器:

  • first　　-->取第一个值
$("#ul > li:first ")
//取ul下的所有li的第一个li
  • last     -->取最后一个
$("#ul > li:first ")
//取ul下的所有li的最后一个li
  • eq(index)　　-->取索引为index的那个元素
$("ul > li:eq(3)")  
//取ul下的所有li的第四个li
  • even　　-->匹配所有索引值为偶数的元素，从 0 开始计数
$("div > a:even");
//取div下的所有a，取索引值为偶数的元素
  • odd　　-->匹配所有索引值为奇数的元素,从0开始计数
$("div > a:odd");
//取div下的所有a，取索引值为奇数的元素
  • gt(index)　　-->匹配所有大于给定索引值得元素
$("div > a:gt(2)");
//取所有索引值大于2的值
  • lt(index)　　-->匹配所有小于给定索引值得元素
$("div > a:lt(2)");
//取所有索引值小于2的值
  • not(元素选择器)　　-->移除所有满足not条件的标签
$("div > a:not(#i1)");
//移除div下面所有a标签中id为i1的标签。
  • has(元素选择器)　　-->选取所有包含一个或多个标签在内的标签 (指的是从后代元素找)
$("div:has(p)");
//找div标签子子孙孙里面有p标签的div标签。

 

4、属性选择器

  • [attribute]　　-->含有attribute属性的
$("input[id]")   //含有id属性的input标签
  • [attribute=value]　　-->属性等于什么
$("input[type=submit]");  //type属性等于submit的input
  • [attribute!=value]　　-->属性不等于
$("input[type!='submit']");  //type不等于submit的所有input

 

5、表单常用筛选

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
  •  示例：
$(":checkbox")  // 找到所有的checkbox

6、表单属性选择器

:enabled
:disabled
:checked
:selected

 

  • 找到可用的input标签

<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

$("input:enabled") // 找到可用的input标签

 

  •  找到被选中的option：
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

 

 

7、筛选器

  • 下一个元素
$("#d1").next();    //取同级的下一个

$("#d2").nextAll();    //同一级下的所有

$("#d2").nextUntil("#p1")   //从d2开始一直找到p1之前中间的所有

 

  •  上一个元素
$("#p1").prev();        //上一个

$("#p1").prevAll();    //同一级上的所有

$("#p1").prevUntil("#i2")      //从p1开始一直往上找，到i2为止，不包括i2

 

  • 父亲元素

$("#d2").parent();        //父辈元素

$("#id").parents()  // 查找当前元素的所有的父辈元素

$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

 

  • 儿子和兄弟元素

$("#id").children();// 儿子们


$("#id").siblings();// 兄弟们

8、筛选器方法

.first()  // 获取匹配的第一个元素
.last()　 // 获取匹配的最后一个元素
.not() 　 // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() 　 // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() 　　// 索引值等于指定值的元素

 

 

 

五、操作标签

1、样式操作

  •  样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例：
$(".c1").addClass("c2");

$(".c1").removeClass("c2");

$(".c1").hasClass("c1"); 

$(".c1").toggleClass("c2");
  •  直接操作CSS属性
var pEle = document.getElementById("p1")  //原生DOM修改CSS属性


$("#p1").css("color","red")     //jQuery修改CSS属性的值
//注意如果只输属性代表查看属性的值  ("color")    


$("#p1").css({"border": "1px solid black", "color": "blue"})
//同时设置多个属性的值

 

  • 位置
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
  •  尺寸
$(".c1").height()   //获取元素的高
$(".c1").width()    //获取元素的宽

$(".c1").innerHeight();    //内容+padding
$(".c1").innerWidth()

$(".c1").outerHeight();    //内容+padding+边框
$(".c1").outerWidth()

//注意：
$(".c1").xxxxxxx(200)    //里面加值，会修改属性的值。

 

2、文本操作

  • 文本值
$("#d1").text()   //获取匹配元素内容

$("#d1").text("注释是代码之母")  //修改所有匹配元素的内容
  • HTML代码
$("div").html();               // 取得第一个匹配元素的html内容
$("div").html("<h1>你好啊</h1>");     // 设置所有匹配元素的html内容
  •  值
$("input[name='username']").val()       // 取得第一个匹配元素的当前值
$("input[name='username']").(val)       // 设置所有匹配元素的值
$("input[name='username']").val(['dream','male']);   //多个值

3、属性操作

  • 用于ID等或自定义属性：
$("#d1").attr("s1")   //返回第一个匹配元素的属性值

$("#d1").attr("s1","great")   //修改所有匹配元素的属性值

$("#d1").attr({"num":"50","tedian":"gay"}) 
//为所有匹配元素设置多个属性值

$("#d1").removeAttr("tedian")  //从每一个匹配的元素中删除一个属性
  •  注意：

　　在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

  • 用于checkbox和radio
prop() 　　　　// 获取属性
removeProp()  // 移除属性

 

  •  示例：全选、反选、取消
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消练习</title>
</head>
<body>

<button id="b1">全选</button>
<button id="b2">取消</button>
<button id="b3">反选</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>Egon</td>
        <td>喊麦</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Alex</td>
        <td>吹牛逼</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Yuan</td>
        <td>不洗头</td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 全选
    $("#b1").click(function () {
        // 让所有的checkbox选中
        $("table :checkbox").prop("checked", true)
    });
    // 取消
    $("#b2").click(function () {
        // 让所有的checkbox取消选中
        $("table :checkbox").prop("checked", false)
    });
    // 反选
    $("#b3").click(function () {
//        // 找到没有选中的让它们选中
//        $("table input:not(:checked)").prop("checked", true);
//        // 找到所有选中的让它们取消选中
//        $("table input:checked").prop("checked", false);

        // 方法1：循环
        var $checkboxs = $("table input:checkbox");
//        for (let i=0;i<$checkboxs.length;i++){
//            var $currentCheckbox = $($checkboxs[i]);
//            if ($currentCheckbox.prop("checked")){
//                // 如果之前是选中的
//                $currentCheckbox.prop("checked", false);
//            }else {
//                // 之前没有选中
//                $currentCheckbox.prop("checked", true);
//            }
//        }

        for (let i=0;i<$checkboxs.length;i++){
            var $currentCheckbox = $($checkboxs[i]);
            var flag = $currentCheckbox.prop("checked");
            $currentCheckbox.prop("checked", !flag)
        }

    });

</script>
</body>
</html>
View Code

4、文档处理

 

 

 

 

 六、事件

1、常用事件

click(function(){...})
hover(function(){...})  //鼠标放上去触发函数
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

  •  hover示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hover</title>
    <style>
        a {
            text-decoration: none;
        }
        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .stick {
            height: 40px;
            width: 100%;
            background-color: #23282e;
        }

        .stick a {
            color: #cccccc;
        }

        .stick li {
            float: left;
            line-height: 40px;
            margin-right: 15px;
            padding: 0 10px;
        }
        .stick a:hover {
            color: #ff6700;
        }
        .stick li:hover {
            background-color: black;
        }

        .father {
            position: relative;
        }

        .son {
            height: 50px;
            width: 100px;
            background-color: blue;
            position: absolute;
            display: none;
            color: white;
            top: 40px;
            margin: 0;
        }
        .sow {
            display: block;
        }
    </style>
</head>
<body>
<div class="stick">
    <ul>
        <li><a href="">登录</a></li>
        <li><a href="">注册</a></li>
        <li class="father"><a href="" >购物车</a>
            <a href="" class="son">空空如也</a>
        </li>

    </ul>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(".father").hover(
            function () {
                $(".son").addClass("sow");
            },
            function () {
                $(".son").removeClass("sow");
            },
    )
</script>
</body>
</html>
hover事件

  •  keydown和keyup

    // 如何获取用户按下那个按键
    $(window).on("keydown", function (e) {
        console.log(e.keyCode);
        if (e.keyCode === 16){
            flag = true;
        }
    });

    // 绑定一个按键抬起的事件
    $(window).on("keyup", function (e) {
        console.log(e.keyCode);
        if (e.keyCode === 16){
            flag = false;
        }
    });

  •  change

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

$("select").on("change", function () ...}）

综合示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量操作</title>
</head>
<body>
<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Egon</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">

<script src="jquery-3.3.1.min.js"></script>
<script>
  let flag = false;
  //获取用户按下的按键，如果是shift则flag=true
  $(window).on("keydown",function (e) {
    console.log(e.keyCode);   //打印shift的数字
    if (e.keyCode === 16){
      flag = true;
    }
  });

  //如果用户松开按键，则flag=false
  $(window).on("keyup",function (e) {
    if (e.keyCode === 16) {
      flag = false
    }
  });

  //通过change事件检查元素变化
  $("select").on("change",function () {
    let v = $(this).val();    //获取select的值
    // 判断一下当前行是否被选中
    let isCheck = $(this).parent().parent().find("input:checkbox").prop("checked");
    //parent()查找每个段落的带有 "select" 类的父元素
    //find("input:checkbox")查找input里面的checkbox
    //prop("checkbox")获取checkbox属性值,不存在就是假
    //  && 表示  且
    if (flag && isCheck){
      //找到所有被选中的行
      //each循环
      $("input:checked").each(function () {
        console.log($(this).parent().parent().find("select").val());
        $(this).parent().parent().find("select").val(v);
      })
    }

  });
</script>
</body>
</html>
批量操作示例

  • focus和blur事件

当元素获得焦点时，发生 focus 事件。

当元素失去焦点时，发生blur事件

    // 当input框获取焦点时触发
    $("#i1").on("focus", function () {
        console.log(123);
    });
    // 当input框失去焦点时触发
    $("#i1").on("blur", function () {
        console.log($(this).val());
    });

  • input事件

    // 当input框的值发生变化时触发
    $("#i1").on("input", function () {
        console.log($(this).val());
    })

2、事件绑定

.on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数

3、移除事件

.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。

events： 事件
selector: 选择器（可选的）
function: 事件处理函数

4、阻止后续事件执行

return false; // 常见阻止表单提交等

 

  • 注意：

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});
  • 2、3、4示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册示例</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>


<form action="">
    <p>
        <label for="username">用户名</label>
        <input type="text" id="username" name="username">
        <span class="error"></span>
    </p>
    <p>
        <label for="pwd">密码</label>
        <input type="password" id="pwd" name="pwd">
        <span class="error"></span>
    </p>

    <p>
        <input type="submit" id="b1" value="登录">
    </p>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function () {
        var flag = true;
        $(".error").text("");

        var $username = $("#username");
        var $pwd = $("#pwd");
        // 取input框的值判断长度是否为0
        if ($username.val().length === 0){
            // 用户名没有输入, 提示
            $username.next().text("用户名不能为空！");
            flag = false;
        }
        if ($pwd.val().length === 0){
            // 用户名没有输入, 提示
            $pwd.next().text("密码不能为空！");
            flag = false;
        }
        return flag;  // 阻止后续事件的执行
    })
</script>
</body>
</html>
登录注册

 

5、页面载入

页面载入时就运行，当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

  • 第一种写法：
$(document).ready(funtion(){
//这里写js代码
})
  • 第二种写法：
$(function(){
// 你在这里写你的代码
})

 

  • 示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载完执行</title>


</head>
<body>

<div id="d1">div</div>

<!--<script>-->
<!--var d1Ele = document.getElementById("d1");-->
<!--console.log(d1Ele);-->
<!--console.log(d1Ele.innerText);-->
<!--</script>-->

<script src="jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
        var d1Ele = document.getElementById("d1");
        console.log(d1Ele);
        console.log(d1Ele.innerText);
    });

//    $(function () {
//        var d1Ele = document.getElementById("d1");
//        console.log(d1Ele);
//        console.log(d1Ele.innerText);
//    })
</script>
</body>
</html>
View Code

 

 

6、事件委托

  • 语法： .on("事件名称", "选择器", function(){...})
  • 特点：
    • 利用事件冒泡的特点
    • 基于一个已经存在的标签给未来的标签添加事件处理函数
  • 示例：

　　表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

 

 

 

 

 

 








            

            
posted @ 
2018-06-05 20:58 
CLuke 
阅读(153) 
评论(0) 
 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    



	

	

	
	

	

	

	





    

        







    
    Live2D