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=" 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>