首页 > 其他分享 >jQuery

jQuery

时间：2022-11-05 12:55:25浏览次数：88  
标签：jQuery function 元素 选择器 div click

1. 简介

jQuery是一个快速、简洁的JavaScript代码库（框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性:
a.具有独特的链式语法和短小清晰的多功能接口；
b.具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；
c.拥有便捷的插件扩展机制和丰富的插件。

2. 引入

下载：https://jquery.com/

直接引入：

CDN引入：百度 CDN

<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>

新浪 CDN

<head><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>

3. jQuery准备函数

1.概念:在页面加载完成之后,所触发事件(html标签的雏形加载完成(不包括音频视频)) 
2.jquery语法: $ 关键字 
3.特点
 A.jquery中的准备函数有多种写法
 B.jquery优先js中准备函数先执行
 C.jquery中的准备函数可以执行多次

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <!-- <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> -->
</head>
<body>
    <script>
        window.onload= function() {
            console.log("准备函数-01");
        }

        window.onload= function() {
            console.log("准备函数-02");
        }

        $(document).ready(function(){
            console.log("jquery准备函数-01");
        });

        $(function(){
            console.log("jquery准备函数-02")
        });
    </script>
</body>
</html>

4. jQuery和js之间相互转换

1.js与jquery 不能互相调用其方法与属性 必须进行转换 
2.js ==> jquery 语法: $(js对象) 
3.jquery对象转换为js对象 
 A.jquery对象.get(0) 
 B.jquery[0]

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
    <input type="text" id="uName" value="认真听课">
    <input type="button" id="uname" value="" onclick="showInfo()">
    <script>
        function showInfo() {
            // 获取节点对象js
            var uName = document.getElementById("uName");

            // 将js对象转换为 jquery对象
            var $uName = $(uName);
            // 将jquery对象转为js对象（一）
            var u = $uName.get(0);
            // 将jquery对象转为js对象（二）
            var t = $uName[0];
            console.log(t.value);
        }
    </script>
</body>
</html>

5. jQuery中三种基本选择器

选择器名称 描述
id选择器 $("#选择器名称")
$("#选择器名称")标签选择器 $("标签名称")
类选择器 $(".类名称") 
    <input type="button" value="点击" onclick="showInfo()"/>
    <input type="text" id="uName"/>
    <p>
        <input type="checkbox" name="hobby" value="爱好一"/>爱好一
        <input type="checkbox" name="hobby" value="爱好二"/>爱好二
        <input type="checkbox" name="hobby" value="爱好三"/>爱好三
    </p>
    <p>
        <input type="radio" name="sex" class="sexClz" value="男">男
    </p>

    <script>
        function showInfo(){
            // id选择器
            $("#uName").val();
            // 标签选择器
            $("input");
            // 类选择器
            $(".sexClz");
        }
    </script>

6. jQuery中的事件

注意：jquery中的事件 没有 on前缀
A.blur 失去焦点 
B.focus 获取焦点 
C.mouseout 鼠标移出 
D.mouseover 鼠标移入 
E.hover() 移入与移出 
F.click() 点击事件 
G.dblclick() 双击事件

$("#").click(function(){
	alert("一起玩");
});

$("p").mouseover(function(){
	console.log("鼠标移入")
});
$("p").hover(function(){
	console.log("鼠标移入")
},function(){
	console.log("鼠标移出")
});
$("#ipt").focus(function(){
	$(this).css({"backgorund-color":"red"})
});

7. jQuery动画

7.1. 显示-隐藏

方法名称 方法描述
show(speed,callback) 显示(speed 显示的速度,显示完成后所执行的函数名称)
hide(speed,callback) 隐藏(speed 显示的速度,显示完成后所执行的函数名称)
toggle(speed,callback) 显示隐藏(speed 显示的速度,显示完成后所执行的函数名称) 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    先点击隐藏
    <input type="button" name="" id="btn1" value="显示">
    <input type="button" name="" id="btn2" value="隐藏">
    <input type="button" name="" id="btn3" value="显示与隐藏">
    <div></div>

    <script>
        $("#btn1").click(function(){
            $("div").show(2000,function(){
                alert("显示耗时2s");
            });
        });
        $("#btn2").click(function(){
            $("div").hide(1000,function(){
                alert("隐藏耗时1s");
            });
        });
        $("#btn3").click(function(){
            $("div").toggle(3000);
        });
    </script>
