table of Contents

jQuery

jQuery

1. jQuery Introduction

1.jQuery is a lightweight, multi-browser compatible JavaScript library.

2.jQuery enable users to more easily handle HTML Document, Events, achieve animation effects, easily interact with Ajax, JavaScript can greatly simplify programming. Its purpose is: "Write less, do more."

2. jQuery advantage

A lightweight JS framework. jQuery core js file only a few dozen kb, will not affect the page loading speed.
Rich DOM selectors, jQuery selection Used easy to use, for example, to find adjacent elements of a DOM object, JS could write several lines of code, and one line of code jQuery to get, then you want a table such as interlaced color, jQuery also get line of code.
Chain expression. jQuery's chaining multiple operations can be written in a single line of code, the more concise.
Events, styles, animation support. jQuery also simplifies the operation css js code readability and also stronger than js.
Ajax operations support. AJAX jQuery simplifies operation, only the rear end of a return communication JSON string format can be done in the front end.
Cross-browser compatible. jQuery basically compatible with the major browsers now, no longer compatible browser issues and headache.
Plug-in extension development. jQuery has a wealth of third-party plug-ins, such as: tree menu, date control, image transition plug-ins, pop-ups, etc. The basic component on the front page has a corresponding plug-in, and do it with jQuery plug-in effects stunning, and can be according to their need to rewrite and package plug-ins, simple and practical.

3. jQuery introduced

The first:

Download: https://jquery.com/

First need to download the jQuery file, and then introduced into this file in an HTML file, you can use jquery to help us provide the interface to this file.

Chinese document: http://jquery.cuishifeng.cn/

<script src="jquery.js"></script>

The second: Link Network Address

bootCDN：https://www.bootcdn.cn/jquery/

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

4. jQuert objects

jquery Syntax: $ ( "selector"); generating a jQuery object

　 jQuery object is an object produced after packaging DOM objects by jQuery. jQuery object is unique to jQuery. If an object is a jQuery object , then you can use the jQuery method was provided.

Methods native js label found objects called DOM object, can only call DOM object.

dom jquery object and the object can be converted to each other:

jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以.

jquery对象转换成DOM对象 +[0]索引：   $(“选择器”)[0]
（通过[]索引找到的对象都是DOM对象）
DOM对象转换成jquery对象 在前面加 $ 符号： $(div)

5. Look for the label

No matter what the labels look for, what selectors must write $ ( ""), quotes write selector.

Base selector (with css)

id selector

$("#id值")

Tag selector

$("标签名")

class selector

$(".类值")

With selectors

$('div.c1')     // 找到类值为c1的div标签

Universal selector

$("*")

Combination selector

$("#id,.className,tagName")

Level selector (with css)

x, y are arbitrary selector

$("x y");   // x的所有后代y（后代）
$("x > y"); // x的所有儿子y（儿子）
$("x + y")  // 找到紧挨在x后面的y(毗邻)
$("x ~ y")  // x之后所有的兄弟y(弟弟)

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div id="d1">
    <ul id="u1">
        <li class="c1">111</li>
        <li class="c2">222</li>
        <li class="c3">333</li>
        <li class="c4">444</li>
        <li class="c5">555</li>
    </ul>
</div>
</body>
</html>


操作：
$("#d1");
$("li");
$(".c1");
$("#u1 li");
$("#u1>li");
$(".c1+li");
$(".c1~li");

Basic filters (filter select)

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

Example:

$("li:first");
$("li:eq(2)");
$("li:gt(2)");
$("li:not('.c4')");
$("div:has('.c1')");

jQuery Events

Simulation dialog box

$('#id').click()    // 绑定事件

$(".c1,.c2").removeClass("c3")  # 删除c1，c2类中的c3值
$(".c1,.c2").addClass("c3") # 将c3值添加到c1，c2类中

