jquery基础
2016-02-23 11:43
435 查看
jquery:
jquery方法文档:http://www.php100.com/manual/jquery/
JS -->操作浏览器HTML -> 用户可视化
JS 语言 运行在浏览器
jQuery -->js的类库,是对js的一个封装,极大的方便了使用
基本的选择器使用:
左侧菜单的收缩功能:
优化后的代码:
jquery方法文档:http://www.php100.com/manual/jquery/
JS -->操作浏览器HTML -> 用户可视化
JS 语言 运行在浏览器
jQuery -->js的类库,是对js的一个封装,极大的方便了使用
基本的选择器使用:
选择器 - id选择器 - #t1 <div id="t1"></div> $('#t1') - class选择器 - .t2 <div class="t2"></div> $('.t2') - 标签选择器 <p>fdafdsaf</p> <p>fdafdasf</p> $('p') - 找tt下面的p标签,中间用空格 <div id="tt"> <div class="t3"> <p></p> <span></span> </div> </div> $("#tt p") <!-- 找tt下面的p标签,中间用空格--> - 找到class=t5的标签和所有a标签,用逗号 <p class="t5"></p> <span></span> <a></a> $('.t5,a') <!--找到class=t5的标签和所有a标签,用逗号 -->
左侧菜单的收缩功能:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } </style> </head> <body> <div> <div> <div id="m1" onclick="Change(1)">菜单一</div> <div> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <div id="m2" onclick="Change(2)">菜单二</div> <div class="hide"> <div>11</div> <div>22</div> <div>33</div> </div> </div> <div> <div id="m3" onclick="Change(3)">菜单三</div> <div class="hide"> <div>111</div> <div>222</div> <div>333</div> </div> </div> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function Change(arg){ //找到,到底点击哪一个 if(arg==1){ var menu = $('#m1') }else if(arg==2){ var menu = $('#m2') }else{ var menu = $('#m3') } console.log(menu.text()) } </script> </body> </html> <!-- <p>1111111</p> --> <!-- menu.text() 获取两个标签之间的内容,这样获取内容为1111111 -->
优化后的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } </style> </head> <body> <div> <div> <div onclick="Change(this);">菜单一</div> <div class="content"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <div onclick="Change(this);">菜单二</div> <!--this表示你点击的当前标签 --> <div class="content hide"> <div>11</div> <div>22</div> <div>33</div> </div> </div> <div> <div onclick="Change(this);">菜单三</div> <div class="content hide"> <div>111</div> <div>222</div> <div>333</div> </div> </div> <div> <div onclick="Change(this);">菜单四</div> <div class="content hide"> <div>1111</div> <div>2222</div> <div>3333</div> </div> </div> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function Change(arg){ //找到,到底点击哪一个 //$arg表示当前点击的标签 var t = $(arg).text(); console.log(t); //1.找到下一个标签,移除hide //$(arg).next(); //当前标签的下一个标签 //removeClass('') 移除一个hide标签 $(arg).next().removeClass('hide'); //2.找到其他菜单,内容隐藏,添加hide //当前标签的父标签 $(arg)parent() //所有父亲标签的兄弟标签 $(arg).parent().siblings() $(arg).parent().siblings().find('.content').addClass('hide'); } </script> </body> </html>
相关文章推荐
- jQuery .bind() .live() .delegate() .on() .off() 方法不同与联系
- 教你如何终止JQUERY的$.AJAX请求
- jquery中的替换符合条件的字符串
- JQUERY的AJAX请求缓存里的数据问题处理
- jQuery中的$(window).load()与$(document).ready()
- Jquery获取select标签的值、文本方式
- jquery hover(overListener, outListener) || bind('mouseover',methodA).bind('mouseout',methodB)
- jQuery监听文本框值改变触发事件(propertychange)
- Mootools遮罩层练习(原为网上的jquery写法)
- jQuery.Validate验证库
- JQuery给动态加载的节点绑定有效事件
- jQuery 操作导航栏
- jquery toggle(listenerOdd, listenerEven)
- jQuery常用知识点总结以及平时封装常用函数
- ajaxfileupload.js jQuery.handleError is not a function
- popup_layer jquery 弹出层使用,说明,详解
- JQuery在iframe中实现 点击后选中当前栏目的样式
- jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
- jquery.cookie中的操作
- jquery如何删除一个元素后面的所有元素