前端之JQuery

时间  2019-12-02
标签 前端 jquery 栏目 JQuery 繁體版
原文   原文链接

目录css

jQuery介绍

JQuery是一个轻量级的、兼容多浏览器的JavaScript库。html

JQuery 是目前最流行的 JS 框架，并且提供了大量的扩展。python

jQuery 是一个 JavaScript 库。jquery

jQuery 极大地简化了 JavaScript 编程。编程

jQuery 很容易学习。后端

jQuery内容

  1. 选择器
  2. 样式操做
  3. 文本操做
  4. 属性操做
  5. 文档处理
  6. 事件
  7. 动画效果
  8. 插件
  9. each、data、Ajax

使用Jquery数组

须要引入js文件浏览器

至关于python后端的模块，须要提早导过来。app

jQuery 基础语法

经过 jQuery，您能够选取（查询，query） HTML 元素，并对它们执行"操做"（actions）。框架

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

实例:

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏全部

    元素

  • $("p.test").hide() - 隐藏全部 class="test" 的

    元素

  • $("#test").hide() - 隐藏全部 id="test" 的元素

jQuery 查找标签

基本选择器

id选择器

$("#id")

标签选择器

$("p")

class选择器

$(".classname")

配合使用

$("div.c1") 找到class属性为c1的div标签

全部元素选择器

$("*")

组合选择器

$("#id,.classname,p")

<script>
    $(document).ready(function (){
    $("#hide").click(function () {
        $("p").hide()
    })

    $("#show").click(function () {
        $("p").show()
    })
    $("input").click(function () {
        $("p").toggle()
    })
    })
</script>

<button id="hide">隐藏</button>
<button id="show">显示</button>
<input type="button" value="隐藏/显示">
<p>dadlhasduas</p>

层级选择器

$("x y")    //x的全部后代y，子子孙孙
$("x>y")    //x的全部儿子y
$("x+y")    //找到紧挨着在x后面的
$("x~y")    //找到x以后的全部兄弟y

基本筛选器

:first                  // 第一个
:last                   // 最后一个
:eq(index)              // 索引等于index的那个元素
:even                   // 匹配全部索引值为偶数的元素，从 0 开始计数
:odd                    // 匹配全部索引值为奇数的元素，从 0 开始计数
:gt(index)              // 匹配全部大于给定索引值的元素
:lt(index)              // 匹配全部小于给定索引值的元素
:not(元素选择器)         // 移除全部知足not条件的标签
:has(元素选择器)         // 选取全部包含一个或多个标签在其内的标签(指的是从后代元素找)

例子：

$("div:has(h1)")    // 找到全部后代中有h1标签的div标签
$("div:has(.c1)")   // 找到全部后代中有c1样式类的div标签
$("li:not(.c1)")    // 找到全部不包含c1样式类的li标签
$("li:not(:has(a))")// 找到全部后代中不含a标签的li标签

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

例子：

$(":checkbox") // 找到全部的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到全部被选中的option

JQuery筛选器方法

查找下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素

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

儿子和兄弟元素

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

查找find

搜索全部与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选filter

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充：

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

JQuery操做标签

样式操做

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，若是有就移除，若是没有就添加。

示例：开关灯和模态框

CSS

css("color","red")//DOM操做：tag.style.color="red"

示例：

