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