zoukankan html css js c++ java

前端开发之jQuery篇--选择器

主要内容：

一、jQuery简介

　　1、介绍　

jQuery是一个JavaScript库；极大简化了JavaScript编程，所以学习难度大大降低。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

　　2、特性

　　　　jQuery是一个javascript函数库。

　　3、jquery 和 JavaScript的区别　　　

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本；
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发；
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

注意：
    一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

　　　　（1）执行时间不同　　　　　

JavaScript---window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

jQuery---$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

　　　　（2）编写个数不同　

JavaScript --- window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

jQuery --- $(document).ready()可以同时编写多个，并且都可以得到执行

　　　　（3）简化写法不同

JavaScript --- window.onload没有简化写法
 
jQuery --- $(document).ready(function(){})可以简写成 $(function(){})

　　4、下载方式

　　　　方式一：下载到本地，使用时导入，有两个版本，一份是精简的，另一份是未压缩的（供调试或阅读）。

　　　　　　　　下载官方地址：http://jquery.com/download/#Download_jQuery

　　　　方式二：使用库代替

　　　　　　　　Google和Microsoft对jQuery的支持都很好，可以从Google 或 Microsoft 加载 CDN jQuery 核心文件。

　　　　　　　　如：使用Microsoft的CDN　　　　　　

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

二、jQuery文件的引入

　　使用jQuery第一步，就是要先引入jQuery，然后再写相的jQuery代码。　

// 注意：DOM元素加载完成之后就会调用
// 程序执行需要有入口函数
$(document).ready(function(){
    alert(666);
    })

等价于

$(function(){
    alert(666);
    })

三、jQuery选择器

　　1、基础选择器　　　

<script type="text/javascript">
    // jQuery的入口函数
    $(document).ready(function(){
        // 基础选择器
        //1、id选择器
        console.log($("#first"));
        $("#first").css('color','red');

        //2、类选择器
        $('.third').css('color','green');

        //3、标签选择器
            // 设置一个值
//        $('a').css('color','orange');
            // 设置多个值
        $('a').css({'color':'blue','font-size':'20px'});

        // 4、通配符选择器" * ",使用不是很频繁
        console.log($('*'));
          // 清空整个界面的dom元素
//        $('*').html('');
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>

</head>
<body>
    <ul>
        <li id="first">我是第一个li标签</li>
        <li><a href="https://home.cnblogs.com/u/schut/">暮光微凉</a></li>
        <li class="third">我是第三个li标签</li>
        <li>我是一个li标签</li>
    </ul>
</body>
<!--第一步，引入jQuery文件-->
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    // jQuery的入口函数
    $(document).ready(function(){
        // 基础选择器
        //1、id选择器
        console.log($("#first"));
        $("#first").css('color','red');

        //2、类选择器
        $('.third').css('color','green');

        //3、标签选择器
            // 设置一个值
//        $('a').css('color','orange');
            // 设置多个值
        $('a').css({'color':'blue','font-size':'20px'});

        // 4、通配符选择器" * ",使用不是很频繁
        console.log($('*'));
          // 清空整个界面的dom元素
//        $('*').html('');
    })
</script>

</html>

View Code

　　2、层级选择器　

<script type="text/javascript">
    // jQuery的入口函数
    $(document).ready(function () {
        // 1、后代选择器 div p
        $('#box p').css(
            'color','red'
        );
        // $(".box2 p").css("font-size","30px");
        // 2、子代选择器 div > p
        $('#box>p').css('color','green');
        // $(".box2>p").css("color","red");
        // 3、毗邻选择器---匹配被选中的那个元素后紧接着的下一个元素
        $('#first+p').css('font-size','50px');
        // $(".brother+li").css('font-size',"50px");
        // 4、兄弟选择器 --- 匹配被选中的那个元素之后所有的兄第姐妹元素
        $('#first~p').css('blackground','orange');
        // $('.brother~li').css("color",'pink');

        // 5、获取第一个元素/最后一个元素/选中指定的元素
        $('li:first').css('font-size','25px');
        $('li:last').css('font-size','10px');
        $('li:eq(1)').css({'font-size':'25px','color':'pink'});// eq(int) int值从0开始
    })
</script>

　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
</head>
<body>
    <div id="box1">
        <p id="first">111111</p>
        <p>222222</p>
        <p>333333</p>
        <div class="box2">
            <p>222333</p>
        </div>
    </div>
    <ul>
        <li>one</li>
        <li class="brother">two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    // jQuery的入口函数
    $(document).ready(function () {
        // 1、后代选择器 div p
        $('#box p').css(
            'color','red'
        );
        // $(".box2 p").css("font-size","30px");
        // 2、子代选择器 div > p
        $('#box>p').css('color','green');
        // $(".box2>p").css("color","red");
        // 3、毗邻选择器---匹配被选中的那个元素后紧接着的下一个元素
        $('#first+p').css('font-size','50px');
        // $(".brother+li").css('font-size',"50px");
        // 4、兄弟选择器 --- 匹配被选中的那个元素之后所有的兄第姐妹元素
        $('#first~p').css('blackground','orange');
        // $('.brother~li').css("color",'pink');

        // 5、获取第一个元素/最后一个元素/选中指定的元素
        $('li:first').css('font-size','25px');
        $('li:last').css('font-size','10px');
        $('li:eq(1)').css({'font-size':'25px','color':'pink'});// eq(int) int值从0开始
    })
</script>
</html>

View Code

　　3、基本过滤选择器　

    <script type="text/javascript">
        $(function(){
            //first 获取第一个元素/ last 最后一个元素
            $('li:first').css('color','blue');
            $('li:last').css('color','green');

            // odd -- 匹配所有索引值为奇数的元素，从0开始计数
            $('li:odd').css('color','yellow');
            // even -- 匹配所有索引值为偶数的元素，从0开始计数
            $('li:even').css('font-size','25px');

            // 选中索引值为1的运算
            $('li:eq(2)').css('font-size','8px');
        })
    </script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本过滤选择器</title>
</head>
<body>
    <ul>
        <li>第1行</li>
        <li>第2行</li>
        <li>第3行</li>
        <li>第4行</li>
        <li>第5行</li>
    </ul>
</body>
    <script src="../jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //first 获取第一个元素/ last 最后一个元素
            $('li:first').css('color','blue');
            $('li:last').css('color','green');

            // odd -- 匹配所有索引值为奇数的元素，从0开始计数
            $('li:odd').css('color','yellow');
            // even -- 匹配所有索引值为偶数的元素，从0开始计数
            $('li:even').css('font-size','25px');

            // 选中索引值为1的运算
            $('li:eq(2)').css('font-size','8px');
        })
    </script>
