JQuery
2016-04-29 12:06
218 查看
//基本选择器
//id选择器
$("#one")
//class选择器
$(".mini")
//元素选择器
$("div")
//选择所有
$("*")
//元素，和id
$("span,#two")
//层级选择器
//选择 body 内的所有 div 元素
$("body div")
//在 body 内, 选择子元素是 div 的
$("body > div")
//选择 id 为 one 的下一个 div 元素
$("#one + div")
//选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#two ~ div")
//选择 id 为 two 的元素所有 div 兄弟元素
$("#tow").siblings("div")
//选择 id 为 one 的下一个 span 元素
$("#one").nextAll("span:first")
//选择 id 为 two 的元素前边的所有的 div 兄弟元素
$("#two").prevAll("div")
//基本选择器
//第一个 div 元素
$("div:first")
//最后一个 div 元素
$("div:last")
//class不为 one 的所有 div 元素
$("div:not(.one)")
//选择索引值为偶数的 div 元素
$("div:even")
//选择索引值为奇数的 div 元素
$("div:odd")
//索引值为大于 3 的 div 元素
$("div:gt(3)")
//索引值为等于 3 的 div 元素
$("div:eq(3)")
//索引值为小于 3 的 div 元素
$("div:lt(3)")
//选择所有的标题元素
$(":header")
//选择当前正在执行动画的所有元素
$(":animated")
//选择 id 为 two 的下一个 span 元素
$("#two").nextAll("span:first")
//内容过滤选择器
//含有文本 'di' 的 div 元素
$("div:contains('di')")
//不包含子元素(或者文本元素)
$("div:empty")
//含有 class 为 mini 元素的 div 元素
$("div:has(.mini)")
//含有子元素(或者文本元素)的div元素
$("div:parent")
//可见性过滤选择器
//可见的div
$("div:visible")
//不可见的div，显示时间
$("div:hidden").show(20000)
//不可见的input
$("input:hidden").val()
//属性过滤选择器
//含有 属性title 的div元素
$("div[title]")
//属性title值等于'test'的div元素
$("div[title='test']")
//属性title值不等于'test'的div元素(没有属性title的也将被选中)
$("div[title!='test']")
//属性title值 以'te'开始 的div元素
$("div[title^='te']")
//属性title值 以'est'结束 的div元素
$("div[title$='est']")
//属性title值 含有'es'的div元素
$("div[title*='es']")
//首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("div[id][title*='es']")
//含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("div[title][title!='test']")
//子元素过滤选择器
//选取每个class为one的div父元素下的第2个子元素
$("div.one :nth-child(2)")
//选取每个class为one的div父元素下的第一个子元素
$("div.one :first-child")
//选取每个class为one的div父元素下的最后一个子元素
$("div.one :last-child")
//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$("div.one :only-child")
//表单元素过滤选择器
//对表单内 可用input
$(":text:enabled")
//对表单内 不可用input 赋值操作
$(":text:disabled")
//获取多选框选中的个数
$(":checkbox[name='newsletter']:checked").length
//获取多选框选中的内容
$("select :selected").each(function(){
alert(this.value);
});
//获取下拉框选中的内容
//each是遍历
$("#btn4").click(function(){
$(":checkbox[name='newsletter']:checked").each(function(){
alert(this.value);
});
//表单对象属性
//获得所有可用的节点
$("input:enabled")
//获得所有不可用的节点
$("input:disabled")
//获得所有被选中的节点
$("input:checked")
//获得所有被选中的节点
$("select option:selected")
//对象的方法(空参数为获取，带参数为设置)
.val():获value属性值 $("input").val();
.attr():获取src属性值 $("xx").attr("src");
.each():对对象进行遍历，函数内部的this指正在遍历的而对象
.text():取得文本 $("#xxx").text()
.append():父节点下增加子节点
// $("#city").append("<li id='gmy' name='gmyname'>gmy</li>");
.appendTo():子节点增加到父节点
//$("<li id='gmy' name='gmyname'>gmy</li>").appendTo($("#city"));
.prepend():父节点下增加子节点(最前面)
//$("#city").prepend($("<li id='gmy' name='gmyname'>gmy</li>"));
.prependTo():子节点增加到父节点(最前面)
// $("<li id='gmy' name='gmyname'>gmy</li>").prependTo($("#city"));
.insertAfter():插入到某个节点的后面 $("<li id='gmy'>gmy</li>").insertAfter($("#xxx"));
.after():某节点后插入 $("#xxx").after("<li id='gmy'>gmy</li>");
.insertBefore():什么插入某节点之前 $("<li id='gmy'>gmy</li>").insertBefore($("#xxxx"));
.before():某节点之前插入 $("#xxxx").before("<li id='gmy'>gmy</li>");
.remove():删除节点 $(this).remove();
.empty():清空节点 $("#city").empty();
.replaceAll():替换节点 $("<li>gmy</li>").replaceAll($("#city li:last"));
.replaceWith():替换第二个节点 $("#city li:eq(1)").replaceWith($("<li>gmy</li>"));
.replaceWith():连个节点互换 $("#bj").replaceWith($("#rl"));
.wrapAll():包装所有的li $("#city li").wrapAll("<font color ='red'></font>");
.wrap():包装li $("li").wrap("<font color ='red'></font>");
.wrapInner():包装所有子内容 $("#language li").wrapInner("<font color='red'></font>");
.html():获取HTML代码 alert($("#city").html());
.html():把指定节点中的HTML修改
.focus():聚焦状态 $(":text").focus()
.blur():失焦状态 $(":text").blur()
.hasClass():判断是否有样式 alert($("div").hasClass("SubCategoryBox"));
.removeClass():移除某样式 $("div").removeClass("SubCategoryBox");
.addClass():添加样式 $("div").addClass("SubCategoryBox");
.toggleClass():切换样式 $("div:first").toggleClass("SubCategoryBox");
.css():设置css $("div:first").css("opacity",0.5);
.width()设置元素宽度 $("div:first").width(1000);
.height()设置元素高度 $("div:first").height(20)；
.offset:当前视口的相对偏移 $("div:first").offset().left 有left和top
.is():判断有没有指定表达式 $(".content").is(":hidden");
.show():显示 $(".content").show();
.hide():隐藏 $(".content").hide();
.bind():为事件绑定函数 $(".head").bind("click",function(){});
.mouseover():鼠标经过 $(".head").mouseover(function(){)
.mouseout():鼠标移除 $(".head").mouseout(function(){})
.hover:鼠标移动上去执行第一个，移出第二个 $(".head").hover(function(){},function(){})
.unbind():移出事件 $("#bj").unbind("click");
.toggle():点击执行第一个，在点击执行第二个 $(".head")
.slideDown():下降 $(".content").slideDown(1000);
.slideUp():上升 $(".content").slideUp(1000);
.fadeOut():淡出效果 $(".content").fadeOut(1000);
.fadeIn():淡入效果 $(".content").fadeIn(1000);
.toggle():切换元素的可见状态 $(".content").toggle();
.slideToggle():下降效果 $(".content").slideToggle();
.fadeToggle():淡入效果 $(".content").fadeToggle();
.fadeTo():由不透明到透明 $(".content").fadeTo("slow",0.1);
//响应结尾返回false，阻止冒泡
//例
<script type="text/javascript">
$(function(){
function removeTr(aNode){
var $trNode = $(aNode).parent().parent();
var textContent = $trNode.find("td:first").text();
textContent = $.trim(textContent);
var flag = confirm("确定要删除"+textContent+"的信息吗?");
if(flag){
$trNode.remove();
}
return false;
}
$("#employeetable a").click(function(){
return removeTr(this);
});
$("#addEmpButton").click(function(){
$("<tr></tr>").append("<td>"+$("#name").val()+"</td>")
.append("<td>"+$("#email").val()+"</td>")
.append("<td>"+$("#salary").val()+"</td>")
.append("<td><a href='t10.html'>Delete</a></td>")
.appendTo("#employeetable tbody");
});
})
</script>
<body>
<center>
<br> <br> 添加新员工 <br> <br> name: <input type="text"
name="name" id="name" /> email: <input type="text"
name="email" id="email" /> salary: <input type="text"
name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button>
<br> <br>
<hr>
<br> <br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>1000</td>
<td><a href="t10.html?id=001">Delete</a></td>
</tr>
<tr>
<td>
Jerry
</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="t10.html?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>1000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
//例
<script type="text/javascript">
$(function(){
$(":text").focus(function(){
var val = $(this).val();
if(val == this.defaultValue){
$(this).val("");
}
}).blur(function(){
var val = this.value;
if($.trim(val) ==""){
this.value = this.defaultValue;
}
});
$(":button:eq(1)").click(function(){
$("#single").val("选择3号");
});
$(":button:eq(2)").click(function(){
$("#multiple").val(["选择2号","选择4号"]);
});
$(":button:eq(3)").click(function(){
$(":checkbox[name='c']").val(["check2","check4"]);
});
$(":button:eq(4)").click(function(){
$(":radio[name='r']").val(["radio2"]);
});
$(":button:eq(5)").click(function(){
alert($("#single").val());
alert($("#multiple").val());
alert($(":checkbox[name='c']:checked").val());
alert($(":radio[name='r']:checked").val());
});
})
</script>
<body>
<input type="text" id="address" value="请输入邮箱地址"><br>
<input type="text" id="password" value="请输入邮箱密码"><br>
<input type="button" value="登录">
<br><br><br>
<input type="button" value="使单选下拉框的'选择3号'被选中"/>
<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" name="c" value="check1"/> 多选1
<input type="checkbox" name="c" value="check2"/> 多选2
<input type="checkbox" name="c" value="check3"/> 多选3
<input type="checkbox" name="c" value="check4"/> 多选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
//例
$(".head").hover(
function(){
$(".content").show();},
function(){
$(".content").hide();
});
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，
它是一个由 John Resig 创建于2006 year 1月的开源项目。
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了
JavaScript开发人员遍历HTML文档、操作DOM、处理事件、
执行动画和开发Ajax。它独特而又优雅的代码风格改变了J
avaScript程序员的设计思路和编写程序的方式。
</div>
</div>
转载于:https://my.oschina.net/MoreYoungGavin/blog/668030
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 源码分析
- jquery中，html、val与text三者属性取值的联系与区别
- 51 Recipes on using jQuery with ASP.NET Controls
- JQuery爱好者们的福音：jQuery EasyUI
- 12招jQuery常用技巧
- JQuery-Form中的AjaxForm和AjaxSubmit的区别
- jQuery 中的 event.preventDefault
- JQUERY 跨域调用WCF REST服务
- jQuery css3仿游戏网站右键环形菜单
- 04-Java学习笔记【js、jquery根据name和值选取radiobox】
- 快速实现jQuery多级菜单效果
- jQuery 数据 - jQuery.data() 方法
- jquery checkbox选中、改变状态、change和click事件
- jquery 的ready() 与window.onload()的区别
- jquery的tree的attributes
- 26个Jquery使用小技巧
- 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件
- jquery动画函数
- JQuery Upload File 上传文件提示 Empty file upload result的解决
- jquery ajax/post/get 传参数给 mvc的action