</body>
</html>

7.2. 淡入-淡出

方法名称 方法描述
fadeIn(speed,callback) 淡入(speed 淡入的速度,淡入完成后所执行的函数名称)
fadeOut(speed,callback) 淡出(speed 淡出的速度,淡入完成后所执行的函数名称)
fadeToggle(speed,callback) 淡入淡出(speed 淡出的速度,淡入完成后所执行的函数名称) 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <p>先点击淡出</p>
    <input type="button" id="btn1" value="淡入"/>
    <input type="button" id="btn2" value="淡出"/>
    <input type="button" id="btn3" value="淡入淡出"/>
    <div></div>

    <script>
        $("#btn1").click(function(){
            $("div").fadeIn(1000,function(){
                alert("用了1s时间淡入");
            });
        });

        $("#btn2").click(function(){
            $("div").fadeOut(2000,function(){
                alert("用了2s时间淡出");
            });
        });

        $("#btn3").click(function(){
            $("div").fadeToggle(3000);
        });
    </script>
</body>
</html>

7.3. 滑动效果

方法名称 方法描述
slideDown(speed,callback) 向下滑动
slideUp(speed,callback) 向上滑动
slideToggle(speed,callback) 向上与向下滑动 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <p>先点击向上滑动，收起来</p>
    <input type="button" id="btn1" value="向下滑动"/>
    <input type="button" id="btn2" value="向上滑动"/>
    <input type="button" id="btn3" value="向上向下滑动"/>
    <div></div>

    <script>
        $("#btn1").click(function(){
            $("div").slideDown(1000,function(){
                alert("向下滑动用时1s");
            });
        });

        $("#btn2").click(function(){
            $("div").slideUp(2000,function(){
                alert("向上滑动用时2s");
            });
        });

        $("#btn3").click(function(){
            $("div").slideToggle(3000);
        });
    </script>
    
</body>
</html>

7.4. 自定义动画

语法: 
$(selector).animate({ 
    "属性名":属性值, 
    "属性名":"属性值" 
})

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: salmon;
            /* 一定要加上定位 */
            position: relative;
        }
    </style>
</head>
<body>
    <div>一个块级元素</div>
    <input type="button" id="btn" value="点击">
    <script>
        $("#btn").click(function(){
            $("div").animate({
                "left":"100px",
                "opacity":"0.3", // 设置透明度
                "width":"+=100px",
                "height":"+=100px",
                "height":"toggle"
            })
        });
    </script>
</body>
</html>

8. jQuery操作DOM

8.1. 操作节点

方法名称 方法描述
val() 获取与设置值
text() 设置与获取标签中间内容(不能识别标签)
html() 设置与获取标签中间内容(能识别标签)
prop() 设置获取标签的属性 
<body>
    <div id="did"></div>
    <input type="text" id="inid1">
    <input type="button" name="" id="inid2" value="点击">
    <input type="button" name="" id="inid3" value="设置">
    <input type="button" name="" id="inid4" value="获取">

    <script>
        // 点击“设置”，“点击”按钮失效
        $("#inid3").click(function(){
            $("#inid2").prop("disabled",true);
        });

        // 点击“获取”，弹出“点击”按钮的属性值
        $("#inid4").click(function(){
            alert($("#inid2").prop("disabled"));
        });
    </script>
</body>

8.2. 增加元素

方法名称 方法描述
append() 后面追加
prepend() 前面追加
after() 后面追加
before() 前面追加 
append/prepend 是在选择元素内部嵌入。 after/before 是在元素外面追加。

