jQuery选择器&获取和设置样式&手风琴

最新推荐文章于 2022-11-03 22:33:30 发布

原创最新推荐文章于 2022-11-03 22:33:30 发布 · 622 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了原生js的缺点，如不能添加多个入口函数、api难记、代码冗余等。重点阐述了jQuery的使用，包括引入文件、入口函数、$函数，还介绍了dom对象和jQuery对象的转换，以及文本、样式的获取与设置，选择器的使用，并给出手风琴案例。

文章目录

原生js的缺点

不能添加多个入口函数(window.onload),如果添加了多个，后面的会把前面的覆盖掉
原生js的api名字太长太难记
原生js有时候代码冗余
原生js中有些属性或者方法，有浏览器兼容问题
原生js容错率比较低，前面的代码出了问题，后面的代码执行不了

如何使用jQuery

引入jQuery文件
写一个入口函数
找到你想要操作的元素(jQuery选择器)，去操作它(添加属性、文本、样式)

在这里插入图片描述

jQuery的入口函数

jQuery的入口函数和window.onload入口函数的区别：

a.window.onload入口函数不能写多个，但是jQuery的入口函数是可以多个的
执行时机不同：jQuery入口函数要等到页面上dom树加载完后再执行

$函数

jQuery文件结构，其实是一个自执行函数

$(function(){
	window.jQuery=window.$=jQuery;
});

引入一个js文件，是会执行js文件中的代码的，其实就是执行这个自调用函数，这个自执行文件是给window对象添加一个jQuery属性和$属性

$和jQuery其实是等价的，是一个函数

    console.log(window.jQuery==window.$);//true
    console.log(Object.prototype.toString.call($));//[object Function]

如果$的参数是一个匿名函数–入口函数

$(function(){

});

如果参数是一个字符串—选择器/创建一个标签

$('#one');
$('<div>啦啦啦我是一个div</div>');

如果参数是一个dom对象，那它就会把dom对象转换成jQuery对象

$(dom对象);

dom对象和jQuery对象

*jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集

dom对象转成jQuery对象

var obj=document.getElementById("one");
var $obj=$(obj);

jQuery对象转成dom对象

//1、使用下标来获取
var $divs=$('div');
var div1=$divs[0];

//使用jQuery方法来获取
var $div2=$('div').get(1);//下标从0开始

获取和设置文本——text()

获取文本

会获取到这个标签中的所有文件，包括后代元素的文本

console.log($('#div').text());

包含了多个dom元素的对象，通过text()方法获取文本内容

<div>
    <div>啦啦啦</div>
</div>
<script>
    console.log($('div').text());
</script>

在这里插入图片描述

设置文本内容

会覆盖原来的内容，把所有的dom元素都设置上(隐式迭代)，不会解析标签

<input type="button" id="btn" value="设置文本">
<div>
    啦啦啦
</div>
<script>
    $('#btn').click(function () {
        $('div').text('噜噜噜');
        $('div').text('我是一个<a>标签</a>');
    });
</script>

在这里插入图片描述

获取和设置div样式

样式操作只会返回第一个元素对应的样式值

<div></div>
<div id="box"></div>
<script>
    //获取样式——样式操作只会返回第一个元素对应的样式值
    console.log($('div').css('width'));

    //设置样式——css(样式名,样式值);
    $('div').css('width',100).css('height',100).css('background','blue').css('border','1px solid lightskyblue')

    //设置多种样式——创建对象
    $('#box').css({
        width:100,
        'height':100,
        'background-color':'blueviolet',
        border:'1px solid skyblue'
    });
</script>

在这里插入图片描述

jQuery基本选择器

	/*
	id选择器：$(‘#id’);获取指定id的元素
	类选择器：$('.class'); 获取同一类class的元素
	标签选择器：$('div');获取同一类标签的所有元素
	并集选择器：$('div,p,li');使用逗号分隔，只要符合条件之一就可
	交集选择器：$('div.redClass');获取class为redClass的div元素
	*/
        
