JQuery框架的介绍

最新推荐文章于 2023-04-05 21:18:11 发布

weixin_46837969

最新推荐文章于 2023-04-05 21:18:11 发布

阅读量242

点赞数

分类专栏： JQuery 文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_46837969/article/details/106992781

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery

JavaScript库；本质是一个js文件；其中封装了许多JavaScript原生代码，将各种方法、属性等进行简化；减少我们进行JavaScript编码的步骤；

使用

导包

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    let d = $("#div");
    alert(d.html());
</script>

装换

JQ对象转换为js对象：JQuery[0];
js对象转换JQ对象：$(JavaScript);
JQ对象实际上是一个数组（其中类型为element）

JQuery事件

如果获取的JQ数组包括多个对象，在绑定事件或者解绑时会将其中所有对象绑定或者解绑事件；

绑定事件

<script>
	el = $("#id");
	//方式1（常用）
	el.click(function(){
	    逻辑
	});
	//方式2
	el.on("click",function(){
	  	逻辑
	})
</script>

解绑事件（了解）

<script>
	el = $("#id");
	//方式1
	el.click(function(){
        //解绑一般和某触发事件一起
	    el.off("事件")；
	});
	
</script>

常用事件说明

事件方法	功能
blur()	失去焦点
change()	改变事件
click()	单击事件
dblclick()	双击事件
focus()	得到焦点
keydown()	键盘按下
keyup()	松开键盘
mouseover()	鼠标移上
mouseout()	鼠标移出
submit()	表单提交

循环

循环中获得对象是js对象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历</title>
</head>
<body>
    <input type="button" id="btn" value="遍历列表项">
    <ul>
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>传智专修学院</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一：传统方式
    /*
    $("#btn").click(function(){
        let lis = $("li");
        for(let i=0;i<lis.length;i++){
            alert(i+":"+lis[i].innerHTML);
        }
    });
    */

    //方式二：对象.each()方法
    /*
    $("#btn").click(function(){
        let lis = $("li");
        lis.each(function(index,element){
            alert(index+":"+element.innerHTML);
        });
    });
    */

    //方式三：$.each()方法
    /*
    $("#btn").click(function(){
        let lis = $("li");
        $.each(lis,function(index,element){
            alert(index + ":" + element.innerHTML);
        });
    });
    */
    

    //方式四：for of 语句遍历
    $("#btn").click(function(){
        let lis = $("li");
        for(let li of lis){
            alert(li.innerHTML);
        }
    });
</script>
</html>

选择器

来源于css选择器

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1、id选择器
    let div1=$("#div1");
    alert(div1.length);
    //2、标签选择器
    let div = $("div");
    alert(div.length);
    //3、类选择器
    let divs = $(".cls");
    alert(divs.length);
</script>
</html>

层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
</head>
<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>

    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)
    let spanss = $("div span");//4
    alert(spanss.length)
    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    let spans = $("div > span")
    alert(spans.length);//2
    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    let span = $("span + span");
    for(let sp of span){
        document.write(sp.innerHTML);
    }//S1-2;S2

    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    let s = $("span~span");
    for(let sp of s){
        document.write(sp.innerHTML);
    };//S1-2;S2
</script>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
</head>
<body>
    <input type="text">
    <input type="password">
    <input type="password">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.属性名选择器   $("元素[属性名]")
    let te = $("input[type]");
    alert(te.length);//3

    //2.属性值选择器   $("元素[属性名=属性值]")
    let pa = $("input[type=password]");
    alert(pa.length);//2

</script>
</html>

过滤器选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器选择器</title>
</head>
<body>
    <div>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素选择器	$("A:first");
    let div1 = $("div:first");
    // console.log(div1);

    // 2.尾元素选择器	$("A:last");
    let div2 = $("div:last");
    // console.log(div2);

    // 3.非元素选择器	$("A:not(B)");
    let div3 = $("div:not(#div2)");
    // console.log(div3.length);//3
    // console.log(div3[2].innerHTML);

    // 4.偶数选择器	    $("A:even");
    let div4 = $("div:even");
    // console.log(div4);//2

    // 5.奇数选择器	    $("A:odd");
    let div5 = $("div:odd");
    // console.log(div5);//2

    // 6.等于索引选择器	 $("A:eq(index)");
    let div6 = $("div:eq(1)");
    // console.log(div6);//1

    // 7.大于索引选择器	 $("A:gt(index)");
    let div7 = $("div:gt(1)");
    // console.log(div7);//2

    // 8.小于索引选择器	 $("A:lt(index)");
    let div8 = $("div:lt(1)");
    console.log(div8);//1
</script>
</html>

表单属性选择器

