前端07 /jQuery初识

1.jquery介绍

1.1 jquery的优势

1.链式编程:
    多个操作(函数)以点(.)连成链,形成链式表达
    比如.show()和.html()可以连写成.show().html()。
2.隐式迭代:
    隐式对应的是显式。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。

1.2 jquery是什么?

1.jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率。
2.js库是把我们常用的复杂功能封装到简单的方法中,我们用的时候,将库直接引入然后调用方法即可。
3.初期主要是如何使用jQuery操作DOM,其实就是学习jQuery封装好的那些功能API。这些API的共同特点是:几乎全都是方法。所以,在使用jQuery的API时,都是方法调用,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同。
4.版本说明:
    jQuery 有三个大版本:
    1.x版本:最新版为 v1.11.3。
    2.x版本:最新版为 v2.1.4(不再支持IE6、7、8)。
    3.x版本。

1.3 jquery的导入

下载链接:jQuery官网  https://jquery.com/
中文文档:jQuery AP中文文档
https://code.jquery.com/jquery-3.4.1.js 未压缩版
https://code.jquery.com/jquery-3.4.1.min.js 压缩版
导入方式:
方式一:
    下载:保存在本地文件里
    引入:<script src="jquery.js"></script>
方式二(网络地址引入):
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

2.jQuery的使用

2.1使用 jQuery 的基本步骤

下载 :jQuery有两个文件,一个是jquery-3.4.1.js(未压缩版),一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)

关于jQuery的相关资料:
    官网:http://jquery.com/
    官网API文档:http://api.jquery.com/
    汉化API文档:http://www.css88.com/jqapi-1.9/
    jquery 在线手册:http://hemin.cn/jq/

注意:导包的代码一定要放在js代码的最上面。 

2.2 jQuery的$符号

jQuery 使用 $ 符号原因:书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了我们两个变量:$ 和 jQuery。当我们在代码中打印它们俩的时候:

<script src="jquery-3.3.1.js"></script>
<script>
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

从打印结果可以看出,$ 代表的就是 jQuery。

$就是jQuery名字的简写,实际上是一回事儿

2.3jQuery的入口函数

原生 js 的入口函数指的是:window.onload = function() {}; 如下:

//原生 js 的入口函数。页面上所有内容加载完毕,才执行。
        //不仅要等文本加载完毕,而且要等图片也要加载完毕,才执行函数。
       window.onload = function () {
           alert(1);
       }

jQuery的入口函数,有以下几种写法:

写法一:文档加载完毕,图片不加载的时候,就可以执行这个函数。

$(document).ready(function () {
           alert(1);
       })

写法二:文档加载完毕,图片不加载的时候,就可以执行这个函数。(写法一的简洁版)

$(function () {
           alert(1);
       });

写法三:文档加载完毕,图片也加载完毕的时候,在执行这个函数。

$(window).ready(function () {
           alert(1);
       })

jQuery入口函数与js入口函数的区别

区别一:书写个数不同:
- Js 的入口函数只能出现一次,出现多次会存在事件覆盖的问题。
- jQuery 的入口函数,可以出现任意多次,并不存在事件覆盖问题。

区别二:执行时机不同:
- Js的入口函数是在**所有的文件资源加载**完成后,才执行。这些**文件资源**包括:页面文档、外部的js文件、外部的css文件、图片等。
- jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的**外部资源**都加载完成。

文档加载的顺序:从上往下,边解析边执行。

3.js中的DOM对象 和 jQuery对象比较(重点,难点)

3.1 二者之间的区别

通过 jQuery 获取的元素是一个jq对象数组,其中包含着原生JS中的DOM对象。举例:

针对下面这样一个div结构:

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

通过原生 js 获取这些元素节点的方式是:

    var myBox = document.getElementById("app");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是:(获取的都是数组)

   //获取的是数组,里面包含着原生 JS 中的DOM对象。
  console.log($('#app'));
  console.log($('.box'));
  console.log($('div'));

总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法。

3.2 jquery对象和dom对象的关系和转换

jquey方法找到的标签对象称为jquery对象
原生js找到的标签对象称之为DOM对象
dom对象只能调用dom对象的方法,jquery对象只能用jquery方法,不能互通

