jQuery:就是让页面动起来
参考手册:http://jquery.cuishifeng.cn/
DOM/BOM/javaScript 继承的类库 《---》模块
一、查找元素
二、操作元素
三、实例
版本:1.x 2.x 3.x 推荐使用 1.x 版本(兼容浏览器低版本)
- <script src="jquery-1.12.4.js"></script>
- <scirpt>
- $. 或 jquery.来调用方法
- </script>
jquery 与 dom 相互转换:
jquery 对象【0】 --》 dom 对象
dom 对象 --> $(dom 对象)
- 1.id选择器
- $('#id')
- 2.类选择器
- $('.class')
- 3.标签选择器
- $('p')
- 4.属性选择器
- $('[alex]') 查找具有alex属性的标签
- $('[alex="sb"]') 查找alex='sb'属性的标签
- $('input[type="text"]') 超找input标签中text的标签
- 5.组合选择器
- $(a,.class,#id)以,隔开
- 6.层级选择器
- $(div a) 子子孙孙,div下的a标签
- $(div>a)只找儿子
- 7.基本过滤
- :first 第一个
- :eq索引0开始
- :odd 偶数
根据选择器选的东西,进行筛选
- parent() 父标签
- children() 所有的子标签
- next() 下一个标签
- perv() 上一个标签
- sibling() 所有的兄弟便签,除了自己
左侧菜单 jquery 实现
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .menu{
- width: 80px;
- border: 1px solid #ddd;
- }
- .header{
- border: 1px solid #dddddd;
- height: 30px;
- background-color: #2459a2;
- }
- .hide{
- display: none;
- }
- </style>
- </head>
- <body>
- <div class="menu">
- <div class="item">
- <div class="header">菜单1</div>
- <div class="content">内容1</div>
- </div>
- <div class="item">
- <div class="header">菜单2</div>
- <div class="content hide">内容2</div>
- </div>
- <div class="item">
- <div class="header">菜单3</div>
- <div class="content hide">内容3</div>
- </div>
- <div class="item">
- <div class="header">菜单4</div>
- <div class="content hide">内容4</div>
- </div>
- </div>
- <script src="jqure/jquery-1.12.4.js"></script>
- <script>
- $('.header').click(function(){
- //this 当前点击的便签对象
- //要是jquery 必须先进行转换
- // $(this).next().removeClass('hide');
- // $(this).parent().siblings().children('.content').addClass('hide')
- //支持链式编程
- $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');
- //$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
- })
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <input id='i1' type="button" value="全选">
- <input id="i2" type="button" value="取消">
- <input id="i3" type="button" value="反选">
- <table id='tb' border="1px">
- <tr>
- <th>选择</th>
- <th>主机</th>
- <th>IP</th>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1.1.1.1</td>
- <td>888</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1.1.1.1</td>
- <td>888</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1.1.1.1</td>
- <td>888</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1.1.1.1</td>
- <td>888</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1.1.1.1</td>
- <td>888</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>1.1.1.1</td>
- <td>888</td>
- </tr>
- </table>
- <script src="jquery-1.12.4.js"></script>
- <script>
- //使用jquery的each循环方法
- //this 是代表每一个被过滤出来的对象(dom对象)
- //$(dom) 进行转换
- // $('#i1').click(function() {
- // $('#tb :checkbox').each(function(k) {
- // //console.log(this) 查看this的属性
- // //console.log($(this))
- //
- // //dom的实现方式
- //// if(this.checked){
- //// this.checked=false;
- //// }
- //
- // //第二种jquery的方法
- // $(this).prop('checked',true)
- // })
- // });
- $('#i1').click(function(){
- //内部自己帮我们进行循环
- $('#tb :checkbox').prop('checked',true);
- });
- $('#i2').click(function(){
- $('#tb :checkbox').prop('checked',false);
- });
- $('#i3').click(function(){
- //进行反选的时候,无法使用简单的内部循环,so我们使用each方法
- //each的k代表索引
- $('#tb :checkbox').each(function () {
- var tag=$(this).prop('checked')?false:true;
- //使用三元运算判断当前的的选择状态
- $(this).prop('checked',tag)
- })
- })
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2431698.html