5、DOM 定时器和 JQuery 选择器

Js中获取元素方式
document.getElementById(id) 通过id属性值获取一个元素
document.getElementsByName(name) 通过name属性值获取元素数组
document.getElementsByTagName(tagName) 通过标签属性值获取元素数组
document.getElementsByClassName()

JS获取元素的值
元素.value 获取文本框、文本域、下拉框的value
元素.textContent 获取p标签、a标签、span标签的文本内容
元素.属性名

JS中给元素赋值
元素.value = 值
元素.textContent = 值

js操作css样式：元素.style.css样式属性 = 值

jQuery
jQuery是一个快速、简洁、开源的JavaScript类库

jQuery注意：
先引用，后使用，
$ is not defined 错误信息: jQuery类库没有引入或者路径不对

注意区别：

el表达式语法： ${} 美元符加大括号
jQuery语法： $() === > jQuery() 美元符加小括号

定时器是DOM的顶级对象 window对象提供的，根据时间触发代码块执行的函数。
setTimeout() 多久执行一次，只执行一次
setInterval() 每隔多久执行一次，执行n次

setInterval(函数,毫秒值)

clearInterval()
clearTimeout()

选择器:selector

jQuery中获取元素的语法： $(selector)
获取元素/操作元素的值: jQuery.action()

基本选择器: $("#id属性值") 通过id属性值获取一个元素
基本选择器: $(".class属性值") 通过class属性值获取多个元素
基本选择器: $("标签名") 通过标签名获取多个元素

属性选择器：语法$("[属性名='属性值']") 通过属性名获取元素

jQuery操作元素的值
获取元素的值：语法： $(选择器).val() 等价于： js中的元素.value
获取元素的值：语法： $(选择器).text() 等价于： js中的元素.textContent
获取元素的值：语法： $(选择器).html() 等价于： js中的元素.innerHtml

设置元素的值：语法： $(选择器).val(值) 等价于： js中的元素.value=
设置元素的值：语法： $(选择器).text(值) 等价于： js中的元素.textContent=
设置元素的值：语法： $(选择器).html(值) 等价于： js中的元素.innerHtml=

获取元素的其他属性： $(选择器).attr("属性名")
设置元素的其他属性值： $(选择器).attr("属性名","属性值")

比如；$(选择器).attr("disabled","true")

基本选择器：（常用）
id选择器
class选择器
标签选择器

层级选择器
后代元素选择器语法： $("祖先元素后代元素") 包括子、子元素的子元素
子元素选择器语法： $("父元素选择器>子元素选择器")
紧邻元素选择器：$("上一个元素+下一个元素") ：获取当前元素紧挨着的下一个元素
相邻元素选择器: $("上一个元素~ 后面的同辈元素") 获取当前元素的后面的所有同辈元素

表单域选择器
表单域属性选择器
位置选择器

比如:
$("#p1 span") : 获取id为p1的所有span标签后代
$("#a>p") ：获取id为a元素的所有p标签子元素
$(".myClass td") ：获取class=myClass的元素的所有 td后代标签
id的元素$("tr>#id") ：获取所有tr标签的子元素中 id=

操作元素的属性：
通过属性名获取元素的属性值： jQuery元素.attr("属性名")
通过属性名获取元素的属性值： jQuery元素.prop("属性名")

设置属性对应的属性值： jQuery元素.attr("属性名","属性值")
设置属性对应的属性值： jQuery元素.prop("属性名","属性值")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    打开的新窗口
    <input type="button" value="关闭" onclick="test_close()">
    <input type="button" value="打开" onclick="test_open()">
</body>
</html>
<script>
    function test_open() {
        window.open("demo02.html","","width=400,height=300")
    }
        function test_close() {
        window.close()
    }
</script>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="开始" onclick="start()">
 9     <input type="button" value="停止" onclick="stop()">
