前端07 /jQuery初识

前端07 /jQuery初识

目录

• 前端07 /jQuery初识
  • 1.jquery介绍
    • 1.1 jquery的优势
    • 1.2 jquery是什么?
    • 1.3 jquery的导入
  • 2.jQuery的使用
    • 2.1使用 jQuery 的基本步骤
    • 2.2 jQuery的$符号
    • 2.3jQuery的入口函数
  • 3.js中的DOM对象 和 jQuery对象比较（重点，难点）
    • 3.1 二者之间的区别
    • 3.2 jquery对象和dom对象的关系和转换
  • 4.jQuery查找标签
    • 4.1 jquery选择器
      • 4.1.1基础选择器
      • 4.1.2 层级选择器
      • 4.1.3 属性选择器
    • 4.2 jquery筛选器
      • 4.2.1 基础筛选器
    • • 4.2.2 表单筛选器
        • type筛选器
        • 表单对象属性（状态筛选器）
      • 4.2.3 jquery的筛选器方法
  • 5. 链式表达式
  • 6.操作标签
    • 6.1 样式操作
    • 6.2 css操作
    • 6.3 位置操作
    • 6.4 尺寸
    • 6.5 文本操作

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>');