jQuery 选择器和事件应用

最新推荐文章于 2023-04-23 17:34:04 发布

JaceLai_

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量447

点赞数

分类专栏： web前端笔记文章标签： jquery

本文链接：https://blog.csdn.net/Wlcf258/article/details/61204511

版权

web前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.选择器

1.基本选择器

 $('#box li:odd').css('background','gray');// id选择器设置样式
 $('#box').find('li:odd').css('background','gray');// 查找ul里面的奇数行变色
$('#box li:even').css('background','green');// 查找ul里面的偶数行变色
  $('#box').find('li:even').css('background','gray');// 查找ul里面的偶数行变色   
    $('#box').children('ul').css('background','gray');  //查找ul里面所有子元素

2.层次选择器：

   $('one').filter('p')   //  找到 类名为one的p标签 
     $('#one span').css('display','block');//子孙后代，所有的span都被选中
  $('#one>span').css('display','block');//子代选择器，第一层元素，span1被选中
   $('#one + div').css('display','block');//找下一个兄弟节点，找到的是单个的
    $('#one ~ div').css('display','block');//下面所有的兄弟节点，所有的弟弟（多个）
     $('#one').siblings().css('display','block');//所有的兄弟节点（偶数）
     $('#one').children().css('display','block');//#one>span所有的子代节点，子代集合
     $('.s1').parent().css('display','block');//查找父节点 ，单数
    $('.s1').parents()   //  祖先节点  ，直到<html>元素为止
    $('#one').has('span')   //  找包含有p标签的div  
    $('one').index()   //  获取one的索引
    $('li').html(’123‘)  //   设置所以li的值为123
    $('li').html()  //   获取第一个li的值，包括标签
    $('div').next()  //   查找下面所有下面所有div的兄弟节点，获取和设置纯文本包括标签也能获取
    $('div[id]')   //  查找所有id的div标签
    $(':input')  //    查找所以Text表单
    $(':reset')  //    查找所以重置表单

3.内容过滤器：

     $('div:contains("c")').css('color','red');包含有c的div被选       中
      $('div:empty').css('display','block');//查找有的为空（也不包括文本节点）的节点
       $('div:parent').css('display','block');//查找所有含有子元素或者文本节点的节点

4.DOM的操作：

     $('p').attr('title');  //  获取p标签的title值
     alert($('p').attr('title'));
     $('p').attr('title','选择你最喜欢的蛋糕');
      alert($('p').attr('title'));  //可以设置多个属性值
     $('p').removeAttr('title');   // 移除某个元素的属性值   相当于删除           
     $('p').addClass('p');  //在p标签添加一个名字为b的类名
     $('p').removeClass('p');  // 在p标签删除一个名字为b的类名，但类名还在
    $('p').removeAttr('class');//移除某个元素的属性值   相当于删除

5.DOM的增删改查：

  $li1=$('<li>雪梨</li>'); //创建节点
  $('ul').append($li1);   //  插入节点             
  $li2=$('<li>西瓜</li>');//创建节点
  $li2.appendTo($('ul'))’//  插入节点  
   两者关系：后续操作不一样             
   $li3=$('<li>香蕉</li>'); //创建节点
   $('ul').prepend($li3);   //  从前面插入节点             
     $('ul').find('li').eq(0).remove();  // 删除节点
   $('ul li:eq(0)').remove();// 删除节点  index下标从0开始
   $('ul').find('li').eq(1).empty();  //  清空节点 里面的内容，不是li
   $('ul li:eq(0)')clone().appendTo  //  复制节点，复制完一定要插入             
   //size() //  相当于js的 length ;

例子：jq方法选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;list-style: none;}
            #ul{width: 220px;height: 30px;cursor: pointer;}
            #ul li{float: left;line-height: 30px;padding-left: 

10px;padding-right: 10px;}
            .con{width: 206px;height: 100px;border: 1px solid 

greenyellow;display: none;}
            .active{background: greenyellow;}
        </style>
        <script src="../js/jquery.min.js" type="text/javascript" 

charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $('#ul>li').mouseover(function(){
                    $('#ul>li').attr('class','');  //  清空当前li的

样式
                    $(this).attr('class','active');  //  设置选中的

li变色
                    $('#div>div').css('display','none');  
                    $('#div>div').eq($(this).index()).css

('display','block'); // 利用索引li设置对应的div
                });


            });
        </script>
    </head>
    <body>
        <div id="box">
        <ul id="ul">
            <li class="active"><a href="javascript:"></a>国事</li>
            <li><a href="javascript:"></a>社会</li>
            <li><a href="javascript:"></a>娱乐</li>
            <li><a href="javascript:"></a>科技</li>
        </ul>
        <div id="div">                  
        <div class="con" style="display: block;">
            国事
        </div>
        <div class="con">
            社会
        </div>
        <div class="con">
            娱乐
        </div>
        <div class="con">
            科技
        </div>
        </div>
        </div>
    </body>
</html>

二.事件和特效集合

1.position的使用：

    //alert($('#div2').offset().left); //获取到屏幕的左距离             
    //alert($('#div2').position().left);//到有定位的父级的left值

2.slideDown和slideDown

       作用：让元素以上拉动画效果隐藏起来
       //$('#btn').click(function(){
      //$('#div').slideDown(2000,function(){
      //$('#div').slideUp(2000); 
     //  });
      // $('#btn').click(function(){
      // $('#div').slideDown(400)// 参数：时长

3.on与off

   $('div').on('click mouseover',function(){   //  on  绑定事件，如果没有使用off，每次鼠标移入都会弹出一次
   alert(3645);
   $('div').off('mouseover');  //  当off关闭绑定了事件，鼠标移入只弹出一次，再次鼠标移入不会再弹出
            });

### 4.animate()

 // 第一个参数表示：要执行动画的CSS属性（必选）
 // 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
//.delay(1000)  延迟（秒数）
 // stop()   // 停止当前的运动属性
  // stop(true)  //  停止所有运动
  // stop(true，true)  //  当前的运动属性马上到达目标后停止
  //  finish()   //  所以的运动属性马上到达目标后停止

5.

  //  ev.preventDefault() //阻止默认事件              
  // ev.stopPropagation() //阻止冒泡                
  // return false; //阻止默认事件+阻止冒泡

6.show（）与hide（）

  $('#btn').click(function(){
  $('#div').show(1000,function(){  //显示
  $('#div').hide(2000);   //  隐藏
        });
        });

7.fadeIn()和fadeOut()

       作用：让元素以淡淡的进入视线的方式展示出来
      $('#btn1').hover(function(){
   $('#div2').fadeIn(1000);  //淡出              
   },function(){
   $('#div2').fadeOut(1000);    //  淡入 
        });

例：jq版回到顶部

    首要：把jq压缩版文件导入

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #box{width: 800px;height: 3000px;margin: 0 

auto;background: #888;}
            #backTop{width: 50px;height: 

50px;background:red;position: fixed;right: 50px;bottom: 50px;display: 

none;cursor: pointer;}
        </style>
        <script src="../js/jquery.min.js" type="text/javascript" 

charset="utf-8"></script>
        <script type="text/javascript">            
            $(function(){                           
            $(window).scroll(function(){
                 var sTop = $(window).scrollTop();  // 获取滚动了的距离          


                if(sTop>500){   // 判断滚动大于500时显示红色按钮
                    $('#backTop').fadeIn(500);    //  显示                   
                }else if(sTop<500){
                    $('#backTop').fadeOut(500);   //  隐藏
                }               
            })
            $("#backTop").click(function(){
                     $('html , body').animate({scrollTop: 

0},'600','linear');  //  运动函数：animate()  
                });           
            })
        </script>
    </head>
    <body>
        <div id="box">
            <div id="backTop"></div>
        </div>
    </body>
</html>

JaceLai_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 选择器和事件应用

一.选择器1.基本选择器 $('#box li:odd').css('background','gray');// id选择器设置样式 $('#box').find('li:odd').css('background','gray');// 查找ul里面的奇数行变色$('#box li:even').css('background','green');// 查找ul里面的偶数行变色 $('#
复制链接

扫一扫