一、选择器
jquery选择器选择出的是jquery对象，加上索引后是DOM对象
$("*") // 选择所有元素
$("div") // 标签选择
$("#id") // id选择
$(".classname") // 类选择
$("div.classname") // 配合使用
$("#id, .class") // 组合选择
// 层级选择器
$("div p") // 后代选择器
$("div > p") // 儿子选择器
$("div ~ p") // 后面的同级
$("div + p") // 毗邻的兄弟
// 属性选择器
$("[name]")
$("[name='xxx']")
$("div[name]")
二、筛选器
:first // 第一个 :last // 最后一个 :eq(n) // 按照索引 :even // 索引为偶数 :odd // 索引为奇数 :gt(n) // 索引大于n :lt(n) // 索引小于n :not(条件) // 移除某些 :has(条件) // 后代符合条件
// 表单筛选器 $(":text") // 找到iform中text类型的input $(":password") $(":radio") $(":checkbox") //表单对象属性 $(":selected") $("input:checked")
筛选器方法：
$("div").next()
$("div").nextAll()
$("div").nextUntil(xxx)
$("div").prev()
$("div").prevAll()
$("div").prevUtil(xxx)
$("div").parent()
$("div").parents()
$("div").parentsUntil(xx)
$("div").childern() // 儿子们
$("div").siblings() // 兄弟们
$("div").first()
$("div").last()
$("div").eq(n)
二、操作样式
1、类名相关
$("div").hasClass("xx")
$("div").addClass("xx")
$("div").removeClass("xx")
$("div").toggleClass("xx")
2、直接操作css
$("div").css("color") // 获取值
$("div").css("color", "red") // 设置一个值
$("div").css({"color":"red", "font-size":"20px"}) // 设置多个值
3、滚动条
$(window).scroll(function) // 绑定滚轮事件 $(window).scrollTop() // 获取滚轮位置 $(window).scrollTop(n) // 设置滚轮位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:1000px; } button{ position:fixed; right:50px;bottom:50px; height:50px;width:100px; } .hide{ display: none; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <button class="hide">返回顶部</button> <script src="jquery.js"></script> <script> var btn = $("button"); $(window).scroll(function(){ if($(window).scrollTop() > 100){ btn.removeClass("hide") }else{ btn.addClass("hide") } }); btn.on("click", function(){ $(window).scrollTop(0); }) </script> </body> </html>
4、文本操作
.html()
.html(xxx)
.text()
.text(xxx)
.val()
.val(xxx)
5、属性操作
.attr("xx") // 获取属性
.attr("xx", "xx") // 设置属性
.attr({"xx":"xx", "xx":"xx"}) // 设置多个值
.removeAttr(xx) // 删除属性
.prop("checked") // 查看checkbox和radio是否被选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>蝇蝇</td> <td>用手</td> </tr> <tr> <td><input type="checkbox"></td> <td>康抻</td> <td>gay in gay out</td> </tr> <tr> <td><input type="checkbox"></td> <td>黄袍哥</td> <td>吹牛逼</td> </tr> </tbody> </table> <hr> <button id="b1">全选</button> <button id="b2">反选</button> <button id="b3">取消</button> <script src="jquery.js"></script> <script> $("#b1").click(function(){ $(":checkbox").prop("checked",1); }); $("#b3").click(function(){ $(":checkbox").prop("checked",0); }); $("#b2").click(function(){ var $checked = $("input:checked"); var $unchecked = $("input:not(:checked)"); $checked.prop("checked",0); $unchecked.prop("checked",1); }) </script> </body> </html>
三、文档操作
jquery中没有创建标签的方法，只能通过原生的createElement。
$(A).append(B) // 把B放入A内部的最后 $(B).appendTo(A) // 把B放入A内部的最后 $(A).prepend(B) // 把B放入A内部的最前面 $(B).prependTo(A) // 把B放入A内部的最前面 $(A).after(B) // 把B放到A外部的后面 $(B).insertAfter(A) // 把B放到A外部的后面 $(A).before(B) // 把B放到A外部的前面 $(B).insertBefore // 把B放到A外部的前面 $(A).remove() // 把A标签删除 $(A).empty() // 把A内部的标签清空 $(A).replaceWiith(xx) // 用xx替换A标签
四、事件委托
$("body").on("click", ".c1", function(){}) // 表示在body标签中，只要含有c1类的标签就绑定一个事件
hover事件，传入两个函数，分别是鼠标移进来和鼠标移出去。
input事件，实时监听input框，只要值发生变化就触发
keydown事件，监听键盘的按下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>Egon</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Alex</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Yuan</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>EvaJ</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Gold</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> </tbody> </table> <input type="button" id="b1" value="全选"> <input type="button" id="b2" value="取消"> <input type="button" id="b3" value="反选"> <script src="jquery.js"></script> <script> // 监听键盘按键 $(window).on("keydown", function(event){ // 如果按键是shift if(event.keyCode == 16){ //监听select框 $("select").change(function(){ // 取到改变的值 var thisVal = $(this).val(); // 将其他被选中的标签页改变 $("input:checked").parent().parent().find("select").val(thisVal); }) } }) </script> </body> </html>
五、动画
$("div").show(500)
$("div").hide(500)
$("div").toggle(500)
$("div").slideUp(500) // 向上收起来
$("div").slideDown(500) // 从上方扑下来
$("div").slideToggle(500)
$("div").fadeOut(500) // 逐渐透明
$("div").fadeIn(500) // 逐渐不透明
$("div").fadeTo(500,0.3)
$("div").fadeToggle(500)
六、each和data
each用来循环，return 表示退出当次循环，return false表示退出each循环
data相当于是保存一个字典，变量名就是一个jquery对象。
$("div").data("k1", "v1")
$("div").data("k1") // 取到v1
$("div").data() // 取到所有值
$("div").removeData(""k1"") // 删除键值
第二部分：Bootstrap
1、容器
container，container-fliud
2、栅格系统
把一行最多分成12列，可以设置标签占多少列
row表示一行，col-md-8表示8列。col-md-offset-4表示空4列