Jquery笔记

XUN~MLF

已于 2022-06-20 23:13:11 修改

阅读量304

点赞数

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

于 2022-01-19 15:15:14 首次发布

本文链接：https://blog.csdn.net/XUN__MLF/article/details/122581645

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery对象与DOM对象的区别

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWFVOfk1MRg==,size_20,color_FFFFFF,t_70,g_se,x_16

JQuery对象和DOM的属性方法不互通

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <script src="JQuery.js"></script>
    <script>
       function fun1(){
            $("#one").css("background-color","red");
        }
        function fun2(){
            $(".two").css("background-color","green")
        }
        function fun3(){
            $("div").css("background-color","#bfa")
        }
        function fun4(){
            $("*").css("background-color","yellow")        
        }
        function fun5(){
            $("#one,span").css("background-color","green")
        }
    </script>
    <div id="one" class="two"></div><br>
    <div class="two"></div><br>
    <div></div>
    <span>span</span>
    <br>
    <input type="button" value="选择id为one的元素" onclick="fun1()">
    <input type="button" value="选择class为two的元素" onclick="fun2()">
    <input type="button" value="选择所有div元素" onclick="fun3()">
    <input type="button" value="选择所有元素" onclick="fun4()">
    <input type="button" value="选择id为one与所有span元素" onclick="fun5()">
</body>
</html>

层级选择器

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWFVOfk1MRg==,size_20,color_FFFFFF,t_70,g_se,x_16

Input标签选择器

$(":input标签属性")

Text

Checkbox

Button

submit等

过滤器

基本过滤器：

$("选择器:first")//第一个

$("选择器:last")/最后一个

$("选择器:eq(下标)")下标等于该下标的dom对象

$("选择器:lt(下标)")小于该下标的

$("选择器:gt(下标)")大于该下标的

-------------------------------------------------------

基本属性选择器：

$("选择器[属性名]")

留下满足定位条件并且在声明时为指定属性进行手动赋值的DOM对象

$("选择器[属性名="属性值"]")

留下满足定位条件并且指定属性内容等于属性值的DOM对象

$("选择器[属性名^='值']")

留下满足定位条件并且指定属性内容是以值为开始的

$("选择器[属性名$='值']")

留下满足定位条件并且指定属性内容是以值为结尾

$("选择器[属性名*='值']")

留下满足定位条件并且指定属性内容是包含值的

工作状态选择器:

$("选择器":enabled)

$("选择器":disabled)

$("选择器":checked)

$("选择器":selected)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWFVOfk1MRg==,size_20,color_FFFFFF,t_70,g_se,x_16

html标签属性分类

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWFVOfk1MRg==,size_20,color_FFFFFF,t_70,g_se,x_16

常用函数（prop函数）

4.text函数：innerText

$obj.text("123")：为jquery对象的所有DOM对象的innerText统一赋值[123]

$obj.text():为jquery对象的所有DOM对象的innerText拼接成一个字符串返回

each函数（省去遍历调用同一个函数

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWFVOfk1MRg==,size_20,color_FFFFFF,t_70,g_se,x_16

show() hide()

show display:block

hide: display:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            color: red;
        }
    </style>
</head>
<body>
    <script src="JQuery.js"></script>
    <script>
        function fun1(){
            $("div").show(1000);
        }
        function fun2(){
            $("div").hide(1000)
        }
    </script>
    <div>我是一个div</div>
    <input type="button" value="隐藏div" onclick="fun2()">
    <input type="button" value="展示div" onclick="fun1()">
</body>
</html>

remove() empty()

remove()//把当前标签及其子标签删除

empty()//把当前标签的子标签删除

绑定事件的方式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWFVOfk1MRg==,size_20,color_FFFFFF,t_70,g_se,x_16

2.通过bind绑定（这种方式可以解绑）

Jquery对象.bind("事件名",方法)

事件名 click，change等

Jquery对象.unbind("事件名")//解除该事件绑定

Jquery对象.unbind()//解除该jquery对象的所有事件绑定

<!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>
    <script src="JQuery.js"></script>
    <script>
        
            /*
            $(":button").click(fun1);
            */
           function fun() {
               $(":button:lt(3)").bind("click",fun1);
           }
            function fun1() {
                alert($(this).val());
            }
            function fun2() {
                $(":button:gt(0)").unbind("click");
            }
        
    </script>
    <input type="button" value="我是大哥">  
    <input type="button" value="我是二哥">
    <input type="button" value="我是三哥">
    <input type="button" value="为前三个绑定" onclick="fun()">
    <input type="button" value="为后两个解除绑定" onclick="fun2()">
</body>
</html>

拼接table

<!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>
    <script src="/JQuery/JQuery.js"></script>
    <script>
        var data = {
            "total": 4,
            "emps": [
                { "eno": 7763, "ename": "SMITH", "Salary": 800.0 },
                { "eno": 7760, "ename": "LISI", "Salary": 1800.0 },
                { "eno": 7743, "ename": "ZHANGSAN", "Salary": 1800.0 }
            ]
        }
        window.onload = function () {
            document.getElementById("displaybut").onclick = function () {
                var emps = data.emps;
                var html = "";
                html += "<tr><th>员工部门</th><th>员工名称</th><th>员工薪资</th></tr>";
                for (var i = 0; i < emps.length; i++) {
                    var temp = emps[i];
                    html += "<tr>" + "<td>" + temp.eno + "</td>";
                    html += "<td>" + temp.ename + "</td>";
                    html += "<td>" + temp.Salary + "</td>";
                }
                document.getElementById("table").innerHTML = html;
            }
        }
    </script>
    <input type="button" value="展示table" id="displaybut">
    <table border="1px" width="50%" id="table">
    </table>
</body>
</html>

XUN~MLF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery笔记

JQuery对象与DOM对象的区别JQuery对象和DOM的属性方法不互通基本选择器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document&lt......
复制链接

扫一扫