52 前端--jQuery1

Posted yzm1017

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了52 前端--jQuery1相关的知识,希望对你有一定的参考价值。

jQuery

1. jQuery介绍

1.jQuery是一个轻量级的、兼容多浏览器的javascript库。

2.jQuery使用户能够更方便地处理html Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

2. jQuery的优势

  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引入

第一种:

下载地址:https://jquery.com/

? 首先需要下载这个jQuery的文件,然后在HTML文件中引入这个文件,就可以使用这个文件中帮我们提供的jquery的接口了。

中文文档:http://jquery.cuishifeng.cn/

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

第二种:链接网络地址

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

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

4. jQuert对象

jquery语法: $(“选择器”); 产生一个jQuery对象

  jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里提供的方法。

? 原生js找到的标签对象称为DOM对象,只能调用DOM对象的方法。

jquery对象和dom对象可以相互转换:

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

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

5. 查找标签

不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器.

基础选择器(同css)

id选择器

$("#id值")

标签选择器

$("标签名")

class选择器

$(".类值")

配合选择器

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

通用选择器

$("*")

组合选择器

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

层级选择器(同css)

x,y是任意选择器

$("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");

基本筛选器(选择后过滤)

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

示例:

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

jQuery事件

模拟对话框

$('#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]
[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表单里面出现的input标签

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

示例:

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

表单对象属性

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

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

6. 筛选器方法

下找 .next:

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

上找 .prev:

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

找父级 .parent:

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

儿子和兄弟

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

找后代 .find

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

筛选 .filter

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

补充

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

7. 标签操作

样式操作

样式类操作:

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

css操作:

单个: $(“”).css()

多个:$(“”).css()

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

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

链式表达式

<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');

位置操作

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();

鼠标滚动

$(window).scroll() # 鼠标滚动触发事件

<!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>

尺寸

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

文本操作

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

取值方法

取值方法:

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']);

示例:

<!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 前端--jQuery1的主要内容,如果未能解决你的问题,请参考以下文章

前端学习-jQuery源码学习

前端多层回调问题解决方案之$.Deferred

前端笔记

购物车前端开发

web前端-JQuery

web前端-JQuery