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

本文链接：https://blog.youkuaiyun.com/whosedad/article/details/121525969

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

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

1.JQuery

1.1 什么是JQuery

(1)、JavaScript与jQuery比较

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

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

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，例如:Google、Microsoft、IBM、Netflix。

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

jQuery安装

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

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

<head>

</head>

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

<head>

</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)) ;