</html>

View Code

　　4、属性选择器　　

<script type="text/javascript">
    $(document).ready(function () {
        // 标签名[属性名] 查找所有含有id/class属性的该标签名的元素
        $('li[id]').css('color','red');
        $('li[class]').css("color","gold");

        // 匹配给定的属性的元素
        $('li[class=second]').css('font-size','20px');
        $('button[class=btn-success]').css('background','blue');

        // 匹配所有不含有或不等于指定属性的元素
        $('li[class!=second]').css('color','green');

        // 匹配给定的属性是以某些值开始的元素
        $('input[name^=usename]').css('background','orange');
        $('button[class^=btn]').css('color','pink');

        // 匹配给定的属性是以某些值结尾的元素
        $('input[name$=2]').css('background','green');
        $('button[class$=danger]').css('background','green');

        // 匹配给定的属性是以包含某些值的元素
        $('button[class*=info]').css('background','red');
        $('input[name*=usename]').css({'width':'100px','height':'25px'});
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>
    <ul>
        <li id="one">第1个li标签</li>
        <li id="two" class="second">第2个li标签</li>
        <li class="third">第3个li标签</li>
        <li>第4个li标签</li>
        <li>第5个li标签</li>
    </ul>
    <form action="" method="post">
        <input name="usename" type="text" value="1" checked="checked"></input>
        <input name="usename2" type="text" value="1" ></input>
        <input name="usename3" type="text" value="1" ></input>
        <input name="usename4" type="text" value="1" ></input>
        <button class="btn-default">默认</button>
        <button class="btn-info">信息</button>
        <button class="btn-success">成功</button>
        <button class="btn-danger">警告</button>
    </form>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 标签名[属性名] 查找所有含有id/class属性的该标签名的元素
        $('li[id]').css('color','red');
        $('li[class]').css("color","gold");

        // 匹配给定的属性的元素
        $('li[class=second]').css('font-size','20px');
        $('button[class=btn-success]').css('background','blue');

        // 匹配所有不含有或不等于指定属性的元素
        $('li[class!=second]').css('color','green');

        // 匹配给定的属性是以某些值开始的元素
        $('input[name^=usename]').css('background','orange');
        $('button[class^=btn]').css('color','pink');

        // 匹配给定的属性是以某些值结尾的元素
        $('input[name$=2]').css('background','green');
        $('button[class$=danger]').css('background','green');

        // 匹配给定的属性是以包含某些值的元素
        $('button[class*=info]').css('background','red');
        $('input[name*=usename]').css({'width':'100px','height':'25px'});
    })
