1、基础选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>基础选择器</title>

</head>

<body>

    <div id="box">id选择器</div>

    <div class="box2">类选择器</div>

    <ul>

        <li>路飞学城</li>

        <li>路飞学城</li>

        <li>路飞学城</li>

    </ul>

</body>

<script src="jquery-3.2.1.js"></script>

<script type="text/javascript">

    //使用jQuery要有入口函数，回调函数

    $(function () {

        //1.id选择器 $('#box');

        console.log($('#box'));

        $('#box').css('color','red');

                 //设置一个值

        $('#box').css('font-size','30px');

        //2.类选择器 $('.box2')

                //  设置多个值 设置多个值得时候使用对象存储 key:value

        $('.box2').css({'color':'green','font-size':'34px'});

        //3.标签选择器  $('li')

        $('li').css({'background':'pink','font-size':'55px'});

        //4.通配符选择器  *  使用不是很频繁

        console.log($('*'))

                //清空整个界面的dom元素

        $('*').html('');

    })

</script>

</html>

2、层级选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /*#brother{

                color: red;

                font-size:24px;

            }*/

        </style>

    </head>

    <body>

        <ul>

            <li id="brother">路飞学城1</li>

            <li><a href="https://www.luffycity.com">路飞学城2</a></li>

            <li class="li3">路飞学城3</li>

            <li>路飞学城4</li>

            <li>路飞学城5</li>

        </ul>

        <div id="box">

            <p id="father">天王盖地虎</p>

            <p>我是你老母</p>

            <p>宝塔镇河妖</p>

            <p>蘑菇放香蕉</p>

            <div id="box2">

                <p>小鸡炖蘑菇</p>

            </div>

        </div>

    </body>

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

    <script type="text/javascript">

        //使用jquery的时候 要有入口函数 回调函数

        $(document).ready(function(){

            //1.后代选择器  div p

            $('#box p').css('color','red');

            //2.子代选择器  div > p

            $('#box>p').css('color','yellow');

            //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +

            $('#father+p').css('font-size','30px');

            //4.兄弟选择器 ~

            $('#father~p').css('background','blueviolet');

            console.log($('li'));

            //5.获取第一个元素

            $('li:first').css('font-size','50px');

            //6.获取最后一个元素

            $('li:last').css('font-size','50px');

                // 0 1 2 3

            $('li:eq(3)').css('font-size','50px');

        })

    </script>

</html>

3、基本过滤选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>基本过滤选择器</title>

    </head>

    <body>

        <ul>

            <li>哈哈哈哈，基本过滤选择器</li>

            <li>嘿嘿嘿</li>

            <li>天王盖地虎</li>

            <li>小鸡炖蘑菇</li>

        </ul>

    </body>

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

    <script type="text/javascript">

        $(function(){

            //:first  获取第一个元素

            $('li:first').text('真的吗？')

            //:last 获取最后一个元素

            $('li:last').html('我是最后一个元素？')

            //:odd 匹配所有索引值为奇数的元素，从0开始计数

            $('li:odd').css('color','green');

            //:even 匹配所有索引值为偶数的元素，从0开始计数

            $('li:even').css('color','red')

            //:eq(index) 获取给定索引值的元素 从0开始计数

            $('li:eq(1)').css('font-size','30px')

            //:gt(index)匹配所有大于给定索引值的元素

            $('li:gt(1)').css('font-size','40px')

            //:lt(index) 匹配所有小于给定索引值的元素

            $('li:lt(1)').css('font-size','40px')

            //一个给定索引值的元素

            console.log($('p:eq(3)').text())

        })

    </script>

</html>

4、属性选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <h2 class="title">属性元素器</h2>

            <!--<p class="p1">我是一个段落</p>-->

            <ul>

                <li id="li1">分手应该体面</li>

                <li class="what" id="li2">分手应该体面</li>

                <li class="what">分手应该体面</li>

                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked"></input>

                <input name="username1111" type='text' value="1"></input>

                <input name="username2222" type='text' value="1"></input>

                <input name="username3333" type='text' value="1"></input>

                <button class="btn-default">按钮1</button>

                <button class="btn-info">按钮1</button>

                <button class="btn-success">按钮1</button>

                <button class="btn-danger">按钮1</button>

            </form>

        </div>

    </body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $(function(){

//            标签名[属性名] 查找所有含有id属性的该标签名的元素

            $('li[id]').css('color','red');

            //匹配给定的属性是what值得元素

            $('li[class=what]').css('font-size','30px');

            //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

            $('li[class!=what]').css('font-size','50px');

//            匹配给定的属性是以某些值开始的元素

            $('input[name^=username]').css('background','gray');

            //匹配给定的属性是以某些值结尾的元素

            $('input[name$=222]').css('background','greenyellow');

            //匹配给定的属性是以包含某些值的元素

            $('button[class*=btn]').css('background','red')

        })

    </script>

</html>

