前端学习 day11 : JQuery,基本选择器,过滤选择器,筛选选择器

本文主要介绍前端开发中的JQuery库,详细讲解了JQuery的基础、选择器、过滤选择器和筛选选择器的用法。通过对比JavaScript,强调了JQuery在解决浏览器兼容性和简化DOM操作上的优势。并提供了JQuery的安装方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.JQuery

1.1        什么是JQuery

(1)、JavaScript与jQuery比较

js:  1、入口函数只有一个,window.onload

  1. 浏览器兼容性:非常令人头疼,比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
  2. DOM错综复杂,实现简单的效果很麻烦
  3. 代码容错性差,出错后导致后面的代码不执行

jQuery:  1、市场占有率稳步上升,代码比较少,功能强大

2、DOM比较强大,事件处理,完全解决了浏览器的兼容性问题

3、ajax操作(比较好)

(2)、什么是jQuery

1、jQuery是一个JavaScript函数库。

2、jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

3、jQuery库包含以下功能:HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和HTML DOM 遍历和修改

(3)、为什么使用jQuery

1、目前网络上有大量开源的 JS , 但是 jQuery 是目前最流行的 JS ,而且提供了大量的扩展。

2、很多大公司都在使用 jQuery, 例如:GoogleMicrosoftIBMNetflix

3、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

  1. jQuery安装

1、从 jquery.com 下载 jQuery 库,本地加载

jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

<head> 

<script src="jquery-1.10.2.min.js"></script> 

</head>

2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery,联网加载

<head> 

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 

</head>

1.2        JQuery基础语法

<script src="./js/jquery-1.11.1.min.js"></script>
<script>
    //JS写法 onload函数
    window.onload = function(){
        console.log(1);
    }
    window.onload = function(){
        cosole.log(2) ;

    }
    
    //var $
    //var JQuery = $
    //JQuery写法 不会覆盖 会同时打印11 和 22
    jQuery(document).ready(function(){
        console.log(11);
    });
    jQuery(document).ready(function(){
        console.log(22);
    });
    //简写方式
    $(function(){
        console.log('我是$') ;
    }) ;
</script>

1.3        JQuery选择器

<script>
    //ID选择器
    $("#ID选择器") ;
    $("#btn") ;
    //类名选择器
    $(".class属性名") ;
    $(".dv");
    //标签选择器
    $("b标签名");
    $("div") ;
    //交集选择器
    $("选择器.class属性值") ;
    //dv是类名
    $("div.dv")
    //并集选择器
    $("选择器,选择器,....") ;
    $("div,li,a") ;
    //子代选择器
    $("父代选择器>子代选择器");
    $("ul>li") ;
    //后代选择器
    $("选择器 选择器") ;
    $("ul a") ;
    //属性选择器
    //有type属性的input标签
    //中括号
    $("input[type]") ;
    //有type属性值为password的input标签对象
    $("input[type = password]") ;
    //有href属性的a标签
    $("a[href]") ;
    //^ : 打头
    //$ : 结尾
    //有href属性并且是http开头的a标签;
    $("a[^=http]") ;
    //有href属性并且是com结尾的a标签 ;
    $("a[$=com]") ;
</script>

1.4        过滤选择器

            //css() : 设置样式
            //1.可以链式调用
            //2.传入一个参数,如果是对象,那么就是设置多个属性值
            //3.传入一个参数,如果是个字符串,那么就是返回这个属性对应的值
            //4.传入两个参数,第一个是属性,第二个是值,为该属性设置值,设置单个属性

            //下标从0开始 
            //获取所有的li,然后只要第三个
            //$("li.eq(2).css('color','red')") ;

            //odd 奇数 ,even 偶数,下标0开始
            //引号中,可以写,也可以转换为首字母大写,但是不在引导中则必须转换为大写
            // $("li:even").css({
            //     'background-color':'red' ,
            //     fontSize:'20px'
            // });
            
            //小于第三个的
            $("li:lt(2).css('color',''pink)") ;
            //大于第四个的
            $("li:gt(3).css('color','green')") ;

1.5        筛选选择器

    //获取div的所有子标签
    // $("div").children().css('color','red') ;
    
    // //获取div下指定子标签(不包括后代,只包括子代)
    // $("div").children("span").css('color','red') ;

    //获取div下指定后代的标签
    // $("div").find("span").css('color','red');

    //获取第二个子标签(下标从0开始)
    // $("div").children().eq(1).css('color','red') ;

    //获取h2素有的兄弟(同级别,当前作用域中,非自己)
    // $("h2").siblings().css('color','red');

    //next下一个弟弟妹妹,nextAll : 所有的弟弟
    // $("h2").next().css('color','red') ;
    // $("h2").nextAll().css('color','red') ;
    
    //prev上一个哥哥 .prev : 所有的哥哥
    // $("h2").prev().css('color','red') ;
    // $("h2").prevAll().css('color','red') ;

    //父标签
    // $("h2").parent().css('color','red') ;

    //not不要的
    // $("div").children().not("h,span").css('color','red') ;

    //获取span标签在div中的索引(是第几个标签,下标0开始)
    //1
    //console.log($("div".children("span").index)) ;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值