欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端 -- jQuery

程序员文章站 2022-05-29 10:19:19
jQuery引入 下载链接: [jQuery官网](https://jquery.com/),首先需要下载这个jQuery的文件,然后在HTML文件中引入这个文件,就可以使用这个文件中帮我们提供的jquery的接口了。 引入: ......

jquery引入

  • 下载链接: [jquery官网](https://jquery.com/),首先需要下载这个jquery的文件,然后在html文件中引入这个文件,就可以使用这个文件中帮我们提供的jquery的接口了。

  • 引入: <script src = 'jquery.js'> </script>

jquery对象和dom对象

  • jquery找到的对象称为 --> jquery对象

  • 原生js找到的标签称为 --> dom对象

  • dom对象只能使用dom对象的方法,不能使用jquery对象的方法,jquery对象也是,它不能使用dom对象的方法

  • dom对象和jquery对象互相转换:

    • jquery对象转dom对象 -- jquery对象[0] 示例: $('#d1')[0]

    • dom对象转jquery对象 -- $(dom对象)

 

jquery选择器

基本选择器(同css一样)

  • 不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jquery找到的标签对象就是一个jquery对象,用原生js找到的标签对象叫做dom对象

  • 通过 .text() 可以拿到标签里面的文本内容

  1. id选择器

    • $("#id值")

  2. 标签选择器

    • $("标签名")

  3. class选择器

    • $(".类名")

  4. 配合使用

    • $("div.c1") 找到有c1 class类的div 标签

  5. 所有元素选择器

    • $("*")

  6. 组合选择器

    • $("#id, .classname, tagname")

  7. 层级选择器

    • x和y可以为任意选择器

    • $("x y"); x的所有后代y(子子孙孙)

    • $("x > y"); x的所有儿子y(儿子)

    • $("x + y"); 找到所有紧挨在x后面的y(一个)

    • $("x ~ y"); x之后所有的兄弟y

  • 选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本筛选器(选择之后进行过滤)

<ul>
    <li id="1">南山</li>
    <li id="2">
        <a href="">百度</a>
        宝安
    </li>
    <li id="3">坪山</li>
    <li id="4">罗湖</li>
    <li id="5">
        <a href="">华为</a>
        福田
    </li>
    <li id="6">龙岗</li>
</ul>
​
:first  -- 示例:$('li:first')  // 第一个
:last       // 最后一个
:eq(index)  // 索引等于index的那个元素
:even     // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd        // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)     // 匹配所有大于给定索引值的元素
:lt(index)     // 匹配所有小于给定索引值的元素
:not(选择器)    // 排除所有满足not条件的标签
:has(选择器)    // --$('li:has(.c1)')  找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签

 

属性选择器

  • [attribute = value] 属性等于

  • [attribute != value] 属性不等于

    // 示例,多用于input标签
    <input type="text">
    <input type="password">
    <input type="checkbox">
    $("input[type='checkbox']");  // 取到checkbox类型的input标签
    $("input[type!='text']");     // 取到类型不是text的input标签

     

表单筛选器

  • 多用于找form表单里面出现的input标签,当然通过属性选择器找肯定没有问题的,这样就是写着简单一点

    找到的是type属性为这个值的input标签中
    :text
    :password
    :file
    ​
    :radio
    :checkbox
    ​
    :submit
    :reset
    :button
    ​
    // 例子:
    $(":checkbox")  // 找到所有的checkbox

     

表单对象属性筛选器

  • :enabled 可用的标签

  • :disabled 不可用的标签

  • :checked 选中的input标签

  • :selected 选中的option标签

    // 找到可用的input标签
    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>
    ​
    $("input:enabled")  // 找到可用的input标签
    ​
    // 找到被选中的option:
    <select id="s1">
      <option value="beijing">北京市</option>
      <option value="shanghai">上海市</option>
      <option selected value="guangzhou">广州市</option>
      <option value="shenzhen">深圳市</option>
    </select>
    ​
    $(":selected")  // 找到所有被选中的option

     

筛选器方法

  • 选择器或者筛选器选择出来的都是对象,而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法,写在对象后面加括号,不再是写在选择器里面的了。

  • 下一个元素

    $('#l3').next();  找到下一个兄弟标签
    $('#l3').nextall(); 找到下面所有的兄弟标签
    $('#l3').nextuntil('#l5');  直到找到id为l5的标签就结束查找,不包含它

     

  • 上一个元素

    $("#id").prev()   找到上一个兄弟标签
    $("#id").prevall()  找到上面所有的兄弟标签
    $("#id").prevuntil("#i2") 直到找到id为i2的标签就结束查找,不包含它

     

  • 父亲元素

    $("#id").parent()   // 查找一级父类                   
    $("#id").parents()  // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)       
    $("#id").parentsuntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。 

              

  • 儿子和兄弟元素

    $('ul').children();       // 找所有的儿子们标签
    $('ul').children('#l3');  // 找到符合后面这个选择器的儿子标签
    ​
    $('#l5').siblings();      // 找到所有的兄弟们标签,不包含自己
    $('#l5').siblings('#l3'); // 找到符合后面这个选择器的兄弟标签

     

  • 查找

    • 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

    • $("div").find("p") 找到div后代中的p标签,相当于 `$('div p')

  • 筛选

    • 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

      $("div").filter(".c1")  // 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div,和find不同,find是从div标签的子子孙孙中找到一个符合条件的标签 等价于 $("div.c1")--> 找到类值等于c1的div标签
      .first() // 获取匹配的第一个元素
      .last()  // 获取匹配的最后一个元素
      .not()   // 从匹配元素的集合中删除与指定表达式匹配的元素$('li').not('#l3');
      .has()   // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
      .eq()    // 索引值等于指定值的元素

       

标签操作

样式操作

  1. 样式类操作

    • addclass(); 添加指定的css类名

    • removeclass(); 移除指定的css类名

    • hasclass(); 判断样式是否存在

    • toggleclass(); 切换css类名,有就移除没有就添加

      示例代码
          $('.c1').addclass('c2');
          $('.c1').removeclass('c2');
          $('.c1').hasclass('c2');
          $('.c1').toggleclass('c2');

       

  2. css样式

    • 原生js: 标签.style.color = 'red';

    • jquery: $('.c1').css('background-color','red')

      同时设置多个css样式:
      $('.c1').css({'background-color':'red','width':'200px'})
  3. 位置操作

    • position() 查看相对位置,不能设置位置

    • offset() 查看距离窗口左上角的绝对位置

      查看位置:
      $('.c2').position();  //查看相对位置
      $('.c2').offset();    //查看距离窗口左上角的绝对位置
      设置位置:
      $('.c2').offset({'top':'20','left':'40'});
  4. jquery绑定点击事件的写法

    //原生js绑定点击事件:
        $('.c1')[0].onclick = function(){
            this.style.background = 'red';
        }
    ​
    // jquery绑定点击事件
        $('.c1').click(function () {
            $(this).css('background-color','green');
        })

     

  5. $(window).scrolltop() // 滚轮向下移动的距离

    $(window).scrollleft() // 滚轮向右移动的距离

    // 滚动事件.监听滚动事件来显示或者隐藏标签
    ​
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <style>
            .c1{
                background-color: green;
                height: 4000px;
                width: 100px;
            }
            .s1{
                position: fixed;
                left:20px;
                bottom:20px;
                height: 30px;
                width: 70px;
                background-color: black;
                text-align: center;
                line-height: 30px;
            }
            .s1 a{
                color: white;
                font-size: 14px;
                text-decoration: none;
            }
            .hide{
                display: none;   // 隐藏标签
            }
        </style>
    </head>
    <body>
        <span>顶部位置</span>
        <div class="c1"></div>
        <span class="s1 hide">
            <a href="#top">回到顶部</a>
            // <span>返回顶部</span>
        </span>
        <script src="jqu.js"></script>
        <script>
            $(window).scroll(function () {
                console.log($(window).scrolltop());
                if ($(window).scrolltop()>200){  
                    $('.s1').removeclass('hide') // 当滑动的距离超过200的时候,就显示标签
                }else{
                    $('.s1').addclass('hide')
                }
            })
    ​
        // 回到顶部,scrolltop设置值
        // $('.s1').click(function(){
        //     $(window).scrolltop(0)
        // })
        </script>
    </body>
    </html>

     

  6. 尺寸

    $('.c1').height();      //content 高度
    $('.c1').width();       //content 宽度
    $('.c1').innerheight(); //content高度+padding高度
    $('.c1').innerwidth();  //content宽度+padding宽度
    $('.c1').outerheight(); //content高度+padding高度 + border高度
    $('.c1').outerwidth();  //content宽度+padding宽度+ border宽度

     

     

文本操作

  • html() 取得第一个匹配元素的html内容,包含标签内容

  • html(val) 设置所有匹配元素的html内容,识别标签,能够表现出标签的效果

  • text() 取得所有匹配元素的内容,只有文本内容,没有标签

  • text(val) 设置所有匹配元素的内容,不识别标签,将标签作为文本插入进去

    $('.c1').html('<h1>你好</h1>');  // 将你好插入文本中
    $('.c1').text('<h1>你好</h1>');   // 无法识别标签,所以将标签作为文本插入进去

     

值操作

获取值
input type='text'的标签--$('#username').val();
    input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
    input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,只会拿到一个值,需要循环取值  
        var d = $(':checkbox:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
        
    单选select --- $('#city').val();  拿到value设置的值
    多选select --- $('#author').val(); // ["2", "3"]  

 



设置值
input type='text'的标签 --- $('#username').val('李杰');
    input type='radio'标签 ---  $('[name="sex"]').val(['3']);
            如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
    input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
    单选select --- $('#city').val('1');  option value='1'
    多选select --- $('#author').val(['2','3'])

 

属性操作

attr(attrname)// 返回第一个匹配元素的属性值
attr(attrname, attrvalue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeattr(attrname)// 从每一个匹配的元素中删除一个属性

 



示例:
    设置单个属性
        $('.c1').attr('xx','oo');
    设置多个属性
        $('.c1').attr({'age':'18','sex':'alex'});
    查看属性
        $('.c1').attr('属性名');
        $('.c1').attr('xx');
    删除属性
        $('.c1').removeattr('xx');
​
prop -- 针对的是checked\selected\disabled..
​
查看标签是否有checked属性,也就是是否被选中
        attr $(':checked').attr('checked'); //checked --没被选中: undefined
        prop $(':checked').prop('checked'); //true  -- 没被选中 : false
        
        通过设置属性的方式来设置是否选中:
            $(':radio').eq(2).prop('checked',true);  true和false不能加引号
            $(':radio').eq(2).prop('checked',false);
​
简单总结:
    1.对于标签上有的能看到的属性和自定义属性都用attr
    2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
    具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

 

 

文档处理

添加到指定元素内部的后面
    $(a).append(b)     // 把b追加到a
    $(b).appendto(a)   // 把b追加到a
    // 添加字符串照样能识别标签  *****
    $('#d1').append('<a href="http://www.jd.com">京东</a>');
​
添加到指定元素内部的前面
    $(a).prepend(b)    // 把b前置到a
    $(b).prependto(a)  // 把b前置到a
    示例
        $('a').prependto($('div'));
​
添加到指定元素外部的后面
    $(a).after(b)        // 把b放到a的后面
    $(b).insertafter(a)  // 把b放到a的后面
​
添加到指定元素外部的前面
    $(a).before(b)         // 把b放到a的前面
    $(b).insertbefore(a)   // 把b放到a的前面
    
移除和清空元素
    remove()    // 从dom中删除所有匹配的元素,包括自己也删除
    empty()     // 删除匹配的元素集合中所有的子节点,包括文本被全部删除,但是匹配的元素还在
    $('div').remove();   // 清空包括div自己的数据
    $('div').empty();    // 清空div标签里面的数据
​
替换
    replacewith()
    replaceall()
    示例:
        var a = document.createelement('a')
        a.href = 'http://www.baidu.com';
        a.innertext = 'xxx';
        
        $('span').replacewith(a);  // 用a标签替换span标签
        $(a).replaceall('span');   // 用a标签替换span标签
        
clone()克隆
    <button class="btn">屠龙宝刀,点击就送!</button> 
​
    $('.btn').click(function () {
        // var a = $(this).clone();   // 克隆标签
        var a = $(this).clone(true);  // 括号内加一个true,连带事件一起克隆
        $(this).after(a);
​
    })

 

事件

事件绑定方式

<script>
    // 方式一
    $('.c1').click(function () {
        $(this).css({'background-color':'purple'})
    })
​
    // 方式二
    $('.c1').on('click',function () {
        $(this).css({'background-color':'purple'})
    })
</script>

 

常用事件

click  左键点击事件
    //获取光标触发的事件
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'});
    });
    //失去光标(焦点)触发的事件
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'purple'});
    });
​
    //域内容发生改变时触发的事件
    $('select').change(function () {
        $('.c1').toggleclass('cc');
    });
​
    //鼠标悬浮触发的事件
    // $('.c1').hover(
    //     //第一步:鼠标放上去
    //     function () {
    //         $(this).css({'background-color':'blue'});
    //     },
    //     //第二步,鼠标移走
    //     function () {
    //         $(this).css({'background-color':'yellow'});
    //     }
    // )
​
    // 鼠标悬浮  等同于hover事件
    // 鼠标进入
    // $('.c1').mouseenter(function () {
    //     $(this).css({'background-color':'blue'});
    // });
    // 鼠标移出
    //  $('.c1').mouseout(function () {
    //     $(this).css({'background-color':'yellow'});
    // });
    
    // $('.c2').mouseenter(function () {
    //     console.log('啦啦啦啦');
    // });
    // 鼠标悬浮事件
    // $('.c2').mouseover(function () {
    //     console.log('啦啦啦啦');
    // });
    // mouseover 和 mouseenter的区别是:mouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mmouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象
​
​
//键盘按下触发的事件  e\event事件对象
    $(window).keydown(function (e) {
        // console.log(e.keycode); //每个键都有一个keycode值,通过不同的值来触发不同的事件
        if (e.keycode === 37){
            $('.c1').css({'background-color':'red'});
        }else if(e.keycode === 39){
            $('.c1').css({'background-color':'green'});
        }
        else {
            $('.c1').css({'background-color':'black'});
        }
    })
    // 键盘抬起触发的事件
    $(window).keyup(function (e) {
        console.log(e.keycode);
    })
​
    
    input事件:
        22期百度:<input type="text" id="search">
        <script src="jquery.js"></script>
        <script>
            $('#search').on('input',function () {
                console.log($(this).val());
            })
​
        </script>

 

事件冒泡

  • 冒泡的意思就是因为html可以嵌套,如果你给儿子标签绑定了点事件或者没有绑定点击事件,父级标签绑定了点击事件,那么你一点击子标签,不管子标签有没有绑定事件,都会触发父级标签的点击事件,如果有,会先触发子标签的点击事件,然后触发父级标签的点击事件,不管子标签有没有点击事件,都会一级一级的还往上找点击事件

<style>
    #d1{
        background-color: red;
        height: 200px;
    }
    #d2{
        background-color: green;
        height: 100px;
        width: 100px;
    }
</style>
​
<div id="d1">
    <div id="d2"></div>
</div>
<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function () {
        alert('子级标签');
    });
</script>

 

阻止后续事件发生

    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function (e) {
        alert('子级标签');
        return false;
        // e.stoppropagation();
    });

 

事件委托

  • 事件委托是通过事件冒泡的原理.利用父级标签捕获子标签的事件,将未来添加进来的某些子标签自动绑定上事件

    <div id="d1">
        <button class="c1">xin</button>
    </div>
    ​
    <script src="jqu.js"></script>
    ​
    <script>
        // 将button按钮选择器选中的标签的点击事件委托给了$('#d1')
        $('#d1').on('click','.c1',function () {
            alert('未成年禁入');
            var btn = document.createelement('button');
            $(btn).text('xin');
            $(btn).addclass('c1');
            console.log(btn);
            console.log($(this));  // this还是点击的那个button按钮
            $('#d1').append(btn)   // 添加到div标签里面的后面
        })
    </script>