52 前端--jQuery1

时间：2019-09-21 19:30:47 阅读：102 评论：0 收藏：0 [点我收藏+]

标签：parent 自己 isa sele value scrollto enabled 动画效果多选框

jQuery

jQuery

1. jQuery介绍

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

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

2. jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。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

标签：parent 自己 isa sele value scrollto enabled 动画效果多选框

原文地址：https://www.cnblogs.com/yzm1017/p/11563878.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行