jQuery--基础(操作标签)

jQuery-样式操作

　　.css()

　　　　可以直接使用来获取css的值

　　 .css("color")

　　使用方法，如果想给查找到的标签添加样式：

　　　　.css("color", "red")

　　　　如果一个样式具有多个要添加的属性：

　　　　css("border", "solid 1px green")

　　　如果想要给一个标签添加多个样式的话：

　　　　.css({"color": "red", "font-size": "36px"})

　　位置相关

　　　　获取匹配元素在当前视口的相对偏移：

　　　　　　offset() 可以用来获取也可以用来设置

　　　　获取匹配元素相对父元素的偏移：
　　 position() 只能获取

　　返回顶部

               1. scrollTop()         --> 获取窗口滚动距离

               2. $(window).scroll() --> 滚动触发

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>返回顶部示例</title>
  6 
  7     <style>
  8         .c1 {
  9             height: 50px;
 10         }
 11 
 12         .b1 {
 13             position: fixed;
 14             right: 10px;
 15             bottom: 10px;
 16         }
 17 
 18         .hide {
 19             display: none;
 20         }
 21     </style>
 22 </head>
 23 <body>
 24 
 25 <div class="c1">001</div>
 26 <div class="c1">002</div>
 27 <div class="c1">003</div>
 28 <div class="c1">004</div>
 29 <div class="c1">005</div>
 30 <div class="c1">006</div>
 31 <div class="c1">007</div>
 32 <div class="c1">008</div>
 33 <div class="c1">009</div>
 34 <div class="c1">010</div>
 35 <div class="c1">011</div>
 36 <div class="c1">012</div>
 37 <div class="c1">013</div>
 38 <div class="c1">014</div>
 39 <div class="c1">015</div>
 40 <div class="c1">016</div>
 41 <div class="c1">017</div>
 42 <div class="c1">018</div>
 43 <div class="c1">019</div>
 44 <div class="c1">020</div>
 45 <div class="c1">021</div>
 46 <div class="c1">022</div>
 47 <div class="c1">023</div>
 48 <div class="c1">024</div>
 49 <div class="c1">025</div>
 50 <div class="c1">026</div>
 51 <div class="c1">027</div>
 52 <div class="c1">028</div>
 53 <div class="c1">029</div>
 54 <div class="c1">030</div>
 55 <div class="c1">031</div>
 56 <div class="c1">032</div>
 57 <div class="c1">033</div>
 58 <div class="c1">034</div>
 59 <div class="c1">035</div>
 60 <div class="c1">036</div>
 61 <div class="c1">037</div>
 62 <div class="c1">038</div>
 63 <div class="c1">039</div>
 64 <div class="c1">040</div>
 65 <div class="c1">041</div>
 66 <div class="c1">042</div>
 67 <div class="c1">043</div>
 68 <div class="c1">044</div>
 69 <div class="c1">045</div>
 70 <div class="c1">046</div>
 71 <div class="c1">047</div>
 72 <div class="c1">048</div>
 73 <div class="c1">049</div>
 74 <div class="c1">050</div>
 75 <div class="c1">051</div>
 76 <div class="c1">052</div>
 77 <div class="c1">053</div>
 78 <div class="c1">054</div>
 79 <div class="c1">055</div>
 80 <div class="c1">056</div>
 81 <div class="c1">057</div>
 82 <div class="c1">058</div>
 83 <div class="c1">059</div>
 84 <div class="c1">060</div>
 85 <div class="c1">061</div>
 86 <div class="c1">062</div>
 87 <div class="c1">063</div>
 88 <div class="c1">064</div>
 89 <div class="c1">065</div>
 90 <div class="c1">066</div>
 91 <div class="c1">067</div>
 92 <div class="c1">068</div>
 93 <div class="c1">069</div>
 94 <div class="c1">070</div>
 95 <div class="c1">071</div>
 96 <div class="c1">072</div>
 97 <div class="c1">073</div>
 98 <div class="c1">074</div>
 99 <div class="c1">075</div>
