jQuery的DOM操作之选择元素

最新推荐文章于 2022-01-17 20:02:24 发布

桃花扇J

最新推荐文章于 2022-01-17 20:02:24 发布

阅读量646

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44584442/article/details/104634815

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

.get()

用jQuery选择器选择出来的元素被包装为jQuery对象，而面对不同的需求可能需要我们获取的有时候是jQuery对象，有时候是原生DOM元素，此时使用get方法进行进一步的选择可获得原生DOM元素，如下例

<div class="demo1">1</div>
<div class="demo2">2</div>
<div class="demo3">3</div>

js代码

<script src="./jquery.js"></script>        //引入jq文件
<script>
    console.log( $('div'));
    console.log( $('div').get(), '不传参');
    console.log( $('div').get(1),'传1');
    console.log( $('div').get(-1),'传-1');
    console.log( $('div').get(null),'传null');
    console.log( $('div').get(undefined),'传undefined');   
</script>

【解释】get方法可传以上几种不同的参数，打印结果如下

.eq()方法

.eq()的作用：按索引选择指定的DOM，返回的是jq对象，因此可直接用jq方法进行链式调用，如下

html代码

<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>

js代码

<script src="./jquery.js"></script>
<script>
    $('div').eq(0).css({width: '50', height: '50', lineHeight: '50px',color: '#fff', textAlign: 'center', backgroundColor: '#424242'});
</script>

结果

.eq()的传参：

<script src="./jquery.js"></script>
<script>
    console.log( $('div').eq(), '不传参');
    console.log( $('div').eq(1),'传1');
    console.log( $('div').eq(-1),'传-1');
    console.log( $('div').eq(null),'传null');
    console.log( $('div').eq(undefined),'传undefined'); 
</script>

因为有容错机制，所以基本不会报错，打印结果如下

.find()

作用：找到指定的子元素，返回其jq对象，可传选择器，jQuery对象，Element（匹配当前元素集合的元素）

html代码

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

js代码

<script src="./jquery.js"></script>
<script>
    $('div')
        .find('ul')
            .css({listStyle: 'none'})
                .find('li')
                    .css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px'});
    console.log($('div').find('ul').find('li'));        
    $('div')
        .find('li')
            .css({borderRadius: '10px', backgroundColor: '#424242', color: '#fff'});
    console.log($('div').find('li'));
                
</script>

结果如下

由结果可知，find方法既可以一层一层匹配，也可以直接定位到某层的子元素，区别如下

.fliter()方法

作用：对选择出来的对象做进一步筛选，是限制条件，可传选择器，jQuery对象，函数等参数

【例1】传类选择器

html代码

<div>
    <ul>
        <li>1</li>
        <li class="demo">2</li>
        <li>3</li>
        <li class="demo">4</li>
        <li>5</li>
    </ul>
</div>

js代码

$('div')
    .find('ul')
    .css({listStyle: 'none'})
        .find('li')
        .css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'})
            .filter('.demo')    //选择类名为demo的li元素
            .css({backgroundColor: 'steelblue'});
console.log($('div').find('ul').find('li').filter('.demo'));

结果

由上图可知已将类名为demo的li元素筛选出来

【例2】传过滤选择器

$('div')
    .find('ul')
    .css({listStyle: 'none'})
        .find('li')
        .css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'})
            .filter(':even')    //传过滤选择器，选择索引为偶数的元素
            .css({backgroundColor: 'steelblue'});
console.log($('div').find('ul').find('li').filter('.demo'));

结果

【例2】传函数

$('div')
    .find('ul')
    .css({listStyle: 'none'})
        .find('li')
        .css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'})
            .filter(function (index) {
                return index == 4 || $(this).attr("class") == "demo";
            })
            .css({backgroundColor: 'steelblue'});
console.log($('div').find('ul').find('li').filter('.demo'));

结果

.not()方法

.not()是.filter()的反选

【例】

$('div')
    .find('ul')
    .css({listStyle: 'none'})
        .find('li')
        .css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'})
            .not('.demo')
            .css({backgroundColor: 'steelblue'});
console.log($('div').find('ul').find('li').filter('.demo'));

结果

.is()方法

作用：判断元素是否被jq选择器选中，如果选中返回true，未选中返回false。

var flag = $('div ul li').is('.demo');
var num = $('div ul li').is('p');

在控制台打印flag和num分别为

应用如下

html代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

js代码

$('ul')
.css({listStyle: 'none', overflow: 'hidden'})
    .find('li')
    .css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'})
$('ul').click(function (e) {
    if ($(e.target).is('li')) {
        console.log($(e.target).text());
    } else {
        console.log($(this).text());
    }
})

结果

.has()方法

作用：设选择器选择出来的元素为A，has所传参数选择出来的元素为B，则has方法返回的是包括B的A，即选择有B的A。

【例】

html代码

<div>
    <ul>
        <li>
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </li>
        <li>
            <span>3</span>
        </li>
        <li><p>4</p></li>
    </ul>
</div>

js代码

$('ul').css({listStyle: 'none'})
//选择包含ul的li元素，并对其子元素里的li进行操作
$('li').has('ul').find('li').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: '#424242', color: '#fff'})
//选择包含span的li元素，并对子元素span进行操作
$('li').has('span').find('span').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: 'steelblue', color: '#fff'})
//选择包含p的li元素，并对子元素p进行操作
$('li').has('p').find('p').css({width:'50', height: '50', lineHeight: '50px', textAlign: 'center', float: 'left', margin: '5px', borderRadius: '10px', backgroundColor: 'teal', color: '#fff'})

结果：（1，2）合起来是含有ul的li元素，3是含有span的li元素，4是含有p的li元素

.add()和.end()方法

作用：当需要给某类元素添加共同的方法，可以使用add()进行一次性处理，之后使用end()，使返回值退回到add()之前。

html代码

<div>
    <ul>
        <li>1-1</li>
        <li>1-2</li>
        <li>1-3</li>
    </ul>
</div>
<ul>
    <li>2-1</li>
    <li>2-2</li>
    <li>2-3</li>
</ul>

js代码

$('div').add('ul').css({overflow: 'hidden'})
$('div ul').add('ul').css({listStyle: 'none'}).find('li').css({float: 'left', margin: '5px'}).end().end().find('li').css({backgroundColor: 'steelblue'});

结果