文章目录

  • 原生js的缺点
  • 如何使用jQuery
  • jQuery的入口函数
  • $函数
  • dom对象和jQuery对象
  • 获取和设置文本——text()
  • 获取文本
  • 设置文本内容
  • 获取和设置div样式
  • jQuery基本选择器
  • 层级选择器
  • 过滤器
  • 筛选选择器
  • 手风琴案例


原生js的缺点
  • 不能添加多个入口函数(window.onload),如果添加了多个，后面的会把前面的覆盖掉
  • 原生js的api名字太长太难记
  • 原生js有时候代码冗余
  • 原生js中有些属性或者方法，有浏览器兼容问题
  • 原生js容错率比较低，前面的代码出了问题，后面的代码执行不了
如何使用jQuery
  • 引入jQuery文件
  • 写一个入口函数
  • 找到你想要操作的元素(jQuery选择器)，去操作它(添加属性、文本、样式)

jquery 取得width jquery获取div_选择器

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>

jquery 取得width jquery获取div_jquery 取得width_02

设置文本内容

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

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

jquery 取得width jquery获取div_选择器_03


jquery 取得width jquery获取div_jquery_04

获取和设置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 取得width jquery获取div_jquery 取得width_05

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>

jquery 取得width jquery获取div_jquery 取得width_06

层级选择器
<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>

jquery 取得width jquery获取div_选择器_07

过滤器
<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>

jquery 取得width jquery获取div_选择器_08

筛选选择器
<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>

jquery 取得width jquery获取div_选择器_09


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>

jquery 取得width jquery获取div_jquery_10


jquery 取得width jquery获取div_jquery_11