1、jquery知识学习。。。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script src="jquery-1.11.2.min.js"></script>
  7 <style type="text/css">
  8 #d1
  9 {
 10     font-size:24px;
 11 }
 12 .list
 13 {
 14     width:200px;
 15     height:30px;
 16     text-align:center;
 17     line-height:30px;
 18     vertical-align:middle;
 19     background-color:#999;
 20     color:#F00;
 21 }
 22 </style>
 23 </head>
 24 
 25 <body>
 26 
 27 <div id="d1" name="div" ><b>第一个DIV</b></div>
 28 
 29 <div class="d">22222</div>
 30 <div class="d">333333</div>
 31 <div class="d">444444</div>
 32 
 33 
 34 <div class="list">hello</div>
 35 <div class="list">world</div>
 36 <div class="list">hai</div>
 37 <div class="list">aaaa</div>
 38 
 39 
 40 <input type="text" bs="uid" />
 41 
 42 
 43 <input type="checkbox" id="aa" value="hello" />
 44 
 45 <input type="button" id='btn' value="取值"/>
 46 
 47 
 48 </body>
 49 <script type="text/javascript">
 50 
 51 //JS取元素，取出来的是具体的元素对象
 52 //var d = document.getElementById("d1");
 53 //alert(document.getElementsByClassName("d"));
 54 //alert(document.getElementsByTagName("div"));
 55 //alert(document.getElementsByName("uid"));
 56 
 57 //操作内容
 58 //alert(d.innerText); //获取文本内容
 59 //alert(d.innerHTML); //获取HTML代码
 60 //d.innerText = "hello"; //给元素赋值（文本）
 61 //d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值（HTML代码）
 62 
 63 //d.value  获取或者设置表单元素的内容
 64 
 65 //操作属性
 66 //alert(d.getAttribute("name")); //获取属性的值
 67 //d.setAttribute("bs","001"); //设置属性
 68 //d.removeAttribute("name"); //移除属性
 69 
 70 
 71 //操作样式
 72 //alert(d.style.fontSize); //获取样式，必须是写在元素里面的
 73 //d.style.fontSize = "36px"; //修改设置样式
 74 
 75 
 76 
 77 $(document).ready(function(e) {
 78     
 79     //Jquery取元素，取出来的是jquery对象
 80     //var d = $("#d1"); //根据ID找
 81     /*var d = $(".d"); //根据CLASS找
 82     
 83     for(var i=0;i<d.length;i++)
 84     {
 85         alert(d.eq(i));
 86     }*/
 87     
 88     //alert($("div")); //根据标签名找
 89     
 90     //alert($("[bs=uid]")); //根据属性找
 91     
 92     //操作内容
 93     //alert(d.text()); //获取元素的内容（文本）
 94     //alert(d.html()); //获取元素的内容（HTML代码）    
 95     
 96     //d.text("hello"); //给元素赋值（文本）
 97     //d.html("<span style='color:red'>hello</span>");    //给元素赋值（HTML代码）
 98     
 99     //d.val(); //操作表单的内容，可以取值赋值
100     
101     
102     //操作属性
103     //alert(d.attr("name")); //获取属性
104     //d.attr("bs","001"); //设置属性
105     //d.removeAttr("bs"); //移除属性
106     
107     //操作样式
108     //alert(d.css("font-size")); //取样式
109     //d.css("font-size","36px"); //设置样式
110     
111     
112     //事件
113 /*    $("#d1").click(function (){
114         
115         alert("aa");
116         
117         })*/
118         
119     
120 /*    $(".d").click(function(){
121         
122         //alert($(this).text());
123 
124         })*/
125         
126     //菜单选中
127     $(".list").click(function(){
128         
129         //让所有元素变为非选中状态
130         $(".list").css("background-color","#999").css("color","#F00");
131         
132         //让该元素变为选中状态
133         $(this).css("background-color","#60F").css("color","#FFF");
134                 
135         })
136         
137     //取checkbox选中值
138     $("#btn").click(function(){
139         
140         if($("#aa")[0].checked)
141         {
142             alert($("#aa").val());
143         }
144         else
145         {
146             alert("未选中！");
147         }
148         
149     })
150             
151 });
152 </body>
153 </html>
posted on 2016-04-01 11:21 悠悠小花阅读(131) 评论(0) 收藏举报