5、筛选选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <p class="p1">

                <span>我是第一个span标签</span>

                <span>我是第二个span标签</span>

                <span>我是第三个span标签</span>

            </p>

            <button>按钮</button>

        </div>

        <ul>

            <li class="list">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">

        //获取第n个元素 数值从0开始

        $('span').eq(1).css('color','#FF0000');

        //获取第一个元素 :first :last    点语法  ：get方法 和set方法

        console.log($('span').last());

        $('span').last().css('color','greenyellow');

        console.log($('span').parent('.p1'))

        $('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'});

        //.siblings()选择所有的兄弟元素

        $('.list').siblings('li').css('color','red')

        //.find()

        //查找所有的后代元素

        $('div').find('button').css('background','yellow')

    </script>

</html>

6.jquery对象和DOM对象转换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery对象和Dom对象得转换</title>

    <style type="text/css">

        #box{ width: 200px; height: 200px;background-color: red;}

    </style>

</head>

<body>

    <div id="box">

        天王盖地虎

    </div>

    <button>隐藏</button>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        // Dom --》 jquery

        var oDiv = document.getElementById('box');

        console.log(oDiv);

        console.log($(oDiv));

        $(oDiv).click(function () {  // 回调函数

            alert(111)

        });

        // jquery --》 dom

        console.log($('button'));

        console.log($('button')[0]);

        console.log($('button').get(0));

        var isShow = true;

        $('button')[0].onclick = function () {

            // alert(222)

            if(isShow){

                $(oDiv).hide();

                // this.innerText = '显示'

                // console.log($(this))

                $(this).text('显示');

                isShow = false;

            } else{

                $(oDiv).show();

                $(this).text('隐藏');

                isShow = true;

            }

        }

    </script>

    <!--

        总结：

            DOM对象转换成jquery对象

                var box = document.getElementById('box');

                console.log($(box));   .click

            jquery对象转化成DOM对象

                第一种方式：

                $('button')[0]        .onclick

                第二种方式：

                $('button').get(0)    .onclick

    -->

</html>

22-[jQuery]-选择器, js jQuery对象转换的更多相关文章

  1. Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

  2. jquery.form.js+jquery.validation.js实现表单校验和提交

      一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...

  3. 对比js库分枝Jquery和js获取对象的方式

    一.Jquery和JS的认识 对于这点不谈详细,但能有一个能有一个全面的印象,Jquery本质上也是JS,只不过用一句话概括就是   “write letter and do more”,写的更少,做 ...

  4. jQuery入门、jQuery选择器、jQuery操作

    一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...

  5. jQuery.form.js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

  6. jquery.cookie.js——jquery的cookie插件

    一.JS文件 /*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2 ...

  7. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  8. JS 将对象转换成字符 字符串转换成json对象

    //js对象 var user = { "name": "张学友", "address": "中国香港" }; //将对 ...

  9. 13 -3 jquery选择器和 jquery动画

    一 选择器: 1 基本选择器 例子: <!--id 类 标签--> <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. Oracle常见等待事件

    1Buffer busy waits从本质上讲,这个等待事件的产生仅说明了一个会话在等待一个Buffer(数据块),但是导致这个现象的原因却有很多种.常见的两种是: ·         当一个会话视图 ...

  2. [SQL SERVER] 映射网络驱动器，让SQL服务器可见

    在服务器上运行: EXEC sp_configure 'show advanced options', 1; GO RECONFIGURE; GO EXEC sp_configure 'xp_cmds ...

  3. asp.net 對象圖解

  4. Entity Framework对同一张表配置一对多关系

    在实际的项目开发中,可能会遇到同一张表同时保存自身和上级(或下级)的信息(一般是通过设置一个上级主键[ParentId]的列与主键[Id]关系) 例如:城市库,有国家.省.市...,省的ParentI ...

  5. REST Framework组件的解析源码

    首先我们要知道解析器的作用 解析器就是对你请求体中的数据进行反序列化.封装 把你的所有的请求数据都封装在request.data中 以后就在request.data中获取数据 我们先导入rest_fr ...

  6. inclusion_tag 界面的嵌套 和渲染

    后端的html渲染到前端: 如果后端直接定义的是html标签,传到前端的时候因为浏览器的安全机制就会直接渲染成字符串如果想要渲染成需要的标签,就需要在后端用make_save()进行包裹,或者直接在前 ...

  7. 阿里云CentOS 7服务器挂载数据盘

    本次使用的是centOS 7.4 64位操作系统 第一步:查看磁盘情况 我们发现,我总共有三个磁盘,分别为/dev/vda(100G)./dev/vdb(200G)./dev/vdc(100G),而被 ...

  8. 铁乐学Python_day09_函数

    今天我们来学习函数. 产生的原由,若没有函数,会显得重复代码多,可读性差,也会造成重复造轮子的情景. 故产生了函数,用来封装好一个功能,它是以功能为导向的. 1.[函数的样式] 例如自己定义一个函数: ...

  9. 解决数据库自增ID的问题

    (1)设置主键自增为何不可取这样的话,数据库本身是单点,不可拆库,因为id会重复. (2)依赖数据库自增机制达到全局ID唯一使用如下语句:REPLACE INTO Tickets64 (stub) V ...

  10. hadoop学习;hdfs操作；执行抛出权限异常: Permission denied；api查看源代码方法；源代码不停的向里循环；抽象类通过debug查找源代码

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010026901/article/details/26587251 eclipse快捷键alt+s ...