1、 DOM 对象 转为 jQuery对象

$(js对象);

2、jQuery对象 转为 DOM 对象

  jquery对象[index];      //方式1(推荐)
  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后,可以直接调用 DOM 提供的一些功能。如:

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

4.jQuery查找标签

4.1 jquery选择器

基本选择器、层级选择器、属性选择器

4.1.1基础选择器

$("#id")  //不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器
$("#id")         //id选择器
$("tagName")     //标签选择器
$(".className")  //class选择器
$("*")           //通用选择器

$("div.c1")      // 交集选择器 找到有含有c1类的div标签
$("#id, .className, tagName") //并集选择器

div.c1交集选择器      div,p并集选择器
$('div.box')
k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('div,p,a')
k.fn.init(4) [div.box, a, a, p, prevObject: k.fn.init(1)]

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');
            //操作标签选择器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);
            //操作类选择器(隐式迭代,不用一个一个设置)
            jqBox2.css("background", "green");
            jqBox2.text('哈哈哈')
           //操作id选择器
            jqBox1.css("background", "yellow");
        })
    </script>
</body>
</html>

4.1.2 层级选择器

空格 后代选择器    >子代选择器 +毗邻选择器  ~弟弟选择器
x和y可以为任意选择器
$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

示例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代:儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代:亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

4.1.3 属性选择器

$('[属性名]')         必须是含有某属性的标签
$('a[属性名]')        含有某属性的a标签
$('选择器[属性名]')    含有某属性的符合前面选择器的标签
$('选择器[属性名="aaaa"]')  属性名=aaa的符合选择器要求标签
$('选择器[属性名$="xxx"]')  属性值以xxx结尾的
$('选择器[属性名^="xxx"]')  属性值以xxx开头的
$('选择器[属性名*="xxx"]')  属性值包含xxx
$('选择器[属性名1][属性名2="xxx]')  拥有属性1,且属性二的值='xxx',符合前面选择器要求的

示例写法

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

4.2 jquery筛选器

4.2.1 基础筛选器

$('选择器:筛选器')
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 根据含有某个后代筛选

示例写法

$('li:has(span)');

$("div:has(h1)")// 找到所有后代中有h1标签的div标签,意思是首先找到所有div标签,把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类(类属性class='c1')的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈,基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>

        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function(){
            //获取第一个 :first ,获取最后一个 :last

            //奇数
            $('li:odd').css('color','red');
            //偶数
            $('li:even').css('color','green');

            //选中索引值为1的元素 *
            $('li:eq(1)').css('font-size','30px');

            //大于索引值1
            $('li:gt(1)').css('font-size','50px');

            //小于索引值1
            $('li:lt(1)').css('font-size','12px');

        })
    </script>
</html>

简单绑定事件的示例

// 绑定事件的方法
$('#btn').click(function () {
    $('.mode')[0].classList.remove('hide');
    $('.shadow')[0].classList.remove('hide');
    jquery写法:
    $('.mode,.shadow').removeClass('hide');
})

4.2.2 表单筛选器

type筛选器
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的

示例代码

    <div>
        用户名: <input type="text">
    </div>

    <div>
        密码: <input type="password">
    </div>

    <div>
        sex:
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <input type="radio" name="sex">不详
    </div>

    找到type为text的input标签:$(':text')
表单对象属性(状态筛选器)
enabled
disabled
checked
selected

$(':disabled')
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]
$(':enabled')
jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)]
$(':checked')
jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]
$(':selected')
$(':checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$('input:checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]

示例代码

    <div>
        用户名: <input type="text">
    </div>

    <div>
        密码: <input type="password" disabled>
    </div>

    <div>
        sex:
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <input type="radio" name="sex">不详
    </div>
    <select name="" id="">

        <option value="1">大狗</option>
        <option value="2">二狗</option>
        <option value="3">三狗</option>
        <option value="4">四狗</option>

    </select>
    操作:
    找到可以用的标签 -- $(':enabled')
    找select标签被选中的option标签  $(':selected')

4.2.3 jquery的筛选器方法

//找兄弟
$("#id").siblings();// 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选

//找弟弟
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") //直到找到id为i2的标签就结束查找,不包含它

//找哥哥(找的顺序是从下往上的)
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