<!--id选择器-->
<div id="box"></div>
<!--类选择器-->
<div class="box2"></div>
<!--标签选择器-->
<span></span>
<!--并集选择器-->
<p></p>
<div class="box3"></div>
<!--交集选择器-->
<div class="box4"></div>
<script>
    //id选择器
    $('#box').css({
        float:'left',
        'height':100,
        'width':100,
        'background':'blue'
    });

    //类选择器
    $('.box2').css({
        float:'left',
        'height':100,
        'width':100,
        'background':'blueviolet'
    });

    //标签选择器
    $('span').text('哈哈哈').css('background','yellow').css('float','left');

    //并集选择器
    $('p,.box3').css({
        border:'1px solid yellow',
        margin:0,
        float:'left',
        width:100,
        height:100,
        background:'blue'
    });

    //交集选择器
    $('div.box4').css({
        float:'left',
        width:100,
        height:100,
        background:'green'
    });
</script>

在这里插入图片描述

层级选择器

<div class="floor1">
    <div class="floor2">
        <span></span>
    </div>
</div>

<script>
    //子代选择器：$('ul>li')
    //后代选择器：$('ul li')

    //后代选择器
    $('.floor1 span').css({
        width:100,
        height:100,
        display:'block',
        background:'blueviolet'
    });

    //注意：$('.box>p,div')表示类样式为.box的元素的子元素以及页面中的div元素
</script>

在这里插入图片描述

过滤器

    <style>
        li{
            list-style: none;
            height: 100px;
            width: 100px;
            float: left;
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<script>
    /*
    * 索引号index从0开始
    * :eq(index)
    * $('li:eq(2)')---li元素中索引号为2的元素
    * $('li:odd')---li元素中索引号为奇数的元素
    * $('li:even')---li元素中索引号为偶数的元素
    * */

    //:odd
    $('li:odd').css('background','blueviolet');

    //:even
    $('li:even').css('background','lightskyblue');

    //:eq(2)
    $('li:eq(2)').css('background','yellow');
</script>

在这里插入图片描述

筛选选择器

    <style>
        ul{
            list-style: none;
        }
        li{
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="box">
    <div></div>
    <ul class="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    /*
    * 筛选选择器和过滤器有些相似，但主要是方法
    *
    * children(selector)--->$('ul').children('li')
    * find(selector)--->$('ul').find('li')
    * siblings(selector)--->$('#first').siblings('li')
    * parent()--->$('#first').parent()
    * eq(index)-->$('li').eq(2)
    * next()--->$('li').next()
    * prev()--->$('li').prev()
    *
    * */

    //children(selector)
    $('ul').children('li').css('border','1px solid blueviolet');

    //find(selector)
    $('ul').find('li').css('backgroundColor','blue');

    //siblings(selector)
    $('ul').siblings('div').width(200).height(200).css('backgroundColor','lime');

    //parent()
    $('ul').parent().css('border','1px solid blue');

    //eq(index)
    $('li').eq(3).css('backgroundColor','lime');

    //next();
    $('li').eq(3).next().css('backgroundColor','skyblue');

    //prev()
    $('li').eq(3).prev().css('backgroundColor','orange');
</script>

在这里插入图片描述
index会返回当前元素在所有兄弟元素中的索引，索引从0开始

手风琴案例

    <style>
        li{
            list-style: none;
        }
        span{
            margin:0;
            text-align: center;
            display: block;
            width: 202px;
            background-color: lightskyblue;
            color: blueviolet;
            border-bottom:1px solid #eee;
        }
        li>p{
            display: none;
            margin:0;
            text-align: center;
            width: 200px;
            height: 200px;
            border: 1px solid lightskyblue;
        }
    </style>
</head>
<body>

<ul>
    <li>
        <span>Title1</span>
        <p>这是第一个p标签</p>
    </li>
    <li>
        <span>Title2</span>
        <p>这是第二个p标签</p>
    </li>
    <li>
        <span>Title3</span>
        <p>这是第三个p标签</p>
    </li>
    <li>
        <span>Title4</span>
        <p>这是第四个p标签</p>
    </li>
</ul>

<script>
    $('li>span').click(function () {
        $(this).next().slideDown().parent().siblings().children('p').slideUp();
    });
</script>

在这里插入图片描述