Jquery
---恢复内容开始---
ID选择器
<div id="test">xx</div>
$("#test") -------->$("#test")[0] //转换为DOM对象
var c=document.getElementById('test') ---> $(c) //转换为jquery
标签选择器：
$('div')
类class选择器：
$('.test')
组合选择器
$("div,input")
层级
$('form input') form下面所有的input
$('form > input') from最近的input
筛选器
$("ul:first") 第一个ul
$("ul:eq(n)") 第n个ul
$("ul:last") 最后一个ul
....
属性选择器：
$("input[type='text']") 获取input下type=text的标签
全选、取消、反选案例
<input type="button" value="全选" onclick="SelectAll(this)" /> <input type="button" value="反选" onclick="Unselect(this)" /> <input type="button" value="取消" onclick="Cancel(this)" /> //table>tr*3>td{$}*3 之后按TAB自动生成表格 <table border="1" width="200px"> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <script src="jquery.js"></script> <script> function SelectAll() { $('input[type="checkbox"]').prop("checked",true); } function Cancel() { $('input[type="checkbox"]').prop("checked",false); } function Unselect() { $('input[type="checkbox"]').each(function () { $(this).prop("checked") ? $(this).prop("checked",false) : $(this).prop("checked",true); // var t=$(this).prop("checked"); //方式二 // if(t){$(this).prop("checked",false)}else {$(this).prop("checked",true)} }); } </script>
筛选器：
next 获取下一个元素
nextAll nextUtil
prev 获取上一个元素
prevAll prevUtil
parent() 获取父元素
children() 获取所有子元素
siblings() 获取兄弟元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .info{ width: 400px; } .header{ /*height: 34px;*/ cursor: pointer; background-color: aqua; } .content{ display: none; } </style> </head> <body> <div class="info"> <div class="item"> <div class="header">菜单一</div> <div class="content">内容一</div> <div class="content">内容一</div> <div class="content">内容一</div> </div> <div class="item"> <div class="header">菜单二</div> <div class="content">内容二</div> <div class="content">内容二</div> <div class="content">内容二</div> </div> <div class="item"> <div class="header">菜单三</div> <div class="content">内容三</div> <div class="content">内容三</div> <div class="content">内容三</div> </div> </div> </body> <script src="jquery.js"></script> <script> $(".header").click(function(){ $(this).nextAll().css("display","block"); $(this).parent('.item').siblings('.item').children('.content').css("display","none"); }); </script> </body> </html>
动画：
<img src="x.jpg" style="display:none">xxx</img>
$("img").show(1000); //将display显示，后面括号里面时间
$("img").hide(1000);
$("img").toggle("slow");
$("img").fadeIn(1000); 淡入
$("img").fadeOut(1000);淡出
$("img").slideToggle(1000); 如果是隐藏的就显示，如果是显示的就隐藏
样式操作：
$("#xxx").css("display",none);
addClass(); 添加样式
removeClass()；删除样式
hasClass()； 判断是否有样式
文本操作：
$("xxx").text() //获取文本信息，或者设置文本信息
$("xxx").val() input系列框里面的值
属性操作：
$("xxx").attr("","") //赋值
$("xxx").attr(""); //取值
---恢复内容结束---
