初识JQuery

卷不动的程序员

于 2024-07-03 14:16:13 发布

阅读量273

点赞数 16

分类专栏： jquery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_49018210/article/details/140150979

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、见识JQuery

jquery是一个js文件，是当前比较流行的javascript函数库，它封装了原生的javascript代码
特点：
- write less，do more
使用
- 想要使用jquery，需要在html页面引入jquery库

案例：实现表格隔行变色

window.onload = function () {
    //获取所有的tr
    let trs = document.getElementsByTagName("tr");
    //下标为偶数：红色，奇数：蓝色
    for (let i = 0; i < trs.length; i++) {
        if (i % 2 == 0) {
            trs[i].style.backgroundColor = "red";
        } else {
            trs[i].style.backgroundColor = "blue"
        }
    }
}

jquery

//用jQuery实现表格的隔行变色
//当页面的内容加载完成后
$(document).ready(function () {
    //所有的jquery代码都写在这里面
    //$("tr")：获取所有的tr,相当于document.getElementsByTagName("tr")
    //下标为偶数：even，奇数：odd
    $("tr:even").css("background-color","red");
    $("tr:odd").css("background-color","blue")
})

$就是jquery，$("#myTab")相当于：document.getElementById("myTab")
$(document).ready(function () {} ) 的作用：等网页全部载入后再执行js代码，所有的变量、方法等都要写在里面

二、JQuery的常用选择器

javascript中获取dom元素的代码太繁琐，所以出现了JQuery选择器

jquery选择器可以帮助我们快速的定位到一个或多个dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div01">第一个div</div>
    <div class="myDiv">第二个div</div>
    <p class="myDiv">第一个p</p>
    <p>这是一段话</p>
    <p>好好学习</p>
    <p>天天向上</p>

    <div id="div02">
        <p>div里面的段落</p>
        <div>内层div
            <p>最内层的段落</p>
        </div>
    </div>
    <ul id="ul01">
        <li>刘备</li>
        <li>关羽</li>
        <li id="li01">张飞</li>
        <li>大乔</li>
        <li>小乔</li>
        <li>黄忠</li>
        <li>马超</li>
        <li>吕布</li>
    </ul>
    <input type="text" name="uname" value="张三">
    <input type="password" name="pwd">
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            //1.基本选择器
            //1.1 id选择器
            $("#div01").css("width","200px");
            $("#div01").css("height","200px");
            $("#div01").css("background-color","yellow");
            //1.2 类选择器
            $(".myDiv").css("width","200px")
            $(".myDiv").css("height","100px");
            $(".myDiv").css("background-color","green");
            //1.3 标签选择器
            alert($("p").length);
            //1.4 组合选择器，用英文逗号分隔
            $("#div01,p").css("font-size", "24px")
            //2.层次选择器
            //将id为div02的div下的所有p标签中的字体设置为16号、隶书
            //2.1后代选择器，指的是所有的后代，包括儿子辈，孙子辈。。。
            $("#div02 p").css("font-size", "16px").css("font-family", "隶书")
            //将id为div02的div下的直接p标签背景色设置为粉色
            //2.2子选择器
            $("#div02>p").css("background-color", "pink")
            //3.过滤选择器
            //3.1获取第一个li
            $("li:first").css("background-color","red");
            //3.2获取最后一个li
            $("li:last").css("background-color","blue")
            //3.3 获取偶数行
            $("li:even").css("font-family","隶书")
            //3.4 获取奇数行
            $("li:odd").css("font-family","微软雅黑")
            //3.5 下标等于3的li
            $("li:eq(3)").css("color","green");
            //3.6 下标小于3的li
            $("li:lt(3)").css("color", "yellow");
            //3.7 下标大于3的li
            $("li:gt(3)").css("color", "pink");
            //3.8 获取id不为li01的标签
            $("li:not(#li01)").css("font-size", "16px")
            //4.属性选择器
            //4.1 选择type为text的dom元素,冒号更侧重于种类，一般用于type
            $(":text").css("border-color","red");
            //或：[]更侧重于属性，一般用于出type之外的其他属性
            $("[type=text]").css("background","yellow")
            //获取name属性值为pwd的元素
            $("[name=pwd]").css("border-color","blue")
        })
    </script>
</body>
</html>

三、jquery选择器的优势

简洁：
有更完善的处理机制

alert($("#aaa").text())
})
//页面中没有id为aaa的元素，报错
alert(document.getElementById("aaa").innerText)

四、jquery的常用事件

DOM加载

$(document).ready(function(){})
//简写为：
$(function(){})

点击事件：click

$(function () {
    //点击按钮就是获取到按钮然后触发按钮的点击方法
    $("#btn").click(function () {
        //val()：如果不传值是获取value属性值，传值是给value属性赋值
        let uname = $("[name=uname]").val();//获取值
        if (uname == "") {
            $("[name=uname]").val("张三")//赋值
        } else {
            alert(uname);
        }
    })
})

双击事件：dblclick()
域的内容被改变：change() 注意：按钮没有这个事件

失去光标和获得光标：blur()、focus()

//输入框获得光标背景色为绿色，失去光标背景色为红色
$("[name=uname]").focus(function(){
    //this: 触发方法的这个对象
    $(this).css("background-color","green");
}).blur(function(){
    $(this).css("background-color","red")
})

合成事件：hover()
- 属于jquery的自定义事件，模拟鼠标悬停，当鼠标移动到元素上时触发第一个函数，当鼠标从元素上移开时触发第二个函数
```
$("#ul01 li").hover(function(){
    $(this).css("color","red")
},function(){
    $(this).css("color","blue")
});
```

五、jquery的常用动画

隐藏和显示

//点击按钮实现ul的显示和隐藏
$("#btn").click(function () {
    //this是按钮，next()是获取下一个元素
    //is(":hidden"):判断元素是否是隐藏状态，隐藏返回true
    /*if ($(this).next().is(":hidden")){
        $(this).next().show(1000);//显示，时间为毫秒，可省略
    } else {
        $(this).next().hide(1000);//隐藏
    }*/
    $(this).next().toggle(1000);

淡入淡出

//点击按钮实现ul的淡入和淡出
$("#btn").click(function () {
    /*if($(this).next().is(":hidden")) {
        //淡入
        $(this).next().fadeIn(2000) //时间为毫秒，可省略
    } else {
        $(this).next().fadeOut(2000)
    }*/
    //简写为：
    $(this).next().fadeToggle(2000)
})

滑动

//点击按钮实现ul的滑动
$("#btn").click(function () {
    /*if($(this).next().is(":hidden")) {
        //滑下来
        $(this).next().slideDown(2000) //时间为毫秒，可省略
    } else {
        $(this).next().slideUp(2000)
    }*/
    //简写为：
    $(this).next().slideToggle(2000)
})

卷不动的程序员

关注

16
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
初识JQuery

(document).ready(function () {} ) 的作用：等网页全部载入后再执行js代码，所有的变量、方法等都要写在里面。$就是jquery，$("#myTab")相当于：document.getElementById("myTab")属于jquery的自定义事件，模拟鼠标悬停，当鼠标移动到元素上时触发第一个函数，当鼠标从元素上移开时触发第二个函数。域的内容被改变：change() 注意：按钮没有这个事件。失去光标和获得光标：blur()、focus()双击事件：dblclick()
复制链接

扫一扫