[]形式的属性选择器只能选择写在写在标签中的属性（默认的但没写就不会获取）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性选择器</title>
</head>
<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>---请选择---</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素选择器  $("A:enabled");
    let in01 = $("input:enabled");
    // console.log(in01);//5
    // []形式的属性选择器只能选择写在写在标签中的属性（默认的但没写就不会获取）
    let in001 = $("input[enabled]");
    // console.log(in001);//0

    // 2.不可用元素选择器  $("A:disabled");
    let in02 = $("input:disabled");
    // console.log(in02);//1

    // 3.单选/复选框被选中的元素  $("A:checked");
    let in03 = $("input:checked");
    // console.log(in03);//3
    let in003 = $("input[checked]");
    // console.log(in003);//3

    // 4.下拉框被选中的元素   $("A:selected");
    let in04 = $("select option:selected");
    console.log(in04);//1
</script>
</html>

DOM操作

文本

html()；解析标签

$().html(字符串);如果没传入字符串，则是获取标签的值；如果传了字符串，则可以改变其内容（原内容被覆盖）；可以改变标签

text()；不解析标签

text();传入内容，则改变其文本（覆盖）；不传入获取其内容；无法改变标签

click事件

click();传入参数，则是触发该事件；不传参，则是触发单击事件

val();获取文本框的值

元素增删改查

1、append():父元素将子元素追加到末尾
对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2、appendTo():对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

// <input type="button" value="将反恐放置到city的后面"  id="b1"/>
$("#b1").click(function () {
   //append
   // $("#city").append($("#fk"));
   //appendTo
    $("#fk").appendTo($("#city"));
});

3、prepend():父元素将子元素追加到开头
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
4、prependTo()：
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

// <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
$("#b2").click(function () {
    //prepend
    // $("#city").prepend($("#fk"));
    //prependTo
    $("#fk").prependTo($("#city"));
});

5、after():添加元素到元素后边
对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
6、insertAfter()
对象2.insertAfter(对象1)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

$("#b3").click(function () {
    //after
    // $("#tj").after($("#fk"));
    //insertAfter
    $("#fk").insertAfter($("#tj"));
});

7、before():添加元素到元素前边
对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
8.insertBefore()
对象2.insertBefore(对象1)：将对象2添加到对象1前边。对象1和对象2是兄弟关

// <input type="button" value="将反恐插入到天津前面"  id="b4"/>
$("#b4").click(function () {
    //before
    // $("#tj").before($("#fk"));
    //insertBefore
    $("#fk").insertBefore($("#tj"));
});

9、remove():移除元素
对象.remove():将对象删除掉

 // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
$("#b1").click(function () {
   $("#bj").remove();
});

10、empty():清空元素的所有后代元素。
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

// <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
$("#b2").click(function () {
    $("#city").empty();
});

样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
    <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.css(name)   获取css样式
    $("#btn1").click(function(){
        alert($("#div").css("border"));
    });

    // 2.css(name,value)   设置CSS样式
    $("#btn2").click(function(){
        $("#div").css("background","blue");
    });

    // 3.addClass(value)   给指定的对象添加样式类名
    $("#btn3").click(function(){
        $("#div").addClass("cls1");
    });

    // 4.removeClass(value)  给指定的对象删除样式类名
    $("#btn4").click(function(){
        $("#div").removeClass("cls1");
    });

    // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
    $("#btn5").click(function(){
        $("#div").toggleClass("cls1");
    });
    
</script>
</html>

操作属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作属性</title>
</head>
<body>
    <input type="text" id="username"> 
    <br>
    <input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;
    <input type="button" id="btn2" value="给输入框设置value属性">
    <br><br>

    <input type="radio" id="gender1" name="gender">男
    <input type="radio" id="gender2" name="gender">女
    <br>
    <input type="button" id="btn3" value="选中女">
    <br><br>
    
    <select>
        <option>---请选择---</option>
        <option id="bk">本科</option>
        <option id="zk">专科</option>
    </select>
    <br>
    <input type="button" id="btn4" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.attr(name,[value])   获得/设置属性的值
    //按钮一：获取输入框的id属性
    $("#btn1").click(function(){
        alert($("#username").attr("id"));
    });
    
    //按钮二：给输入框设置value属性
    $("#btn2").click(function(){
        $("#username").attr("value","hello...");
    });
    

    // 2.prop(name,[value])   获得/设置属性的值(checked，selected)
    //按钮三：选中女
    $("#btn3").click(function(){
        $("#gender2").prop("checked",true);
    });

    //按钮四：选中本科
    $("#btn4").click(function(){
        $("#bk").prop("selected",true);
    });
</script>
</html>

案例1、全选、全不选、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全选">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
                <input style="background:lightgreen" id="reverse" type="button" value="反选">
            </th>
    
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // //全选
    // //1.为全选按钮添加单击事件
    $("#selectAll").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值true
        $(".item").prop("checked",true);
    });


    // //全不选
    // //1.为全不选按钮添加单击事件
    $("#selectNone").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值false
        $(".item").prop("checked",false);
    });


    // //反选
    // //1.为反选按钮添加单击事件
    $("#reverse").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值是目前相反的状态
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>
</html>