第十一章 前端开发-jQuery
11.4.0 jQuery
11.4.1 基本知识
-
定义： jQuery是一个快速，小巧，功能丰富的JavaScript库
-
作用：它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单
-
jQuery使用 $ 符号，占用两个变量：$ 和 jQuery
- $ 实际上表示的是一个函数名. jQuery本质就是一个函数
$(); // 调用上面我们自定义的函数$ // 在script中写代码前，必须进行文档加载，避免出错 $(document）.ready(function(){}); // 文档加载，即调用入口函数 // 文档加载可简写为下面格式 $(function(){}); // 文档加载，即调用入口函数 // 获取元素示例 $('#btnShow'); // 获取id属性为btnShow的元素 $('div'); // 获取所有的div标签元素
jQuery的两大特点
- 链式编程：比如
.show()和.html()可以连写成.show().html()。 - 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
入口函数和window.onload()对比
原生 js 的入口函数指的是：window.onload = function() {}; 如下：
//原生 js 的入口函数。页面上所有内容加载完毕，才执行。
//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
window.onload = function () {
alert(1);
}
而 jQuery的入口函数，有以下几种写法：
写法一：
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () {
alert(1);
})
写法二：（写法一的简洁版）
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(function () {
alert(1);
});
写法三：
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})
jQuery入口函数与js入口函数的区别：
区别一：书写个数不同：
- Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
- jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
- Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
$变量名冲突的方法 在前面写上 jQuery.noConflict();
11.4.2 js节点对象和jQuery对象的区别
- 区别：
- 通过 jQuery 获取的元素是一个伪数组，数组中包含着js节点对象
- jQuery就是把js节点对象重新包装了一下，让其具有了jQuery方法
- 相互转换：
- js节点对象转换成jQuery对象：$(js节点对象);
- jQuery对象转换成js节点对象：jquery对象[index]; //0.1.2.3
- 总结：如果想要用哪种方式设置属性或方法，必须转换成该类型
11.4.3 jQuery的选择器
11.4.3.1 基本选择器
-
：id选择器
- . ：类选择器
- element：标签选择器
*：通配符选择器- , ：并集选择器
11.4.3.2 高级选择器
- 空格：后代选择器
>：子代选择器+：紧邻选择器~：兄弟选择器
11.4.3.3 属性选择器
- 与属性有关的选择器
11.4.3.4 基本过滤选择器
- :eq()：选择一个，索引从0开始
- :first：获取第一个
- :last：获取最后一个
- :odd：获取奇数
- :even：获取偶数
11.4.3.5 筛选选择器 方法
- .eq()：选择一个，索引从0开始
- .children()：获取亲儿子
- .next():获取匹配元素后面紧邻的同辈元素
- .prev(): 获取匹配元素前面紧邻的同辈元素
- .find()：获取的后代
- .parent()：获取集合中每个元素的父集元素，亲爹
- .parents():获取集合中每个元素的祖先元素
- .siblings()：获取除它之外的兄弟元素
- siblings方法的应用
1.1.4.3.6 jQuery选择器的完善机制
如果元素不存在，js不会保存阻塞其他代码的运行
//根据元素是是否有长度判断
if($('#box').length>0){
//do something;
}else{
throw new Error('获取元素失败');
}
或者转化为DOM元素来判断
if($('#box')[0]){
//do something;
}else{
throw new Error('获取元素失败');
}
11.4.4 jQuery的动画
11.4.4.1 普通动画
-
show()：显示动画
// 无参数，表示让指定的元素直接显示出来 $(selector).show(); // 通过控制元素的宽高、透明度、display属性，逐渐显示 $(selector).show(2000); // slow 慢：600ms normal 正常：400ms fast 快：200ms $(selector).show("slow"); // 动画执行完后，立即执行回调函数 $(selector).show(5000, function(){}); -
hide()：隐藏动画
$(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){}); -
toggle()：开关式显示隐藏动画
// 显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide() $('#box').toggle(3000,function(){});
11.4.4.2 卷帘门动画
-
slideDown()：滑入动画
-
slideUp()：滑出动画
-
slideToggle()：滑入滑出切换动画
//1、滑入动画效果：下拉动画，显示元素 $(selector).stop().slideDown(speed, 回调函数); //stop先清除 //2、滑出动画效果：上拉动画，隐藏元素 $(selector).stop().slideUp(speed, 回调函数);。 //3、滑入滑出切换动画效果： $(selector).slideToggle(speed, 回调函数);
11.4.4.3 淡入淡出动画
-
fadeIn()：淡入动画
-
fadeOut()：淡出动画
-
fadeToggle()：淡入淡出切换动画
-
fadeTo()：指定透明度
//1、淡入动画效果：让元素以淡淡的进入视线的方式展示出来 $(selector).fadeIn(speed, callback); //2、淡出动画效果：让元素以渐渐消失的方式隐藏起来 $(selector).fadeOut(1000); //3、淡入淡出切换动画效果：通过改变透明度，切换匹配元素的显示或隐藏状态 $(selector).fadeToggle('fast', callback); //4.$(selector).fadeTo(400,0.3) //（speed（毫秒级）,1-400数值来表示透明度）
11.4.4.4 自定义动画
- .animate({params},speed,callback)
- 第一个参数表示：要执行动画的CSS属性 如设置高度，宽度（必选）
- 第二个参数表示：执行动画时长（可选）
- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
11.4.4.5 停止动画
- $(selector).stop(true, false);
- 第一个参数：
- true：后续动画不执行
- false：后续动画会执行
- 第二个参数：
- true：立即执行完成当前动画
- false：立即停止当前动画
- 注意：
- 参数如果都不写，默认两个都是false
- 实际工作中，直接写stop()用的多
- 第一个参数：
11.4.5 jQuery常用事件
-
常用事件示例：
- click：鼠标单击事件 dblclick（双击不常用）
冒泡原理，子级元素和父级元素都绑定点击事件，点击子级元素会冒泡到父级元素 需要阻止冒泡 <div class="box"> <h3>冒泡</h3> </div> $('.box').click(function(){ alert(‘父点击了’); }) $('h3').click(function(event){ //阻止冒泡 event.stopPropagation(); alert('子点击了') }) event.preventDefult()； 阻止默认行为，如a标签的点击跳转 与javascipt:void(0) 一样;-
mousedown/mouseup:鼠标按下、抬起
-
mouseover / mouseout：鼠标移入/移出事件
-
mouseenter / mouseleave：鼠标进入/离开事件（推荐）被选中的元素才会触发
- 同时使用时，可以用.hover(回调函数,回调函数)
-
change：文本框内容改变事件
-
select：文本框内容被选中事件
-
submit：提交事件
-
focus：光标聚焦事件
-
blur：光标失焦事件
-
keydown() keyup() :键盘事件
$(window).keydown(function(event){ //获取整个window窗口 console.log('键盘按下了'); console.log(event.keyCode); //空格:32 enter:13 esc:27 })
ready() 文档加载事件
scroll() 监听窗口滚动事件
-
取消事件默认的方式：
- javascript:void(0);
- javascript:;
- .preventDefault()
-
事件委托:
原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：
1.性能要好
2.针对新创建的元素，直接可以拥有事件事件源 :
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的使用情景：
•为DOM中的很多元素绑定相同事件；
•为DOM中尚不存在的元素绑定事件；<ul> <li>内容太1</li> </ul> <script> $function(){ // on('事件名','selector',callback) $('ul').on('click','li',function(){ alert($(this).text()); }) //将来要做的事情 setTimeout(function(){ $('<li>内容太2</li>').appendTo('ul'); },5000); } </script>
11.4.6 jQuery的属性操作
-
对属性操作
- 设置属性：attr(name,value);
// 获取值：attr()设置一个属性值的时候 只是获取值 var id = $('div').attr('id') console.log(id) var cla = $('div').attr('class') console.log(cla) // 设置值 //1.设置一个值 设置div的class为box $('div').attr('class','box') //2.设置多个值，参数为对象，键值对存储 $('div').attr({name:'hahaha',class:'happy'})- 删除属性：removeAttr(name);
// 删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); // 删除多个属性 $('#box').removeAttr('name class');-
prop()：设置属性
- 当该方法用于返回属性值时，则返回第一个匹配元素的值
- 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对
-
attr和prop的区别：
- prop方法获取的是当前节点对象的属性，单选操作
- attr方法获取的是标签上的属性
-
对值操作：
-
html() 是获取和设置选中标签元素中所有的内容
-
html('') 也会清除内容
-
html() 是获取选中标签元素中所有的内容
$('#box').html();设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
-
-
text() 获取匹配元素包含的文本内容的值
-
val() 用于表单控件中获取值，比如input textarea select等等
<input type="text" value="zz"></input> <script> //获取文本输入框的值 console.log($('input[type=text]').val()); //zz //设置文本的内容,给input设置值，要使用value属性值的值 $('input[type=text]').val("zy");<select multiple="multiple" id ="multiple"> <option value="a">html</option> <option value="b">css</option> <option selected="selected">javascript</option> <option>vue</option> </select> <script> $('#multiple').val(['html','css']) //会默认选中，数组中写两个 </script>
-
对类操作
- 添加类：addClass()
// 为每个匹配的元素添加指定的类名 $('div').addClass("box"); //追加一个类名到原有的类名 // 为匹配的元素添加多个类名 $('div').addClass("box box2"); //追加多个类名- 删除类：removeClass()
// 移除指定的类（一个或多个） $('div').removeClass('box')； // 移除全部的类 $('div').removeClass();- 如果存在就删除，不存在就添加：toggleClass()
// 如果存在（不存在）就删除（添加）一个类。 // 语法：toggleClass('box') $('span').click(function(){ // 动态的切换class类名为active $(this).toggleClass('active') })- 判断是否有这个类：hasClass()
11.4.7 jQuery中DOM的操作
11.4.7.1 插入操作
-
append / appendTo：追加
- 父元素.append(子元素);
- 追加某元素，在父元素中添加新的子元素
var oli = document.createElement('li'); oli.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); $('ul').append(oli); $('ul').append($('#app'));- 子元素.appendTo(父元素)
- 追加到某元素 子元素添加到父元素，会返回一个对象 可以继续.方法
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active'); $('<li>天王盖地虎</li>').appendTo($('ul')).css('color','red').click(function(){ console.log($(this).text()); //找到文本 }) - 父元素.append(子元素);
-
prepend / prependTo：前置添加
- 父元素.prepend(子元素);
- 前置添加， 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')- 子元素.prependTo(父元素);
- 前置添加， 添加到父元素的第一个位置
$('<a href="#">路飞学诚</a>').prependTo('ul') - 父元素.prepend(子元素);
-
after：在匹配的元素之后插入内容
- 兄弟元素.after(要插入的兄弟元素);
$('ul').after('<h4>我是一个h3标题</h4>')- 要插入的兄弟元素.insertAfter(兄弟元素);
$('<h5>我是一个h2标题</h5>').insertAfter('ul') -
before：在匹配的元素之后插入内容
- 兄弟元素.before(要插入的兄弟元素);
$('ul').before('<h3>我是一个h3标题</h3>')- 要插入的兄弟元素.inserBefore(兄弟元素);
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
ps:
// <ul class="catalog"><li id='id_10'><a>目录</a><ul></ul></li></ul>
var li = $("<li>").attr("id", "id_" + item.id).append($("<a>").text(item.title).attr("href",'xx')).append($("<ul>"));
$("#catalog").append(li);
生成标签也可以用$("<li>") 或者自己手写 var li = "<li>123</li>"
两种都可以添加节点，但是$("<li>")使用$直接转换为jquery对象，方便后续操作，比如添加节点后需要添加text文本内容。当然你也可以用第二种，手动把你需要添加的内容一次性写完。
11.4.7.2 修改操作
-
replaceWith：将所有匹配的元素替换成指定的string、js对象、jquery对象
- $(selector).replaceWith(content);
//将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>') //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app')); -
replaceAll：用匹配的元素替换所有h4元素
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
11.4.7.3 删除操作
-
remove：删除节点后，事件也会删除（即删除了整个标签）
- $(selector).remove();
$('ul').remove(); -
detach：删除节点后，事件会保留
- $(selector).detach();
var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn) -
empty：清空选中元素中的所有后代节点
- $(selector).empty();
//清空掉ul中的子元素，保留ul $('ul').empty()
11.4.7.4 克隆操作
$('ul').clone(ture).appendTo('...') //要完全clone需加true参数，会复刻
11.4.8 jQuery中CSS的操作
http://book.luffycity.com/python-book/jquery/946-jquerywei-zhi-xin-xi-dui-xiang-de-cao-zuo.html
对样式操作
-
通过调用.css()方法，进行对样式的操作
-
如果传入一个参数，看一下这个参数如果是一个字符串表示获取值，如果是对象，表示设置多少属性值
-
如果是两个参数，设置单个属性值
-
$('#box').css({ color:'red'; fontSize:20; })
-
-
-
.offset() 获取当前窗口的相对偏移，是一个对象，里面保存top和left属性
-
scrollTop():获取元素滚动条距离顶部的距离
-
scrollLeft():获取元素滚动条距离左的距离
-
width()/height():获取和设置高度、宽度
- console.log($('#box').width()); //获取的是数值 可后续做计算盒子操作
-
innerWidth()/innerHeight():获取匹配元素内部区域宽度（包括补白，不包括边框）
-
outerWidth()/outerHeight():获取匹配元素外部宽度（默认包括补白和边框）
11.4.9 jQuery的ajax
-
定义：
-
AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
-
在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行局部显示
-
$.ajax({ url:'', method:'get', sucess:function(res){ .... } })
-
-
方式：
- get
- post
11.5.0 jQuery的插件
-
网址
https://www.jq22.com
