Jquery笔记

JQuery对象与DOM对象的区别

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

 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函数)

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

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>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

XUN~MLF

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值