ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

6、JQuery

2021-07-20 20:31:18  阅读:89  来源: 互联网

标签:JQuery function color s1 background var css


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


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


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

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

 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>

 

标签:JQuery,function,color,s1,background,var,css
来源: https://www.cnblogs.com/chang09/p/15036885.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有