jQuery基本语法和选择器
2017-02-02 14:49
836 查看
jQuery
一、jQuery介绍
1、JS类库
l JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。
2、当前流行的JavaScript库
l jQuery ,最流行l EXT_JS,2.0开始收费
l Dojo ,很多js单独文件,优化:打包。(常见:开发小图标,一张图片)
l Prototype,对js扩展,框架开发。
l YUI(Yahoo! User Interface) ,taobao之前使用。
l 淘宝UI:http://docs.kissyui.com/
l Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。基于jQuery一个UI工具
3、jQuery介绍
l JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,
并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,
同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,
也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。
l 轻量级:依赖程序少,占用的资源的少
l 特点:js代码和html代码分离
l jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
l 由美国人John Resig在2006年1月发布
l jQuery是免费、开源的
l jQuery分类:
WEB版本:我们主要学习研究
UI版本:集成了UI组件
mobile版本:针对移动端开发
qunit版本:用于js测试的
4、版本介绍
5、优点
l 核心理念是write less,do more(写得更少,做得更多)l 轻量级:源码1.11.js大小是286kb,压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。
l 兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari2.0+, Opera 9.0+)
l jQuery的语法设计可以使开发者更加便捷
l 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
l jQuery能够使用户的html页面保持代码和html内容分离
l 不用再在html里面插入一堆js来调用命令了,只需要定义id即可
l jQuery提供API让开发者编写插件,有许多成熟的插件可供选择
l 文档说明很全
二、基本语法
1、jQuery语法<script type="text/javascript"> //js 执行时,有加载顺序 /* jQuery获得数据 * * 语法:$("选择器") == jQuery("选择器") * */ var username = $("#username"); // * val()函数 用于获得 value属性的值 alert(username.val()); </script>
2、jQuery对象和dom对象转换
<script type="text/javascript"> //1 使用javascript获得value值 var username = document.getElementById("username"); //alert(username.value); //2 将 dom对象 转换 jQuery对象 // * 语法:$(dom对象) // * 建议:jQuery对象变量名,建议为$开头 var $username = $(username); // alert($username.val()); //3 将 jQuery对象 转换 dom对象 //3.1 jQuery对象内部使用【数组】存放所有的数据,可以数组的下标获取(索引) var username2 = $username[0]; alert(username2.value); //3.2 jQuery提供函数 get() 转换成dom对象 var username3 = $username.get(0); alert(username3.value); </script>
三、选择器
1、基本
#id , id选择器,<xxxid=""> 通过id值获得元素
element,标签选择器,<xxx> 通过标签名获得元素
.class ,类选择器,<xxx class="">通过class值获得元素。注意:使用点开头
s1,s2,... 多选择器,将多个选择器的结果添加一个数组中。
--------------------------------------------
* 所有
<title>01-基本选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript"> // javascript 通过页面加载成功 window.onload = function(){....} // jQuery 页面加载 $(document).ready(function(){ //alert("中码?"); }); $(document).ready(function(){ // <input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#btn1").click(function(){ $("#one").css("background-color","#ff0"); //网络三原色:红绿蓝RGB ,取值:0-255,格式:#FFFFFF ,简化版FFF }); // <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","#ff0"); }); // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","#ff0"); }); // <input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","#ff0"); }); // <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two").css("background-color","#ff0"); }); }); </script>
<body> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <h3>基本选择器.</h3> <!-- 控制按钮 --> <input type="button" value="选择 id为 one 的元素." id="btn1"/> <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> <input type="button" value="选择 所有的元素." id="btn4"/> <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> <br /><br /> <!-- 测试的元素 --> <div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"/> </div> <span id="mover">正在执行动画的span元素.</span> </body>
2、层级
A B ,获得A元素内部所有的B后代元素。(爷孙)
A > B ,获得A元素内部所有的B子元素。(父子)
A + B ,获得A元素后面的第一个兄弟B。(兄弟)
A ~ B ,获得A元素后面的所有的兄弟B。(兄弟)
<title>02-层次选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","#ff0");//某一个区域所有div(此时body中) //$("div").css("background-color","#ff0"); //整个页面所有div }); // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","#ff0"); }); // <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> $("#btn3").click(function(){ $("#one+div").css("background-color","#ff0"); }); // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> $("#btn4").click(function(){ $("#two~div").css("background-color","#ff0"); }); // <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/> $("#btn5").click(function(){ $("#two").siblings("div").css("background-color","#ff0"); }); }); </script>
3、基本过滤
l 过滤选择器格式 “:关键字”:first ,第一个
:last ,最后一个
:eq(index) ,获得指定索引
:gt(index) 大于
:lt(index) 小于
:even 偶数,从 0 开始计数。例如:查找表格的1、3、5...行(即索引值0、2、4...)
:odd 奇数
:not(selector) 去除所有与给定选择器匹配的元素
------------------------------
:header 获得所有标题元素。例如:<h1>...<h6>
:animated 获得所有动画
:focus 获得焦点
<title>03-基本过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选择第一个div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","#ff0"); }); // <input type="button" value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last").css("background-color","#ff0"); }); // <input type="button" value="选择class不为one的 所有div元素." id="btn3"/> $("#btn3").click(function(){ $("div:not('.one')").css("background-color","#ff0"); }); // <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:even").css("background-color","#ff0"); }); // <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:odd").css("background-color","#ff0"); }); // <input type="button" value="选择索引值等于3的元素." id="btn6"/> $("#btn6").click(function(){ $("div:eq(3)").css("background-color","#ff0"); }); // <input type="button" value="选择索引值大于3的元素." id="btn7"/> $("#btn7").click(function(){ $("div:gt(3)").css("background-color","#ff0"); }); // <input type="button" value="选择索引值小于3的元素." id="btn8"/> $("#btn8").click(function(){ $("div:lt(3)").css("background-color","#ff0"); }); // <input type="button" value="选择所有的标题元素." id="btn9"/> $("#btn9").click(function(){ $(":header").css("background-color","#ff0"); }); // <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> $("#btn10").click(function(){ $(":animated").css("background-color","#ff0"); }); // <input type="text" value="请输入账号" defaultValue="请输入账号" /> // <input type="text" value="请输入密码" defaultValue="请输入密码"/> // $("input[type='text']").blur( fn ).focus( fn ); $("input[type='text']").on("blur focus",function(){ //1 获得默认值 var dv = $(this).attr("defaultValue"); //2 判断是否获得焦点 if( $(this).is(":focus") ){ //2.1 获得焦点,如果是默认值 ,清空value值 ,this 当前执行对象,是dom对象 if( $(this).val() == dv){ $(this).val(""); $(this).css("color","#000"); } } else { //2.2 失去焦点,如果内容为空,设置默认值 , 或 $(this).val().length == 0 if( $(this).val() == "" ){ $(this).val(dv); $(this).css("color","#999"); } } }); }); </script>
4、内容过滤
:empty 当前元素是否为空(是否有标签体--子元素、文本)
:has(...) 当前元素,是否含有指定的子元素
:parent 当前元素是否是父元素
:contains( text ) 标签体是否含有指定的文本
<title>04-内容过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> $("#btn1").click(function(){ $("div:contains('di')").css("background-color","#ff0"); }); // <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> $("#btn2").click(function(){ $("div:empty").css("background-color","#ff0"); }); // <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:has('.mini')").css("background-color","#ff0"); }); // <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:parent").css("background-color","#ff0"); }); }); </script>
5、可见性过滤
:hidden 隐藏。特指 <xxxstyle="display:none;"> ,获得 <inputtype="hidden">
:visible 可见(默认)
<title>05-可见性过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript"> $(document).ready(function(){ // <input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ $("div:visible").css("background-color","#ff0"); }); // <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ $("div:hidden").css("background-color","#ff0").show(1000); }); // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> $("#b3").click(function(){ //alert($("input:hidden").val()); //获得值时,默认第一个的值 // each函数 $("input:hidden").each(function(){ alert( $(this).val() ); }); }); // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> $("#b4").click(function(){ // $.each 全局函数 // * 回调函数 // ** 参数1:index 遍历索引 // ** 参数2:domEle 当前遍历的对象,及==this // $.each($("input:hidden"),function(index, domEle){ alert(index + " @ " + $(domEle).val() ); }); }); }); </script>
6、属性
[属性名] 获得指定的属性名的元素
[属性名=值] 获得属性名等于 指定值的 的元素【1】
[属性名!=值] 获得属性名不等于 指定值的 的元素
[as1][as2][as3].... 复合选择器,多个条件同时成立。类似 where ...and...and【2】
---------------------------------------
[属性名^=值] 获得以属性值开头 的元素
[属性名$=值] 获得以属性值结尾 的元素
[属性名*=值] 获得含有属性值 的元素
<title>06-属性选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="./script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> $("#btn1").click(function(){ // <xxx title=""> <xxx title="yyy"> <xxx title> $("div[title]").css("background-color","#ff0"); }); // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> $("#btn2").click(function(){ $("div[title='test']").css("background-color","#ff0"); }); // <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> $("#btn3").click(function(){ $("div[title!='test']").css("background-color","#ff0"); }); // <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div[title^='te']").css("background-color","#ff0"); }); // <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/> $("#btn5").click(function(){ $("div[title$='est']").css("background-color","#ff0"); }); // <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/> $("#btn6").click(function(){ $("div[title*='es']").css("background-color","#ff0"); }); // <input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/> $("#btn7").click(function(){ $("div[id][title*='es']").css("background-color","#ff0"); }); }); </script>
7、子元素过滤
:nth-child(index) ,获得第几个孩子,从1开始。
:first-child ,获得第一个孩子
:last-child ,获得最后孩子
:only-child ,获得独生子
<script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> $("#btn1").click(function(){ // 子元素选择使用前提,表达式前面必须是元素。例如:$("div:nth-child(2)") // 如果元素上添加条件,必须使用空格。例如:$("div[class='one'] :nth-child(2)") // $("div[class='one'] :nth-child(2)").css("background-color","#ff0"); $("div.one :nth-child(2)").css("background-color","#ff0"); /* 对比: * $("div.one") 所有的div,自己的样式为one * $("div .one") 所有的div中后代元素,样式为one */ }); // <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> $("#btn2").click(function(){ $("div.one :first-child").css("background-color","#ff0"); }); // <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> $("#btn3").click(function(){ $("div.one :last-child").css("background-color","#ff0"); }); // <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/> $("#btn4").click(function(){ $("div.one :only-child").css("background-color","#ff0"); }); }); </script>
8、表单过滤
:input 所有的表单元素。(<input>/ <select> / <textarea> / <button>)
:text 文本框<input type="text">
:password 密码框<input type=" password ">
:radio 单选<input type="radio">
:checkbox 复选框<input type="checkbox">
:submit 提交按钮<input type="submit">
:image 图片按钮<input type="image" src="">
:reset 重置按钮<input type="reset">
:file 文件上传<input type="file">
:hidden 隐藏域<input type="hidden"> ,还可以获得<xxx style="display:none">
其他值:<br> <option> ,存在浏览器兼容问题
:button 所有普通按钮。 <button > 或 <inputtype="button">
<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $allpassword= $("#form1 :password"); var $allradio= $("#form1 :radio"); var $allcheckbox= $("#form1 :checkbox"); var $allsubmit= $("#form1 :submit"); var $allimage= $("#form1 :image"); var $allreset= $("#form1 :reset"); var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配 var $allfile= $("#form1 :file"); var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配. var $allselect = $("#form1 select"); var $alltextarea = $("#form1 textarea"); var $AllInputs = $("#form1 :input"); //#form1 表单中,所有的表单元素,可以获得input、select等 var $inputs = $("#form1 input"); //#form1表单中,所有的input元素 $("div").append(" 有" + $alltext.length + " 个( :text 元素)<br/>") .append(" 有" + $allpassword.length + " 个( :password 元素)<br/>") .append(" 有" + $allradio.length + " 个( :radio 元素)<br/>") .append(" 有" + $allcheckbox.length + " 个( :checkbox 元素)<br/>") .append(" 有" + $allsubmit.length + " 个( :submit 元素)<br/>") .append(" 有" + $allimage.length + " 个( :image 元素)<br/>") .append(" 有" + $allreset.length + " 个( :reset 元素)<br/>") .append(" 有" + $allbutton.length + " 个( :button 元素)<br/>") .append(" 有" + $allfile.length + " 个( :file 元素)<br/>") .append(" 有" + $allhidden.length + " 个( :hidden 元素)<br/>") .append(" 有" + $allselect.length + " 个( select 元素)<br/>") .append(" 有" + $alltextarea.length + " 个( textarea 元素)<br/>") .append(" 表单有 " + $inputs.length + " 个(input)元素。<br/>") .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>") .css("color", "red") //显示所有的隐藏标签名称 $allhidden.each(function(){ // $("div").append("<br/>").append($(this).get(0).nodeName); $("div").append("<br/>").append(this.nodeName); }); $("form").submit(function () { return false; }); // return false;不能提交. }); //]]> </script>
9、表单对象属性过滤
:enabled 可用
:disabled 不可用。<xxx disabled="disabled">或<xxxdisabled=""> 或 <xxx disabled>
:checked 选中(单选框radio、复选框 checkbox)
:selected 选择(下拉列表 select option)
<script type="text/javascript"> $(document).ready(function(){ // <button id="btn1">对表单内 可用input 赋值操作.</button> $("#btn1").click(function(){ $("input:enabled").val("aaaaaaaaaaa"); }); // <button id="btn2">对表单内 不可用input 赋值操作.</button> $("#btn2").click(function(){ $("input:disabled").val("bbbbbbbbb"); }); // <button id="btn3">获取多选框选中的个数.</button> $("#btn3").click(function(){ // var s1 = $("[name='newsletter']:checked").length; var s1 = $("[name='newsletter']:checked").size(); alert(s1); }); // <button id="btn4">获取下拉框选中的内容.</button> $("#btn4").click(function(){ // 获得选中标签<option value="">text</option> $(":selected").each(function(){ // val() 获得option时,如果没有value值,将获得text的值 // html() 获得标签体的内容 $("#selectDivId").append( $(this).html() ); }); }); }); </script>
相关文章推荐
- jquery的选择器写法大全,基本语法
- jQuery系列之基本语法以及选择器(一)
- (转)jquery基础教程七 选择器(selectors 的xpath语法应用)
- jQuery-Selectors(选择器)的使用(一、基本篇)
- jQuery 选择器语法
- jquery插件的基本语法
- jQuery基本选择器
- jquery基础教程 选择器(selectors 的xpath语法应用)
- JQuery选择器语法$()
- jQuery选择器 – 基本(Basics)
- jQuery的选择器—基本过滤选择器
- jQuery基础教程之 基本选择器
- jquery基础教程七 选择器(selectors 的xpath语法应用)
- Jquery升级后选择器的语法问题
- Jquery升级新版本后选择器的语法问题
- jQuery语法:$(选择器,[待查文档])
- jQuery 选择器1_基本1
- (转)jquery基本选择器
- jquery 基本选择器的使用
- jQuery 基本语法学习