简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Jquery选择器
Blogger Information
Blog 14
fans 0
comment 0
visits 11828
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Jquery选择器
JUNL的博客1111
Original
660 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1,基本选择器</title>
    <style type="text/css">
    table,td{
    border:1px solid #333;
    }
    table{
    border-collapse:collapse;
    margin:30px auto;
    width:80%;
    text-align:center;
    }
    table caption{
    font-size:1.5em;
    margin-bottom:15px;
    }
    .bg-orange{
    font-weight:bolder;
    color:white;
    background-color:orange;
    }
    </style>
</head>
<body>
<table>
    <caption>用户信息表</caption>
    <tr id="title">
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr class="mark">
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr class="mark">
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
            <td>05</td>
            <td>06</td>
            <td>07</td>
            <td>08</td>
            <td>09</td>
            <td>10</td>
        </tr>

</table>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //1.标签 CLASS类选择器,ID选择器
    //2.这四个叫基本选择器,基础选择器,简单选择器,入口选择器.
    //1.标签选择器:tag
   // $('td').css('background-color','red')
        //2.ID选择器
       $('#title').css('background-color','red')
    //3.class 类选择器
    $('.mark').addClass('bg-orange')
    //4.通配选择器
    $('tr:nth-child(3)~*').css('background-color','pink')

    </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>2,层级选择器</title>
    <style type="text/css">
     .red{color:red;}
     .green{color:green;}
     .black{color:black}
</style>
</head>
<body>
<ul>
    <li>最新电影01<a href="">立即播放</a></li>
    <li>最新电影02<a href="">立即播放</a></li>
    <li>最新电影03<a href="">立即播放</a></li>
    <li>最新电影04<a href="">立即播放</a></li>
    <li>最新电影05<a href="">立即播放</a></li>
    <li>最新电影06<a href="">立即播放</a></li>
    <li>最新电影07<a href="">立即播放</a></li>
    <li>最新电影08<a href="">立即播放</a></li>
    <li>最新电影09<a href="">立即播放</a></li>
    <li>最新电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //1.后代:空格
   // $('li a').addClass('green')
    //2.子元素选择器
    //$('ul>*').addClass('red')
    //3.相邻兄弟选择器+
    //$('li:nth-child(5)+li+li+li').addClass('green')
    //4.全部兄弟选择器
$('li:nth-child(5)~*').addClass('red')
    //5.直接选择第一个或最后一个
    //:叫过滤器
    $('li:first-child').css('color','yellow')
    $('li:last-child').css('color','yellow')
    $('li:first').css('color','brown')
    $('li:last').css('color','pink')
    //6.直接命中元素
    // $('li:nth-child(8)').css('color','pink')
   $('li:eq(8)').css('color','green')
    //清除所有元素上STYLEL属性
    $('*').removeAttr('style')
    //清除所有元素上的CLASS属性
    $('*').removeClass()
    //将序号大于3的元素变成红色
    //$('li:gt(2)').addClass('green')
    //将序号小于8的元素变成绿色
    //$('li:lt(8)').addClass('red')
    $('li:even').addClass('red')
    $('li:odd').addClass('red')
    </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.内容过滤器</title>
    <style type="text/css">
        .bg-wheat{background-color:wheat;}
        .bg-green{background-color:green;}
        .bg-pink{background-color:pink;}

        </style>
</head>
<body>
<h2>春晓</h2> <span></span>>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少? </p>
<p>我的女神<img src="../image/001.jpg" width="150"></p>
<p>我想对园园说:<input type="text" name=""><button>提交</button></p>

</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //1.选择有指定内容的元素
    //$('p:contains("春")').addClass('bg-wheat')
    //$('p:contains(\'春\')').addClass('bg-wheat')
    //$('p:contains("风")').addClass('bg-green')
    //2.选择内容为空的元素


    $(':empty').text('作者:孟浩然')
    //3.选择有指定标签的元素
    $('p:has("img")').addClass('bg-wheat')
    //4.选择所有以P为父元素的节点,添加一个绿背景
    //为什么视频图中图背景颜色不变???
   $('p:parent').addClass('bg-green')
       //取反过滤器
    $(':not(:empty)').css('color','pink')


    </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.表单过滤器</title>