<body>
    <p>段落p</p>
    <input type="button" name="" id="btn" value="点击">
    <script>
        $("#btn").click(function(){
            // $("p").append("append后面追加一句话");
            // $("p").prepend("prepend前面追加一句话");
            // $("p").after("after后面追加一句话");
            $("p").before("before前面追加一句话");
        })
    </script>
</body>

8.3. 删除元素

方法名称 方法说明
remove() 删除被选元素（及其子元素）(删除自身以及其子元素)
empty() 删除子元素 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        div{
            border: solid 2px rosybrown;
        }
    </style>
</head>
<body>
    <input type="button" name="" id="btn1" value="点击1"/>
    <input type="button" name="" id="btn2" value="点击2"/>
    <div id="did">
        <p>段落p</p>
    </div>
    <script>
        $("#btn1").click(function(){
            $("#did").empty(); // 删除子元素。只是删除里面的文字
        });

        $("#btn2").click(function(){
            $("#did").remove(); // 删除被选元素（及其子元素）。连同样式也一起删除了
        })
    </script>
</body>
</html>

9. jQuery操作样式

9.1. 操作类样式

方法名称 方法描述
addClass() 增加类样式
removeClass() 删除类样式
toggleClass() 增加与删除类样式 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
    <style>
        .getClass{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <input type="button" name="" id="btn1" value="增加类的样式"/>
    <input type="button" name="" id="btn2" value="删除类的样式"/>
    <input type="button" name="" id="btn3" value="增加和删除类的样式"/>
    <div>一个div</div>

    <script>
        $("#btn1").click(function(){
            $("div").addClass("getClass");
        });

        $("#btn2").click(function(){
            $("div").removeClass("getClass");
        });

        $("#btn3").click(function(){
            $("div").toggleClass("getClass");
        });
    </script>
</body>
</html>

9.2. 操作css样式

$("选择名称").css("属性名","属性值"); 设置单个 
$("选择名称").css({"属性名":"属性值","属性名":"属性值",...});

<body>
    <p>一个段落p</p>
    <input type="button" id="btn" value="点击改变css样式"/>
    <script>
        $("#btn").click(function(){
            $("p").css({"color":"red","font-size":"200%"});
        });
    </script>
</body>

10. jQuery其他选择器

10.1. 层级选择器

语法 说明
parent child parent元素 包儿子 包孙子
parent > child parent元素 包儿子 不包括孙子
prve + next prve第一个div兄弟元素
prve ~ next 所有的prve兄弟元素 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
    <input type="button" name="" id="btn" value="点击">
    <div id="did">
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444
            <span>555</span>
        </div>
        <span>666
            <div>777</div>
        </span>
        <span>aaa</span>
        bbb
        <div>ccc</div>
        <span></span>
    </div>
    <div>888</div>
    <div>999</div>

    <script>
        $("#btn").click(function(){
            var arrays = $("#did div");
            var arrays = $("#did > div");
            var arrays = $("#did ~ div");

            for(var i = 0;i < arrays.length;i++) {
                alert($(arrays[i]).text());
            }
            alert($("#did + div").text())
        });
    </script>
</body>
</html>

10.2. attribute属性选择器

- [attribute] 选择器选取带有指定属性的每个元素。
语法：$("[attribute]")
- [attribute=value] 选择器选取带有指定属性和值的每个元素。
语法：$("[attribute=value]")
- [attribute!=value] 选择器选取每个不带有指定属性和值的元素。带有指定的属性，但不带有指定的值的元素，也会被选择。
语法：$("[attribute!='value']")
- [attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。
语法：$("[attribute$='value']")
- *=、~=、|=、^=等等

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
    <a href="#">你好</a>
    <a href="#">世界</a>
    <a href="admin.html">admin</a>
    <a href="login.html">login</a>
    <a href="aa.html">aa</a>
    <a href="bb.html">bb</a>
    <a href="cc.html">cc</a>
    <a>嗯</a>
    <input type="button" name="" id="btn" value="点击">

    <script>
        $("#btn").click(function(){
            // var arrays = $("[href]");
            // var arrays = $("[href='#']");
            var arrays = $("[href^='a']"); // 以a开头的
            for(var i = 0;i < arrays.length;i++) {
                alert($(arrays[i]).html());
            }
        });
    </script>
</body>
</html>

10.3. 过滤选择器

元素 元素
语法 描述
$("p:first") 选取第一个

元素
$("p:last") 选取最后一个

元素
$("tr:even") 选取偶数位置的
$("tr:odd") 选取奇数位置的
$(":eq(index)") 选取带有指定 index 值的元素
$(":gt(index)") 选取 index 值大于指定数字的元素
$(":lt(index)") 选取 index 值小于指定数字的元素
$(":not(selector)") 选取除了指定元素以外的所有元素
... ... 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body> 
    <input type="button" id="btn" value="点击">
    <div>1号元素</div>
    <div>2号元素</div>
    <div>3号元素</div>
    <div>4号元素</div>
    <div>5号元素</div>
    <div>6号元素</div>
    <div>7号元素</div>
    <div>0号元素</div>
   
    <script>
        $("#btn").click(function(){
            alert($("div:first").html()); //选择第一个div元素，html一定要加()
            alert($("div:last").html()); //选择最后一个div元素
            // var arrays = $("div:even"); //even偶数，odd奇数
            // for(var i = 0;i<arrays.length; i++){
            //     console.log($(arrays[i]).html());
            // }
        });
    </script>
</body>
</html>

11. jQuery Validation表单验证插件

1. 必须先导入jQuery核心js
2. 然后导入jQuery Validation核心js
3. 最后导入中文提示信息js

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- jQuery核心js -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!-- jQuery Validation核心js -->
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <!-- 中文提示信息js -->
    <script type="text/javascript" src="js/messages_zh.js"></script>
    <style>
        label {
            color: red;
        }
    </style>
</head>

<body>
    <form id="f1">
        <table border="1" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3">
                    <font color="cornflowerblue" size="5">测试表单</font>
                </td>
            </tr>
            <tr>
                <td>用户名（必填字段，长度范围6~10）</td>
                <td colspan="2"> <input type="text" name="username" /> </td>
            </tr>
            <tr>
                <td>Email（符合邮件格式）</td>
                <td colspan="2"> <input type="text" name="email" /> </td>
            </tr>
            <tr>
                <td>出生日期（日期格式）</td>
                <td colspan="2"> <input type="text" name="birthday" /> </td>
            </tr>
            <tr>
                <td>薪资（数字）</td>
                <td colspan="2"> <input type="text" name="sal" /> </td>
            </tr>
            <tr>
                <td>一天工作时长（值范围6~16）</td>
                <td colspan="2"> <input type="text" name="workForday" /> </td>
            </tr>
            <tr>
                <td>密码（必须填写）</td>
                <td colspan="2"> <input type="text" name="pwd" id="pwd" /> </td>
            </tr>
            <tr>
                <td>确认密码（必须填写，且与密码值要相同）</td>
                <td colspan="2"> <input type="text" name="repwd" /> </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"> <input type="submit" value="注册" /> </td>
            </tr>
        </table>
    </form>

    <script>
        $(document).ready(function(){ // 页面结构加载完执行function
            $("#f1").validate({
                rules:{
                    username:{
                        required:true,
                        rangelength:[6,10]
                    },
                    email:{
                        email:true
                    },
                    birthday:{
                        dateISO:true
                    },
                    sal:{
                        number:true
                    },
                    workForday:{
                        range:[6,10]
                    },
                    pwd:{
                        required:true
                    },
                    repwd:{
                        equalTo:pwd
                    }
                },
                messages:{
                    username:{
                        required:"没有输入用户名"
                    },
                    workForday:{
                        range:"工作时间不足或过长"
                    }
                }
            });
        });
    </script>
</body>

</html>

标签：jQuery,function,元素,选择器,div,click
From： https://www.cnblogs.com/wyzel/p/16859991.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99