6、JQuery语法
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("属性名","属性值")
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.8.2.min.js"></script> 7 </head> 8 <body> 9 <input type="button" value="摇号" onclick="yaohao()"> 10 <input type="button" value="重大到小排序" onclick="sort()"> 11 <input type="button" value="计算和" onclick="sum()"><br> 12 <span id="sp"></span><br> 13 <span id="sp1"></span> 14 </body> 15 <script> 16 var arr=new Array(10); 17 function yaohao(){ 18 var str=""; 19 for (var i=0; i<10; i++){ 20 var random=Math.floor(Math.random()*100)+1; 21 arr[i]=random; 22 str+= "第"+(i+1)+"个随机数是："+arr[i]+"<br>" 23 $("#sp").html(str) 24 } 25 } 26 function sort(){ 27 for (var i=1;i<arr.length;i++){ 28 for(var j=0; j<arr.length-i; j++){ 29 if (arr[j]<arr[j+1]){ 30 var t=arr[j]; 31 arr[j]=arr[j+1]; 32 arr[j+1]=t; 33 } 34 } 35 } 36 var str=""; 37 $("#sp").html(str) 38 for (var i=0; i<arr.length; i++){ 39 str+= "第"+(i+1)+"个随机数是："+arr[i]+"<br>" 40 $("#sp").html(str) 41 } 42 } 43 function sum(){ 44 var sum=0; 45 for (var i=0; i<arr.length; i++){ 46 sum+=arr[i]; 47 $("#sp1").html("十个数的累计和为"+sum) 48 } 49 } 50 51 </script> 52 53 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.8.2.min.js"></script> 7 </head> 8 <body> 9 征集意见界面<br> 10 <textarea id="text1" rows="5" cols="50" onkeyup="tip2()"></textarea><br> 11 <span id="s1" >请输入意见（50个以上字符）</span><br> 12 <input id="button" type="button" value="提交意见" disabled="true" onclick="if (confirm('确定要提交吗？'))alert('您的意见已提交')"> 13 <br><br> 14 <input type="button" value="one-div" style="background-color: red" onclick="changeDiv01()"> 15 <input type="button" value="two-div" style="background-color: dodgerblue" onclick="changeDiv02()"> 16 <input type="button" value="three-div" style="background-color: green" onclick="changeDiv03()"> 17 <input type="button" value="four-div" style="background-color: darkgray" onclick="changeDiv04()"> 18 <div id="div01" style="width: 500px; height: 100px; border: 1px solid black">one</div> 19 <div id="div02" style="width: 500px; height: 100px; border: 1px solid black">two</div> 20 <div id="div03" style="width: 500px; height: 100px; border: 1px solid black">three</div> 21 <div id="div04" style="width: 500px; height: 100px; border: 1px solid black">four</div> 22 <script> 23 function tip(){ 24 var s1=document.getElementById('s1') 25 var text1=document.getElementById("text1") 26 var button=document.getElementById("button") 27 s1.textContent='您输入的字符数是：'+text1.value.length+'/50' 28 if (text1.value.length>=50){ 29 // s1.innerText="" 30 s1.style.color='green' 31 button.disabled="" 32 }else{ 33 s1.style.color='red' 34 button.disabled="true" 35 } 36 } 37 function tip2(){ 38 let s1=$('#s1'); 39 let text1=$('#text1') 40 let b=$('#button') 41 s1.html('您输入的字符数是：'+text1.attr("value").length+'/50') 42 if (text1.attr("value").length>=50){ 43 s1.html(null) 44 // s1.css("color","green") 45 b.prop("disabled",false) 46 }else{ 47 s1.css("color","red") 48 $('#button').prop("disabled",true) 49 } 50 } 51 // $('#button').click( 52 // function (){ 53 // if (confirm("确定提交吗？")){ 54 // alert("提交成功") 55 // }else{ 56 // alert("取消提交") 57 // } 58 // } 59 // ) 60 function changeDiv01(){ 61 var color=$("#div01").css("background-color") 62 // alert(color); 63 // alert(typeof color) 64 if (color=="rgba(0, 0, 0, 0)"){ 65 $("#div01").css("background-color","red") 66 }else{ 67 $("#div01").css("background-color","rgba(0, 0, 0, 0)") 68 } 69 } 70 function changeDiv02(){ 71 var color = $('#div02').css("background-color") 72 if (color=="rgba(0, 0, 0, 0)"){ 73 $("#div02").css("background-color","dodgerblue") 74 }else{ 75 $("#div02").css("background-color","rgba(0, 0, 0, 0)") 76 } 77 } 78 function changeDiv03(){ 79 var color = $('#div03').css("background-color") 80 if (color=="rgba(0, 0, 0, 0)"){ 81 $("#div03").css("background-color","green") 82 }else{ 83 $("#div03").css("background-color","rgba(0, 0, 0, 0)") 84 } 85 } 86 function changeDiv04(){ 87 var color = $('#div04').css("background-color") 88 if (color=="rgba(0, 0, 0, 0)"){ 89 $("#div04").css("background-color","darkgray") 90 }else{ 91 $("#div04").css("background-color","rgba(0, 0, 0, 0)") 92 } 93 } 94 </script> 95 </body> 96 </html>
