选择器小案例01

原创2019-08-20 16:02:4212
摘要:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, in

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>jquery小案例</title>

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

</head>

<body>

       //基本选择器

       // 语法

       // $('#id名')根据给定的id来匹配到元素

       // $('.class名')根据给定的class来匹配到元素

       // $('element')根据给定的标签名来匹配到元素

       // $('*')匹配所有元素

       // $('#id,.class名,element')匹配到页面中多个选择器

         // $(document).ready(function(){

         //    $('#box').css('background','red')

         //    $('.box').css('background','blue')

         //   $('span').css('font-size','30px')

         //   $('*').css('font-family','宋体')

         //   $('#box,.box,span').css('color','pink')

       

         // })

       //  层级选择器(相当于父类和子类的元素关系)

       

       // 给定的父级元素下匹配所有的子元素:$('父级元素 > 子级元素')

       // 给定的祖先元素下匹配所有的后代元素:$('祖先元素  后代元素')

       // 匹配紧跟在prev元素后面的next元素:$('prev + next')(同级的元素)

       // 匹配prev元素后面所有的siblings元素:$('prev ~ siblings')

       // $(document).ready(function(){

       

       //   // $('ul>li').css('list-style','none')

       //   $('ul li').css('list-style','none')

       //   $('input+button').css('height','50px')

       //   $('label~input').css('background','pink')

       // })

       // 顺序选择器

       // 1、顺序

       // $(':first') 第一个元素

       // $(':last')  最后一个元素

       // 2、比较(x的顺序是从0开始)

       // $(':gt(x)')表示大于值x的元素

       // $(':lt(x)')表示小于值x的元素

       // $(':eq(x)')表示等于值x的元素

       // 3、奇偶数

       // $(':odd')奇数顺序

       // $(':even')偶数顺序

       // 4、非

       // $(':not(selector)')匹配不是selector的所有元素

       

       //$(document).ready(function(){

        // $('p:first').css('color','red')

        // $('p:last').css('color','blue')

        // $('p:gt(1)').css('font-size','30px')

        // $('p:lt(2)').css('color','red')

        // $('p:eq(1)').css('color','red')

        // $('p:odd').css('background','#ccc')

        // $('p:even').css('background','pink')

       //$('p:not(#box)').css('background','red')

       //})

       // 内容选择器

       // 语法:

       // $(':contains(text)') 匹配包含给定文本(text)的元素

        // $(':has(selector)')匹配包含特定选择器元素的元素

        // $(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素)

        // $(':parent')匹配含有子元素或者文本的元素

       //$(document).ready(function(){

        // $('div:contains(jun)').css('background','blue')

        //  $('div:has(span)').css('color','red')

        //  $('div:empty').css('background','red')

        // $('div:parent').css('background','red')

       //})

       // 属性选择器

       // 语法:

       // $('[属性名]')匹配包含给定属性的元素

       // $('[attribute=value]')匹配给定属性是某个特定值的元素

       //$('[attribute!=value]')匹配所有不含有指定值的属性,或者说是属性不等于特定值的元素

       // $('[attribute ^= value]')匹配给定属性是以某些值开始的元素

       // $('[attribute $= value]')匹配给定属性是以某些值结尾的元素

       // $('[attribute *= value]')匹配给定属性包含某些值的元素

       //$('attrSel[1] attrSel[1] attrSel[1]')复合选择器,需要同时满足多个条件时使用

       //$(document).ready(function(){

         // $('input[type]').css('background','pink')

         // $('input[type=button]').css('background','blue')

         // $('input[type!=text]').css('background','red')

         // $('input[type ^=t ]').css('background','red')

         // $('input[type $=n ]').css('background','red')

         // $('input[type *=o ]').css('background','blue')

        // $('input[id][name*=n]').css('background','red')

       //})

       // 表单选择器

       // 语法:

       // $(':enabled')所有激活的input元素(可以使用的input元素)

       // $(':disabled')所有禁用的input元素(不可以使用的input元素)

        // $(':selected')所有被选取的元素,针对于select元素

        // $(':checked')所有被选中的input元素

   <script>

       $(document).ready(function(){

          $('div').hide()

          $('button').click(function(){

           $('div').show()

          })

       })

       

   </script>

   <div style="width: 100px;height: 100px;background:pink;"></div>

   <button>点击</button>

</body>

</html>


批改老师:Peter-Zhu批改时间:2019-08-20 17:29:20
老师总结:咱们使用jQuery, 一个重要原因, 就是选取元素非常的方便, 但是要注意, 他返回的是一批而不是一个, 默认是循环处理

发布手记

热门词条

第九期线上培训班