</head>
<body>
<form action="" method="post"></form>
<fieldset>
    <legend>用户注册</legend>
    <p>用户名:<input type="text" name="name" required=""></p>
    <p>邮箱:<input type="email" name="email" required=""></p>
    <p>密码: <input type="password" name="psw1" required=""></p>
    <p> 确认密码:<input type="password" name="psw2" required=""></p>
    <p>性别:<input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女
    </p>
    <p>上传头像:<input type="file" name=""></p>
    <p>
        WEB语言:
        <input type="checkbox" name="lang[]" value="java">java
       <input type="checkbox" name="lang[]" value="php">php
      <input type="checkbox" name="lang[]" value="javascript">javascript
      <input type="checkbox" name="lang[]" value="python">python</p>
    <p>级别:
        <select name="level">
            <option value="0"> 小白</option>
            <option value="1">入门</option>
            <option value="2">中级</option>
            <option value="3">高级</option>
            <option selected="" value="4">去火星吧</option>
        </select></p>
    <p><textarea cols="40" row="5"></textarea>></p>
    <p><button type="submit" name="submit">提交</button>
    <button type="reset" name="reset">重置</button></p>


</fieldset>

</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //1 根据类型来选择表单控件元素
    //CSS 的选择方法 仅选择INPUT标签
    //$('input').css('background-color','pink')
    //JQUERY的写法 <INPUT><TEXTAREA><BUTTON><SELECT>
   // $(':input').css('background-color','pink')
    //$('input:input').css('background-color','green')
        //CSS:INPUT===JQUERY:INPUT:INPUT

   // $(':input[type="password"]').css('background-color','green')
    //jquery进行改写
    $(':input:password').css('background-color','brown')
    //2.根据表单控件的特征来选择元素:file,imge,
    $(':file').css('background-color','green')
    //3 直接用控制类型来选择元素
    $(':text').css('background-color','lightgreen')

    // 只处理提交按纽
     $(':button:submit').css({'background-color':'red','color':'white',
         'font-size':'1.5em','border':'none','width':'90px','height':'40px'})
     </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>5.常用的过滤方法</title>
<style type="text/css">

</style>
</head>
<body>
<ul>
    <li>最新电影01<a href="">立即播放</a></li>
    <li>最新电影02<a href="">立即播放</a></li>
    <li>最新电影03<a href="">立即播放</a></li>
    <li>最新电影04<a href="">立即播放</a></li>
    <li>最新电影05<a href="">立即播放</a></li>
    <li>最新电影06<a href="">立即播放</a></li>
    <li>最新电影07<a href="">立即播放</a></li>
    <li>最新电影08<a href="">立即播放</a></li>
    <li>最新电影09<a href="">立即播放</a></li>
    <p>我是一个别类呀</p>
    <li>最新电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //. 过滤方法 也叫过滤函数,大多与前面过的过滤器是一样的
    // 1..get()将jquery对象转化为DOM对象
    $('li').get(1).style.color='red'
    //2. eq()返回指定索引的元素,返回的是jquery对象
    $('li').eq(4).css('color','red')
    //3   first()无参数
    $('li').first().css('color','red')
    //4 last()无参数
    $('li').last().css('color','red')
    //5 toArray()返回的是DOM数组
    var li=$('li').toArray()
    for (var i=0;i<li.length;i++){
        li[i].style.color='green'
    }
    //6.find() 返回所有的后代元素
    $('ul').find('li').css('color','coral')
    $('ul').find('a').css('color','red')
    //7.children() 返回所有的直接子元素
    $('ul').children('p').css('color','red')
    //8.each(function()
    $('*').removeAttr('style')
    $('li').each(function(){$(this).css('background-color','red')})
    //元素的遍利方法
    $('*').removeAttr('style')
    $('li').eq(2).next().css('color','blue')
    $('li').eq(2).nextAll().css('color','blue')
    $('li').eq(2).siblings().css('color','blue')
    //prev().prevAll()
    //10 add()
    $('*').removeAttr('style')
    $('li').add('p').css('color','red')
    //li.slice():从集合中获取一组连续的函数 不选择最后一个
    $('*').removeAttr('style')
    $('li').slice(2,5).css('color','red')
    $('li').slice(2).css('color','red')


   </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！