10     <span id="time"></span>
11 </body>
12 </html>
13 <script>
14     var interval ;//定义定时任务参数
15     function start(){
16         interval = setInterval(ck,1000);
17     }
18     function stop() {
19         clearInterval(interval)//将对应的定时任务取消
20     }
21     // setTimeout(ck,1000)
22     function ck() {
23         document.getElementById("time").textContent=new Date().toLocaleString()
24     }
25 </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--设置一个表单，用于定时问卷调查-->
还剩<span id="time">10</span>秒<br>
姓名:<input type="text"  id="username"><br>
你喜欢的语言：<input type="checkbox" onclick="ckAll()">全选<br>
<input type="checkbox" name="hobby">JavaScript
<input type="checkbox" name="hobby">nodeJs
<input type="checkbox" name="hobby">php
<input type="checkbox" name="hobby">Java
<br>
<input type="button" value="好了" onclick="ok()">
</body>
</html>
<script>
    // 设置一个倒计时显示，每秒钟刷新一次计数
    //定义剩余时间
    var time = 10;
    //设置定时任务
    var interval = setInterval(changeTime,1000);
    function changeTime() {
        time--;
        //修改id=time的本文内容
        document.getElementById("time").textContent=time;

        if (time == 0){
            clearInterval(interval)//时间到0，清除任务
            //并在3秒后将表单置为不可用
            setTimeout(ok,3000)

            //当计数为0时，显示“时间到”
            alert("时间到")
        }
    }


    //点击按钮“好了”，所有表单输入项置为不可用
    function ok() {
        //输入框禁用
        // document.getElementById("username").disabled=true;
        //复选框禁用

        //获取所有的input标签
        var arr = document.getElementsByTagName("input");
        //循环数组
        for(var i=0;i<arr.length;i++){
            arr[i].disabled=true;
        }
    }

    //实现全选效果
    function ckAll() {
        var arr = document.getElementsByName("hobby");
        for(var i=0;i<arr.length;i++){
            arr[i].checked=true
        }
    }
</script>

 1 <body>
 2     <input type="button" value="显示" onclick="divShow()">
 3     <input type="button" value="隐藏" onclick="divHide()">
 4     <div id="div01" style="width: 200px;height: 200px;background-color: aquamarine;display: none;">
 5 
 6     </div>
 7 </body>
 8 </html>
 9 <script>
10     function divShow() {
11         //让div显示
12         document.getElementById("div01").style.display="block"
13     }
14     function divHide() {
15         document.getElementById("div01").style.display="none"
16     }
17 </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入需要使用jQuery-->
    <script src="jquery-1.8.2.min.js"></script>
</head>
<body>
    <div ga = 'fasfa' name="c" id="div01">大<div class="a">小</div></div>
    <div id="div02"><h1  name="c"  class="a">张小建</h1></div>

    <input type="text" value="张小建" id="uname">
    <p id="p1">李金诚<a></a></p>
</body>
</html>
<!--javascript 使用方式，第一种直接嵌入倒html
第二种外部引入-->
<script>
    //写js代码
    //写封装之后的jQuery代码
    console.log($("#div01")) //获取id
     console.log($("div"))  //获取所有的div
     console.log($(".a"))  //获取所有的div

    //用js获取输入框的值
     alert(document.getElementById("uname").value)
    //用jQuery方式获取
     alert($("#uname").val())

    //用jQuery方式
     alert($("#p1").text())
    alert($("#p1").html())


    //给元素赋值
    $("#uname").val("赵磊")
    $("#p1").text("<h1>赵磊</h1>")
     $("#p1").html("<h1>赵磊</h1>")


    //js操作样式
    document.getElementById("p1").style.color="red"
     $("#p1").css("color","green")

</script>

posted @ 2021-07-20 20:19 CHANG_09 阅读(91) 评论(0) 编辑收藏举报

刷新页面返回顶部

CHANG_09

5、DOM 定时器 和 JQuery 选择器

公告

5、DOM 定时器和 JQuery 选择器