100 <div class="c1">076</div>
101 <div class="c1">077</div>
102 <div class="c1">078</div>
103 <div class="c1">079</div>
104 <div class="c1">080</div>
105 <div class="c1">081</div>
106 <div class="c1">082</div>
107 <div class="c1">083</div>
108 <div class="c1">084</div>
109 <div class="c1">085</div>
110 <div class="c1">086</div>
111 <div class="c1">087</div>
112 <div class="c1">088</div>
113 <div class="c1">089</div>
114 <div class="c1">090</div>
115 <div class="c1">091</div>
116 <div class="c1">092</div>
117 <div class="c1">093</div>
118 <div class="c1">094</div>
119 <div class="c1">095</div>
120 <div class="c1">096</div>
121 <div class="c1">097</div>
122 <div class="c1">098</div>
123 <div class="c1">099</div>
124 <div class="c1">100</div>
125 
126 <button class="b1 hide" onclick="up();">返回顶部</button>
127 
128 <script src="jquery-3.2.1.min.js"></script>
129 <script>
130     // m滚动条每一次滚动的时候，都要作判断
131     $(window).scroll(function () {
132         if ($(window).scrollTop() > 100) {
133             $(".b1").removeClass("hide");
134         } else {
135             $(".b1").addClass("hide");
136         }
137     });
138     function up() {
139         $(window).scrollTop(0);
140     }
141 </script>
142 </body>
143 </html>

返回顶部实例

　　尺寸

              height        本身
           width

             innerHeight   本身加padding
       innerWdth

             outerHeight    本身+paddding + border
             outerWidth

　　　　具体要注意盒子的设计规则

jQuery-文本操作

　　　　text()

　　获取文本 --> 我的和我孩子们的　　

html()

　　获取标签 --> 所有HTMl内容　　

val()

           　　input框的值
          　　 select          --> value
           　　 multipleselect --> value值的数组

　　　　要注意的是.text获取的是自己的和自己所包含的子元素的所有文本

jQuery-属性操作

　　　　prop()

　　适用于checkbox和radio
　　返回值是true或false

attr()

               　　获取其他属性或自定义属性
               　　 $("img").attr("src")
               　　$("img").attr("nid")

jQuery-事件绑定

　　　　.on() 　　

方法绑定，里面是具体的事件，匿名函数里面填写事件触发
               $("#all").on("click", function(){
                  // blablabla...
               })

jQuery-循环

　　　　$(":checkbox").each(function(){
console.log(this);
})

　　　　this就是当前循环到的标签，是一个DOM对象，如果要使用jQuery方法得转换成jQuery对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>作业分解示例</title>
 6     <link rel="stylesheet" href="dist/css/bootstrap.css">
 7     <script src="dist/js/bootstrap.js"></script>
 8 </head>
 9 <body>
10 
11 <table border="1px" class="table table-bordered table-responsive">
12     <thead>
13     <tr>
14         <th>#</th>
15         <th>姓名</th>
16         <th>爱好</th>
17     </tr>
18     </thead>
19 
20     <tbody>
21     <tr>
22         <td><input type="checkbox"></td>
23         <td>Egon</td>
24         <td>杠娘</td>
25     </tr>
26        <tr>
27         <td><input type="checkbox"></td>
28         <td>Alex</td>
29         <td>吹牛逼</td>
30     </tr>
31        <tr>
32         <td><input type="checkbox"></td>
33         <td>苑局</td>
34         <td>日天</td>
35     </tr>
36     </tbody>
37 </table>
38 
39 <button id="all" class="btn btn-info">全选</button>
40 <button id="cal" class="btn btn-warning">取消</button>
41 <button id="rev" class="btn btn-danger">反选</button>
42 
43 <script src="jquery-3.2.1.min.js"></script>
44 <script>
45 
46     $("#all").on("click", function(){
47                   $(":checkbox").prop("checked",true)
48                 });
49     $("#cal").on("click", function(){
50                   $(":checkbox").prop("checked",false)
51                 });
52     $("#rev").on("click", function(){
53                   $(":checkbox").each(function () {
54                       if ($(this).prop("checked")==true){
55                           $(this).prop("checked",false)
56                       }
57                       else {
58                           $(this).prop("checked",true)
59                       }
60 
61                   })
62                 })
63 
64 </script>
65 </body>
66 </html>

checkbox

实例使用了bootstrap，具体请参照http://v3.bootcss.com/getting-started/#download进行cdn导入