//找祖辈
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
//找儿子
$("#id").children();// 儿子们
//过滤
$("div").first() // 获取匹配的第一个元素
$("div").last() // 获取匹配的最后一个元素
$("div").eq(n) // 索引值等于指定值的元素,n是索引
$("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
$("div").find("p") //后代选择器,在所有div标签中找后代的p标签
$("div").filter(".c1")  // 交集选择器,从结果集中过滤出有c1样式类的
$("div").has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一个span标签</span>
                <span>我是第二个span标签</span>
                <span>我是第三个span标签</span>
            </p>
            <button>按钮</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        //获取第n个元素 数值从0开始
        $('span').eq(1).css('color','#FF0000');

        //获取第一个元素 :first :last    点语法  :get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');

        //查找span标签的父元素(亲的)
$('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});

        //选择所有的兄弟元素(不包括自己)
        $('.list').siblings('li').css('color','red');

         //查找所有的后代元素
         $('div').find('button').css('background','yellow');

         //不写参数代表获取所有子元素。
          $('ul').children().css("background", "green");
          $('ul').children("li").css("margin-top", 10);

    </script>
</html>

5. 链式表达式

<ul>
    <li>大狗</li>
    <li>二狗</li>
    <li class="c1">三狗</li>
    <li>四狗</li>
    <li>五狗</li>
    <li class="c2">六狗</li>
    <li>七狗</li>
</ul>

操作      $('li:first').next().css('color','green').next().css('color','red');

6.操作标签

6.1 样式操作

样式类操作
    addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

示例代码

<style>
    .c1 {
         height: 208px;
         width: 208px; :
         border- radius: 50%;
         background-color: red;
}
    .green {
         background-color: green;
</style>
</head>
<body>
I
<div class="c1"></div>
<script src="jquery. js" ></script>
</ body>


》$(".c1").hasClass('c1')
true
》$(".c1").hasClass('green')
false
》$(".c1").addClass('green')
jQuery,fn. init [div.cl.green, prevobj(1)]
》$(".c1").removeClass('green')
jQuery.fn. init laiy.c1prevobject: j
》$(".c1").toggleCass( ' green')
jQuery. fn. init [div.c1. green, prevobj(1)]
》$(".c1").toggleclass("green')
jQuery.fn. init [div.c1, prevbfect: f
》$(".c1").toggleClass"green )

6.2 css操作

单个方式:$('div').css('background-color','green');
多个方式:$('div').css({'background-color':'yellow','width':'400px'});

6.3 位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移,不能设置位置

 .offset()方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()的差别在于: .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离

示例代码

    $('.c2').offset(); 查看位置
    $('.c2').offset({top:100,left:200}); 设置位置


    代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            /*body{*/
            /*    margin: 0;*/
            /*}*/
            .c1{
                background-color: red;
                height: 100px;
                width: 100px;
                display: inline-block;

            }
            .c2{
                background-color: green;
                height: 100px;
                width: 100px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="cc">
        <div class="c1"></div><div class="c2"></div>
    </div>
    <script src="jquey.js"></script>
    </body>
    </html>
$(window).scrollTop()  //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向右移动的距离

6.4 尺寸

height() //盒子模型content的大小,就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度,不包括margin的高度,因为margin不是标签的,是标签和标签之间的距离
outerWidth()

示例操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            .c1{
                width: 100px;
                height: 100px;
                padding: 20px 30px;
                border: 2px solid red;

            }
        </style>
    </head>

    <body>
    <div class="c1"></div>
    </body>
    <script src="jquery.js"></script>
    </html>

    操作:
        $('.c1').height();
        $('.c1').width();
        $('.c1').innerWidth();
        $('.c1').outerWidth();

6.5 文本操作

html()// 取得第一个匹配元素的html内容,包含标签内容
html(val)// 设置所有匹配元素的html内容,识别标签,能够表现出标签的效果
text()// 取得所有匹配元素的内容,只有文本内容,没有标签
text(val)// 设置所有匹配元素的内容,不识别标签,将标签作为文本插入进去
示例:
    取值
        $('.c1').html();
        $('.c1').text();
    设置值
        $('.c1').text('<a href="">百度</a>');
        $('.c1').html('<a href="">百度</a>');
02-13 21:12