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. .net网站转到出错页是如何实现的

    <customErrors mode="On" defaultRedirect="GenericErrorPage.htm"><error s ...

  2. [翻译] ValueTrackingSlider

    ValueTrackingSlider What is it? A UISlider Subclass that displays live values in a popUpView. It’s i ...

  3. NSOperation的使用细节 [3]

    NSOperation的使用细节 [3] 这一节我们来写自定义concurrent的operation,自定义concurrent的operation稍微有点复杂,需要按照某些既定的步骤编写才可以完成 ...

  4. 使用UISearchDisplayController

    使用UISearchDisplayController 虽然UISearchDisplayController名字中带有controller,可他不是一个UIView相关的controller,因为, ...

  5. Custom Settings.ini 和 bootstrap.ini 配置

    [Settings]Priority=DefaultProperties=MyCustomProperty [Default] ;SkipWizard=YES 如果跳过部署向导,则即使 SkipCap ...

  6. 重置 Winsock：初始化计算机网络环境

    初始化网络环境,以解决由于软件冲突.病毒原因造成的参数错误问题(复杂网络环境下慎用).批处理代码: netsh winhttp reset proxy netsh winhttp reset trac ...

  7. 一、Linux概述 二、Linux的安装 三、Linux的常用命令（重点）

    一.Linux概述###<1>操作系统 OS,管理和控制 计算机的 硬件和软件资源的 计算机程序. 最基本的系统软件. 是用户和计算机交互的桥梁,是硬件和软件交互的桥梁. 操作系统:she ...

  8. November 16th 2016 Week 47th Wednesday

    Success is falling nine times and getting up ten. 成功就是哪怕跌倒九次,也要在第十次爬起来. For most of us, we may choos ...

  9. php添加mongo模块

    可以从 http://pecl.php.net/package/mongo 下载目前的stable稳定版 我添加的是mongo-1.5.2.tgz # wget http://pecl.php.net ...

  10. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...