码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 之 jquery选择器

时间:2018-09-01 12:28:42      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:xxxxx   BMI   代码   font   htm   rip   XML   cme   tar   

很好理解,我们之前选择进行DOM选择时,都用的是,docment.getElementById()document.getElementsByTagName(),等。

这样的代码,一般情况下可用,但如果存在层级关系,这种情况下我们总是需要递归选择。例如:

如,查找<table class="green">里面的所有<tr>,一层循环实际上是错的,因为<table>的标准写法是:

<table>
    <tbody>
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

  很显然,我们要进行 for 嵌套,才可以找到所有 tr 标签。

jquery 

jquery对象,是一个标签组,类似数组。

jquery查找方法:

使用jQuery选择器分别选出指定元素:

1.仅选择JavaScript

2.仅选择Erlang

3.选择JavaScript和Erlang

4.选择所有编程语言

5.选择名字input

6.选择邮件和名字input

<!-- HTML结构 -->
<div id="test-jquery">
    <p id="para-1" class="color-red">JavaScript</p>
    <p id="para-2" class="color-green">Haskell</p>
    <p class="color-red color-green">Erlang</p>
    <p name="name" class="color-black">Python</p>
    <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
        <legend>注册新用户</legend>
        <fieldset>
            <p><label>名字: <input name="name"></label></p>
            <p><label>邮件: <input name="email"></label></p>
            <p><label>口令: <input name="password" type="password"></label></p>
            <p><button type="submit">注册</button></p>
        </fieldset>
    </form>
</div>

  凡是查找,都用  $(‘ xxxxxx ‘ ) ,其中xxxxxx 是具体的筛选方案。 解决方案如下。

var js=$(‘#para-1‘);                               //通过名字查找
var erl=$(‘.color-red.color-green‘);               //通过 class查找,既要满足 color-red 又要满足 color-green
var jserl=$(‘.color-red‘);                         //class 查找,  只要含有  color-red  的,都会被查找
var allcpl=$(‘#test-jquery>p‘);                    // 所有在 名为 ’test-jquery‘  标签下的 p标签
vat nameinput=$(‘input[name=‘name‘]‘);             // 首先是个  input,然后 name要满足
vat nameinput=$(‘input[name="name"],input[name="email"]‘);    // 是个input,name是 name 或 email

  

 



JavaScript 之 jquery选择器

标签:xxxxx   BMI   代码   font   htm   rip   XML   cme   tar   

原文地址:https://www.cnblogs.com/3532gll/p/9569286.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!