jQuery

作者: Daeeman | 来源:发表于2020-08-25 12:22 被阅读0次

基本语法
效果
jQ html
jQ Ajax

jQuery概述

jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team。

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。

安装和使用

通过访问http://www.jquery.com获得最新的jQuery版本,当前最新版本为:3.4.1
jQuery库类型说明：

完全版jquery-3.4.js 用于测试和开发（未压缩，是可读的代码）

压缩版jquery-3.4.min.js 用于实际的网站中，已被精简和压缩

两个版本代码相同，只是在压缩版中去掉了相关注释

入口函数

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者简写为
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入口函数</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            // var h1=$("#hh");
            // h1 赋值为 jQuery选择id为hh的元素
            alert($("#hh").html())

        })
        // $ 是jQuery的意思
        // $() jquery  的主方法
        // $(function(){})
        // 等待整个HTML文档加载完毕再执行匿名函数里面的方法
        // jQuery入口函数
        // $("字符串")  jQuery  css选择器
        // .html      获取元素标签中间内容
    </script>
</head>
<body>
    <h1 id="hh">你好,明天</h1>
</body>
</html>

jQuery对象与DOM对象转换

定义DOM对象
在jQuery库中，$就是jQuery的一个简写形式。
如：$(“#id”) 等价于jQuery(“#id”)

⚠️ 在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法，以免在同时使用JavaScript和jQuery时发生冲突。

JavaScript方式

 var id=document.getElementById(“id”);

jQuery方式

 var $id=$(“#id”);

说明：jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象

jQuery事件方法初探

jQ 事件和js的事件名称是一致的，事件名不带on

 $(“button”).click(function(){
     // 事件操作
 })

JQ中显示隐藏对象

// $(".block").hide()   隐藏
// $(".block").fadeOut();  淡出
// $(".block").slideUp(); 向上滑出
// $(".block").show();  显示
// $(".block").fadeIn();  淡入 
// $(".block").slideDown(); 向下滑入
// $(".block").fadeToggle();  切换淡入淡出
$(".block").slideToggle("slow");  //切换滑入滑出

高级用法：速度与回调函数
fadeIn(speed,[callback] )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入口函数</title>
    <style>
        .block{
            width: 500px;
            height: 500px;
            background-color: yellow;
            text-align: center;
            display: none;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        // 单击按钮弹出“你好”
        // 单击按钮隐藏block     淡出
        //  单击按钮显示block
        //  单击按钮切换显示或者隐藏
        $(function(){
            $("button").click(function(){
                // alert("哈喽hello");
                // $(".block").hide()           隐藏
                // $(".block").fadeOut();       淡出
                // $(".block").slideUp();       向上滑出
                // $(".block").show();          显示
                // $(".block").fadeIn();        淡入 
                // $(".block").slideDown();     向下滑入
                // $(".block").fadeToggle();    切换淡入淡出
                $(".block").slideToggle("slow");        //切换滑入滑出        
            })
        })  
    </script>
</head>
<body>
    <button>点我呀</button>
    <div class="block">
        你能拿我怎么样
    </div>
</body>
</html>

操作元素中的内容：

设置：

.html(“str”)  设置元素的里面的内容 可用带html标签
.text(“str”)  设置元素的里面的内容 可用不带html标签
.val(“str”)   设置表单的值

获取

.html()    .text()    .val()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入口函数</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
    // 获取sp里面内容
    // 中国改成祖国
    // 修改sp里面的内容为  欢度祖国70周年生日  70要
    $(function(){
        // alert($(".sp").text())
        $(".sp").html("欢度祖国<i>70</i>周年生日")
    })

    // html  获取标签内html内容
    // text  获取标签内的文本（过滤所有的html标签）
    // text()没有参数是获取内容，有参数是设置内容
    // html()没有参数是获取html内容，有参数是设置html内容

    </script>
</head>
<body>
    <p class="sp" title="选择">你好<b>中国</b>，祝你幸福</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入口函数</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        // 获取表单的值
        $(function(){
            // alert($("input").val())
            $("input").val("0.618");
        })
        // val()括号里面没有参数的时候  获取表单的值，有参数是设置表单的值
    </script>
</head>
<body>
    <input type="text" value="神奇的值">
</body>
</html>

样式操作

设置单条样式

.css(“属性名”，”属性值”)

设置多条样式

.css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

获取样式值

.css(“属性名”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <style>
        .block{
            background: #00f;
            width: 500px;
            height: 500px;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
    // 获取block的文字大小
    // 单击按钮  让block的文字变大
    // 单击按钮  让block的文字在原有基础上增大5px
    // 单击按钮  让block 文字变成22px  粗体 绿色
        $(function(){
            $("button")
                .click(function(){
                    // $(".block").css("font-size","22px")
                    // $(".block").css("font-size","+=5")
                    // $(".block")
                    // .css("font-size","22px")
                    // .css("font-weight","900")
                    // .css("color","green")
                    $(".block").css({
                        "font-size":"22px",
                        "font-weight":"900",
                        "color":"green"
                    })

                })
                // css(属性名) 获取css的属性值
                // css(属性名，属性值) 修改元素的css
                // css支持链式写法,如果选择的对象一致的,可以直接点+下一行内容
                // css支持对象表示方法
        })
    </script>
</head>
<body>
    <button>按钮</button>
    <div class="block">
        block内容
    </div>
</body>
</html>

类操作

增加类 可增加/删除多个类

.addClass(“类名1 类名2 ……”)  多个类名之间用空格隔开

删除类

.removeClass(“类名”)

.toggleClass(“”)  
.toggleClass(“类名”,true/false)  用来判断样式类添加还是移除的 布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <style>
        .block{
            background: #00f;
            width: 500px;
            height: 500px;
        }
        .biger{
            font-size:22px;
            font-weight: 900;
            color: green;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
    // 单击按钮 给block添加个class
    // 单击按钮 已经有biger了删除biger类
    // 单击按钮 切换biger
        $(function(){
            $("button")
                .click(function(){
                    // $(".block").addClass("biger");
                    // $(".block").removeClass("biger");
                    $(".block").toggleClass("biger");

                })
                // addClass(类名) 添加class 不要点
                // removeClass(类名)移除class
                // toggleClass切换 class
        })
    </script>
</head>
<body>
    <button>按钮</button>
    <div class="block">
        block内容
    </div>
</body>
</html>

属性操作

获取属性获取元素的属性

attr("属性名");  .attr(“title”) 获取元素的title属性

设置属性

.attr(“属性名”,”属性值”)
.attr(“title”,”我爱我的祖国”)  设置元素的title属性为“我爱我的祖国”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <style>
        .block{
            background: #00f;
            width: 500px;
            height: 500px;
        }
        .biger{
            font-size:22px;
            font-weight: 900;
            color: green;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
    // 单击按钮 获取h1的title属性
    // 单击按钮 设置h1的title属性为 国庆7天乐逍遥
        $(function(){
            $("button")
            .click(function(){

                // var t = $("h1").arrt("title");
                // alert(t)
                $("h1").arrt("title","国庆7天乐逍遥");    
            })
        })
        // attr（属性）获取元素的属性
    </script>
</head>
<body>
    <button>按钮</button>
    <h1 title="普天同庆70周年华诞">我爱我的祖国</h1>
</body>
</html>

表单属性操作prop

获取属性获取元素的属性

prop("属性名");  .prop(“checked”) 获取表单的选中属性

设置属性

.prop(“属性名”,”属性值”)
.attr(“disabled”,”true”)  设置表单元素不可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <style>
        
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        // 勾选同意按钮   按钮才可以点击
        // 如果g的值为选中状态  按钮才可以用
        $(function(){
            $("#g").click(function(){
                var v = $("#g").prop("checked");
                // 通过prop获取表单的checked属性值
                if(v==true){
                    $(".btn").prop("disabled",false)
                    // 如果是勾选的  让按钮可以使用
                }else{
                    $(".btn").prop("disabled",true)
                }
                // 如果非勾选  让按钮不可以使用
            })
            // 给按钮添加一个单价事件弹出  响应文字
            $(".btn").click(function(){
                alert("我可以被点击了");
            })
        })
        // attr  获取的值是初始值  表单的值是动态的要有  prop
    </script>
</head>
<body>
    <p><input type="checkbox" id="g">阅读并同意条款</p>
    <p><input type="button" value="提    交" class="btn" disabled=""></p>
</body>
</html>

jQuery

jQuery概述

安装和使用

入口函数

jQuery对象与DOM对象转换

jQuery事件方法初探

JQ中显示隐藏对象

操作元素中的内容：

样式操作

类操作

属性操作

表单属性操作prop

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读