</script>
</html>

View Code

　　5、筛选选择器　　

<script type="text/javascript">
    // jQuery的入口函数
    $(document).ready(function () {
        // 获取第n个元素，从0开始
        $('span').eq(0).css('color','gold');
        $('li').eq(1).css({'font-size':'30px','color':'blue'});

        // 获取第一个元素：first,最后一个元素：last。 点方法:get和set方法
        $('span').first().css('font-size','25px');
        $('span').last().css('font-size','12px');

        // .parent() 选取父级元素
        $('span').parent('.p1').css({'200px',height:'200px',background:'green'});
        $('#li_p').parent('ul').css('list-style','none');
        // .siblings() 选取所有的兄弟元素
        $('.cls-li').siblings('li').css('color','red');
        $('.span1').siblings('span').css({'color':'orange','font-size':'22px'});

        // .find() 查找所有的后代选择器
        $('div').find('button.btn1').css('color','pink');
        $('ul').find('li').css({'font-size':'16px','color':'pink'});
    })
</script>

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选选择器</title>
</head>
<body>
    <div id="box1">
        <p class="p1">
            <span class="span1">我是第一个span标签</span>
            <span>我是第二个span标签</span>
            <span>我是第三个span标签</span>
        </p>
        <button class="btn1">按钮</button>
        <button class="btn2">按钮</button>

        <ul>
            <li class="cls-li">1</li>
             <li>2</li>
            <li id="li_p">
                <p>3</p>
            </li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    // jQuery的入口函数
    $(document).ready(function () {
        // 获取第n个元素，从0开始
        $('span').eq(0).css('color','gold');
        $('li').eq(1).css({'font-size':'30px','color':'blue'});

        // 获取第一个元素：first,最后一个元素：last。 点方法:get和set方法
        $('span').first().css('font-size','25px');
        $('span').last().css('font-size','12px');

        // .parent() 选取父级元素
        $('span').parent('.p1').css({'200px',height:'200px',background:'green'});
        $('#li_p').parent('ul').css('list-style','none');
        // .siblings() 选取所有的兄弟元素
        $('.cls-li').siblings('li').css('color','red');
        $('.span1').siblings('span').css({'color':'orange','font-size':'22px'});

        // .find() 查找所有的后代选择器
        $('div').find('button.btn1').css('color','pink');
        $('ul').find('li').css({'font-size':'16px','color':'pink'});
    })
</script>
</html>

View Code

四、jQuery对象与DOM对象的转换

　　1、DOM对象 ---> jQuery对象　

var domBox = document.getElementById("box");
console.log($(domBox));
$(domBox).click(funtion(){
   alert(668) ;
})

　　2、jQuery对象 ---> DOM对象　

// 方式一：
    console.log($("buttn")[0]);

//方式二：
    console.log($('button').get(0));
    var isShow = true;
    $('button').get(0).onclick = function(){
       if(isShow)  
         {
              $('#box').hide();
              $(this).text("显示")；
         }
       else
        {
              $("#box".show());
              $(this).text(""隐藏好);
              isShow = true;
         }
}

　　完整代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象与DOM对象的转换</title>
</head>
<body>
    <div id="box">
        我是一个盒子
    </div>
    <button>隐藏</button>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
    // jQuery入口函数

    //DOM----> jQuery对象
    var oDiv = document.getElementById('box');
    console.log($(oDiv));
    $(oDiv).click(function () {
        alert(666);
    });
    // jquery对象转化成DOM对象
    // 第一种方式
    console.log($('button')[0]);
    // 第二种方式
    console.log($('button').get(0));
    var isShow = true;
    $('button').get(0).onclick = function () {
//        alert(233);
//        $('#box').hide();   // hide() 隐藏方法
//        console.log($(this));

        if(isShow){
            $('#box').hide();
            $(this).text('显示');
            isShow = false;
        }
        else{
            $('#box').show();
            $(this).text('隐藏');
            isShow = true;
        }
    }
</script>
</html>

View Code

回顶部↑

查看全文

相关阅读:
将vue文件script代码抽取到单独的js文件
 git pull 提示错误：Your local changes to the following files would be overwritten by merge
vue和uniapp 配置项目基础路径
 XAMPP Access forbidden! Access to the requested directory is only available from the local network.
postman与newman集成
 postman生成代码段
 Curl命令
 POST方法的Content-type类型
 Selenium Grid 并行的Web测试
 pytorch转ONNX以及TnesorRT的坑

原文地址：https://www.cnblogs.com/schut/p/9545739.html