// 绑定事件的方法
$('#btn').click(function () {
    // DOM写法：
    $('.mode')[0].classList.remove('hide');
    $('.shadow')[0].classList.remove('hide');
    // jquery写法:
    $('.mode,.shadow').removeClass('hide');
})

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            background:rgba(6,6,6,0.6);
            position: fixed;
            top:0;
            right: 0;
            bottom:0;
            left: 0;
            z-index: 9;
        }
        .case{
            width: 600px;
            height: 400px;
            background-color: white;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -200px;
            margin-left: -300px;
            z-index: 10;
        }
        .case #off{
            float: right;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div style="color: red">欢迎来到-->
    <input type="submit" value="登录" id="reg"></div>

<div class="bg hide" id="d1"></div>
<div class="case hide" id="d2">
    <label for="i1" >用户名:</label>
    <input type="text" id="i1">
    <input type="submit" id='off' value="X">
    <div></div>
    <label for="i2">密&nbsp;&nbsp;&nbsp;码:</label>
    <input type="password" id="i2">

    <script>
        $("#reg").click(function () {
            // $("#d1, #d2").removeClass("hide")
            $(".bg,.case").removeClass("hide")
        });
        $("#off").click(function () {
            $("#d1, #d2").addClass("hide")
        })
    </script>
</div>
</body>
</html>

Attribute selectors

$("[属性]");
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于


示例：多用于input标签

<div id = 'd2'>
    用户名：<input type="text" class="i1">
    密码：<input type="password" name="pwd">
    性别：<input type="radio" name="sex">男
    <input type="radio" name="sex">女
</div>

操作：
$("input[type]");
$("input[type='text']");
$("input[type='radio']");

Form Filter

Used for input label to find form which appeared in the form of

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

Example:

$(":text");     //找到所有的text
$(":radio")     //找到所有的radio

Form Object Properties

:enabled        // 找可用的标签
:disabled       // 废除
:checked        // 选中的  
:selected       // 下拉框选中的

示例：
$(“:enabled”);  // 找可用的标签
$(":disabled"); // 找不可用的标签
$(":checked");  // 找选中的标签（checkbox的）
$(":selected"); // 找下拉框中选中的标签
$(":selected").text();      //查看下拉框选中的文本内容

6. Filter Method

Next find .next:

$("#id").next()     // 下一个标签
$("#id").nextAll()  // 下全部标签
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

On looking .prev:

$("#id").prev()     // 上一个标签
$("#id").prevAll()
$("#id").prevUntil("#i2")   // 从上找，顺序从下向上

Find parent .parent:

$("#id").parent()   // 找父辈
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

Sons and brothers

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

Looking offspring .find

$("div").find("p")  // 等价于$("div p")  找div后代p标签

Screening .filter

$("div").filter(".c1") //等价于 $("div.c1") 找有class='c1'属性的div

supplement

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

7. Label operation

Style operations

Style class action:

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

css operations:

Single: $ ( "") css ().

A plurality of:. $ ( "") Css ({})

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

示例：
$('div').css('background-color','green');
$('div').css({'background-color':'yellow','width':'400px'});

Chain Expression

<ul>
    <li>111</li>
    <li>222</li>
    <li class="c1">333</li>
    <li>444</li>
    <li>555</li>
    <li class="c2">666</li>
    <li>777</li>

</ul>

操作      $('li:first').next().css('color','green').next().css('color','red');

Operating position

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop()  //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向右移动的距离

$(".c1").offset()   // 查看相对当前窗口的位置
$(".c1").offste({top:100,left:200});    // 设置位置

