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=" 500px; height: 100px; border: 1px solid black">one</div>
19 <div id="div02" style=" 500px; height: 100px; border: 1px solid black">two</div>
20 <div id="div03" style=" 500px; height: 100px; border: 1px solid black">three</div>
21 <div id="div04" style=" 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>