$("p").css("color", "red"); //将全部p标签的字体设置为红色
<style>
        .bg_red {
            border: 3px solid whitesmoke;
            background-color: red;
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }

        .bg_green {
            border: 3px solid whitesmoke;
            background-color: green;
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<p class="bg_red bg_green">p标签的字体</p>
</body>

动态对CSS样式和类操做：

$("p").toggleClass("bg_green")

位置操做

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法容许咱们检索一个元素相对于文档（document）的当前位置。

和 .position()的差异在于： .position()是相对于相对于父级元素的位移。

获取当前页面的滚动条与顶部距离的偏移量

$(window).scrollTop()

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

例子

$("p").height()
21
$("p").width()
1138
$("p").innerHeight()
61

$("p").innerWidth()
1198
$("p").outerHeight()
67
$("p").outerWidth()
1204

文本操做

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置全部匹配元素的html内容

文本值：

text()// 取得全部匹配元素的内容
text(val)// 设置全部匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置全部匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

例子：

不加参数就是获取值
加了参数就是设置值

$("input").val()
""
$("input").val("dsadas")
k.fn.init [input, prevObject: k.fn.init(1)]

$("input").val()
"dsadas"

示例：

获取被选中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可使用：

$("input[name='gender']:checked").val()

属性操做

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为全部匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为全部匹配元素设置多个属性值

例子：

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，能够认为attr是显式的，而prop是隐式的。

举个例子：

<input type="checkbox" id="i1" value="1">

针对上面的代码，

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

能够看到attr获取一个标签内没有的东西会获得undefined，而prop获取的是这个DOM对象的属性，所以checked为false。

若是换成下面的代码：

<input type="checkbox" checked id="i1" value="1">

再执行：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

这已经能够证实attr的局限性，它的做用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

接下来再看一下针对自定义属性，attr和prop又有什么区别：

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行如下代码：

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

能够看到prop不支持获取标签的自定义属性。

总结一下：

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的好比checkbox、radio和option的是否被选中都用prop。

文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除全部匹配的元素。
empty()// 删除匹配的元素集合中全部的子节点。

例子：

点击按钮在表格添加一行数据。

点击每一行的删除按钮删除当前行数据。

替换

replaceWith()
replaceAll()

克隆

clone()// 参数

JQuery事件

经常使用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件绑定

.on( events [, selector ],function(){})`

  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span>贪玩蓝月，是兄弟就来砍我</span>

<script>
    $("span").hover(
        // 当只有一个函数的时候，第一个函数触发两次
        function () {
            alert("来了老弟")
        },
        // 当有两个函数的时候，两个函数依次被触发
        function () {
            alert("走了老弟")
        }
    )
</script>
</body>
</html>

移除事件

  1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

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

阻止后续事件执行

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

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

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

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

页面载入

两种写法：

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写：

$(function(){
// 你在这里写你的代码
})

文档加载完绑定事件，而且阻止默认事件发生：

与window.onload的区别

  • window.onload()函数有覆盖现象，必须等待着图片资源加载完成以后才能调用
  • jQuery的这个入口函数没有函数覆盖现象，文档加载完成以后就能够调用（建议使用此函数）

事件委托

事件委托是经过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

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

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

能够将事件绑定在一个大的标签内，而后再委托给里面的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>


<script>
    $("body").on("click","button",function () {
        alert("123")
    })
    // $("button").click(function () {
    //     alert("123")
    // })
</script>
</body>
</html>

jQuery动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解便可）
animate(p,[s],[e],[fn])

JQuery补充方法

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它能够用来无缝迭代对象和数组。数组和相似数组的对象经过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其余对象经过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出：

010
120
230
340

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每一个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每个DOM元素。每次回调函数执行时，会传递当前循环次数做为参数(从0开始计数)。因为回调函数是在当前DOM元素为上下文的语境中触发的，因此关键字 this 老是指向这个元素。

// 为每个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种状况发生时，它一般不须要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就能够了：

$("li").addClass("c1");  // 对全部标签作统一操做

注意：

在遍历过程当中可使用 return false提早结束each循环。

终止each循环

return false；

伏笔...

.data()

在匹配的元素集合中的全部元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给全部div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—经过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除全部保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

几个小例子

菜单栏展现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
      width: 80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }


    </style>
</head>
<body>
<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>

<script>
    $(".title").click(function () {
        // JQuery链式操做
        // 当用户点击菜单的时候去掉class hide的样式
        $(this).next().removeClass("hide").parent().siblings().find(".items").addClass("hide")
    })
</script>
</body>
</html>

校验用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>注册页面</h1>
<form action="">
    <p>
        username：<input type="text" id="d1">
        <span style="color: red;" class="errors"></span>
    </p>

    <p>
        username：<input type="text" id="d2">
        <span style="color: red;" class="errors"></span>
    </p>
    <input type="button" id="submit" value="提交">
</form>

<script>
    $("#submit").click(function () {
        // 获取用户输入的用户名 密码
        var userNameVal = $("#d1").val()
        var passWordVal = $("#d2").val()
        if (userNameVal.length ===0 ){
            $(".errors").first().text("用户名不能为空")
        }
        if (passWordVal.length ===0 ){
            $(".errors").last().text("密码不能为空")
        }
    })

    // 获取到input输入框的焦点
    var inputEleList = $("input");
    for (let i=0;i < inputEleList.length;i++){
        $(inputEleList[i]).focus(function () {
            // alert("123")
            $(this).next().text("")
        })
    }

    // 原生JS事件
    // var inputEleList = $('input');
    // for(let i=0;i < inputEleList.length;i++){
    //     inputEleList[i].onfocus = function () {
    //         // alert("123")
    //         $(this).next().text('')
    //     }
    // }

</script>
</body>
</html>

屠龙宝刀克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        button {
            border: 3px solid darkgray;
            color: white;
            background-color: red;
            height: 50px;
            width: 100px;
        }
    </style>
</head>
<body>

<button>屠龙宝刀，点击就送</button>

<script>
    $("button").on("click",function () {
        $(this).clone(true).insertAfter(this)
    })
</script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程