$(".c2").position() //查看相对父级的位置

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。与 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

        <style>
            body{
                margin: 0;
            }
            .c1{
                background-color: red;
                height: 100px;
                width: 100px;
                display: inline-block;

            }
            .c2{
                background-color: green;
                height: 100px;
                width: 100px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="cc">
        <div class="c1"></div><div class="c2"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">
        </script>
 </body>
</html>

操作：
$(".c1");
$(".c1").offset();
$(".c1").offset({top:100,left:200});
$(".c1").position();

Mouse scroll :

$ (window) .scroll () # mouse scroll trigger event

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1,.c3{
            width: 200px;
            height: 400px;
            background-color: red;

        }
        .c2{
            width: 200px;
            height: 800px;
            background-color: pink;
        }
        .a1{
            width: 80px;
            height: 20px;
            text-decoration: none;
            position: fixed;
            right:40px;
            bottom: 40px;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<a id="top">顶部</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<a href="#top" class="a1 hide">回顶部</a>

<script>
    $(window).scroll(function () {
        if ($(window).scrollTop()>400){
            $(".a1").removeClass("hide");
        }else{
            $(".a1").addClass("hide");
        }
    });
</script>

</body>
</html>

size

height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()

示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height:200px;
            padding:20px 30px;
            border:2px solid red;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div class="c1"></div>
</body>
</html>

操作：
$(".c1").height();      // 200
$(".c1").width();       // 200
$(".c1").innerWidth();  // 260
$(".c1").innerHeight(); // 240
$(".c1").outerHeight(); // 244
$(".c1").outerWidth();  // 264

Text manipulation

.html()     // 获取其所有的标签及内容
.html(val)  // 设置内容，识别标签，能够表现出标签的效果
.text()     // 获取所有的文本内容
.text(val)  // 设置内容，不识别标签，将标签作为文本插入进去

Value Method

取值方法：

input文本框： $("[type='text']").val()  // 获取匹配到的值
input单选框radio：
    $("[type='radio']:cheched").val()
input多选框checkbox:（多选需循环取值）
    var d=$("[type="checkbox"]:checked")
    for (var i=0;i<d.length;i++){
        console.log(d.eq(i).val());
    }
    
input下拉框select：(可多选值)
    $("").val



设置值：

文本框：  $(":text").val("xxx");
单选框： $(":radio").val(['1']);
多选框： $(":checkbox").val(["1","3"])
    给单选框或者多选框设置值的时候，只要val方法中的值和标签的value属性对应的值相同时，那么这个标签会被选中。
    $(":radio").val('1');这样设置，不带中括号，会将所有radio的value值都修改为1,产生错误。

单选下拉框：(通过select标签操作)
    $("").val('2');
    或者： $("").val(['2']);
多选下拉框：
    $("").val(['2'，'4']);

Example:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div>
    用户名：<input type="text">
</div>
<div>
    密码：<input type="password" name="pwd">
</div>
<div>
    性别：
    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="2">女
</div>
<div>
    爱好：
    <input type="checkbox" name="hobby" value="3">抽烟
    <input type="checkbox" name="hobby" value="4">喝酒
    <input type="checkbox" name="hobby" value="5">蹦迪
</div>
<div>
    地点：
    <select name="city" id="city" multiple>
        <option value="11">北京</option>
        <option value="12">上海</option>
        <option value="13">深圳</option>
    </select>
</div>
</body>
</html>

操作：
$(":text").val("sd");
$(":radio").val(['2']);
$(":checkbox").val(['3','4']);
$("#city").val(['13','12']);

52 front-end --jQuery1

jQuery

1. jQuery Introduction

2. jQuery advantage

3. jQuery introduced

4. jQuert objects

5. Look for the label

Base selector (with css)

id selector

Tag selector

class selector

With selectors

Universal selector

Combination selector

Level selector (with css)

Basic filters (filter select)

jQuery Events

Simulation dialog box

Attribute selectors

Form Filter

6. Filter Method

Next find .next:

On looking .prev:

Find parent .parent:

Sons and brothers

Looking offspring .find

Screening .filter

supplement

7. Label operation

Style operations

Style class action:

css operations:

Chain Expression

Operating position

size

Text manipulation

Value Method

Guess you like