前端之jquery
-
Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。
-
jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发
-
jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到
注意:一般情况下,是库的文件,该库中都会抛出来构造函数或者对象,如果是构造函数,那么使用new关键字创建对象,如果是对象直接调用属性和方法
DOM文档加载的步骤
-
解析HTML结构。
-
加载外部脚本和样式表文件。
-
解析并执行脚本代码。
-
DOM树构建完成。
-
加载图片等外部文件。
-
页面加载完毕。
执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
<!-- 引包 -->
<script src="jquery-3.3.1.js"></script>
<!-- jquery是全局的一个函数,当调用$()内部会 new jQuery(),创建出对象之后,就可以用对象的属性和方法。-->
// jquery对象 console.log($(document)); // jquery的文档对象 console.log($(document)[0]); // 1.jquery入口函数,等待文档资源加载完之后调用此方法 $(document).ready(function () { alert(1); }); // 2.jquery入口函数简易版 $(function () { alert(2); }); // 图片资源加载完成之后调用 $(window).ready(function () { alert(3); }) // 上面三个方法谁也不覆盖谁,解决了之前windows.onload()的覆盖现象。
$(function () { // 获取jquery对象 console.log($('#box2')); // 获取js对象 let oDiv2 = document.getElementById('box2'); console.log(oDiv2); // jquery -> js对象 console.log($('#box2')[0]); console.log($('#box2').get(0)); // 两种方式一样 // js对象 -> jquery对象 $(js对象) console.log($(oDiv2)); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { margin-top: 10px; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box">wusir</div> <div id="box">日天</div> <div>alex</div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // 事件三步走: 事件源,事件,事件驱动程序 // jquery如何获取dom // jquery的标签选择器 // console.log($('div')); // js对象 // $('div')[0].onclick // jquery内部自己遍历 $('div').click(function () { // alert(1); // this指的是js对象 // console.log(this.innerText); // console.log($(this).text()) $(this).hide(300); }); // // 2.类选择器 // console.log($('.box')); // // 3.id选择器 // console.log($('#box')) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul class="lists"> <li> 女友 <ol> <li>alex</li> </ol> </li> <li class="item"> <a href="#">alex2</a> </li> <li class="item2">wusir</li> <li>日天</li> <li>村长</li> <li>小马哥</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 后代选择器 修改样式属性 $('.lists li').css('color','red'); // 子代选择器 亲儿子 $('.item>a').css({ 'color':'yellow', 'background-color':'red' }); // // + 紧邻 只选中挨着最近的兄弟 $('.item + li').css('color','green'); // // ~ 兄弟选择器 $('.item2~li').css('color','purple'); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 写法 $('ul li:eq(0)') // 1.:eq(index) 选择序号为index的元素 $('ul li:eq(0)').css('background','red'); $('ul li:gt(0)').css('color','green'); $('ul li:lt(3)').css('color','yellow'); // 选取的奇数和偶数 $('ul li:odd').css('background','black'); $('ul li:even').css('background','green'); // 选取第一个和最后一个 $('ul li:first').css('background','red'); $('ul li:last').css('background','red'); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input type="text" name=""> <input type="password" name=""> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 属性选择器 $('input[type=text]').css('background','red'); $('input[type=password]').css('background','red'); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> <p> <span class="child">alex</span> </p> <p> <span class="active">alex2</span> </p> <p class="item3">alex3</p> <p>alex4</p> <p>alex5</p> <div class="child">哈哈哈哈哈</div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // // find(selector) // 查找后代 包括子子孙孙 // $('.box').find('p').css('color','red'); // $('.box').find('.item3').css('color','green'); // // 在jquery中,这叫链式编程,就因为有这个链式编程,所有我们书写的就少。 // $('.box').find('p>.active').css('color','yellow').click(function() { // alert($(this).text()); // }); // console.log($('.box').find('p>.active').css('color','yellow')); // console.log($('.box').find('p')); // 子代children(selector) 获取的是亲儿子 // $('.box').children('.child').css('color','purple'); // parent 获取的是亲爹 // eq(index) index是从0 开始的 $('.box').children('p').eq(1).css('font-size',30); }); </script> </body> </html>
4.siblings选择器方法的基本使用
查找所有兄弟元素(不包括自己)
选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> button{ width: 100px; height: 40px; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 内部遍历 $('button').click(function(event) { // 选项卡 $(this).css('background','red').siblings('button').css('background','transparent'); console.log($(this).css('background','red')); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ width: 400px; height: 100px; overflow: hidden; } ul li{ list-style: none; float: left; width: 80px; height: 100px; line-height: 100px; text-align: center; background-color: red; margin-right: 10px; } ul li a{ padding: 20px; /*background-color: green;*/ color:#fff; } p{ display: none; } p.active{ display: block; } </style> <body> <ul> <li> <a href="javascript:void(0)"> alex1 </a> </li> <li> <a href="javascript:void(0)"> alex2 </a> </li> <li> <a href="javascript:void(0)"> alex3 </a> </li> <li> <a href="javascript:void(0)"> alex4 </a> </li> </ul> <p>alex1</p> <p>alex2</p> <p>alex3</p> <p>alex4</p> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('ul li a').click(function() { // 选项卡的完整版 $(this).css('background','green').parent('li').siblings('li').find('a').css('background','transparent'); // 得获取到点击的 dom的索引 通过 index()方法获取 注意 这个要找的是有兄弟元素的索引 var i = $(this).parent('li').index(); // addClass() removeClass() $('p').eq(i).addClass('active').siblings('p').removeClass('active'); }); }) </script> </body> </html>
七、jqueryd动画
jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。
方式一:
$("div").show();
解释:无参数,表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;
实现的。
方式二:
$('div').show(3000);
解释:通过控制元素的宽高、透明度、display属性,逐渐显示,2秒后显示完毕。
方式三:
$("div").show("slow");
参数可以是:
-
slow 慢:600ms
-
normal 正常:400ms
-
fast 快:200ms
解释:和方式二类似,也是通过控制元素的宽高、透明度、display属性,逐渐显示。
方式四:
//show(毫秒值,回调函数;
$("div").show(5000,function () {
alert("动画执行完毕!");
});
总结:
上面的四种方式几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画结束后执行的回调函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color:red; display: none; } </style> </head> <body> <button id="show">显示</button> <button id="hide">隐藏</button> <button id="toggle">开关式动画</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 显示动画 $('#show').click(function(){ // 如果是一个按钮控制盒子显示隐藏 那么得需要去控制isShow这个变量 // show(动画的时间,fn) // 默认是normal 400ms slow 600ms fast 200ms $('.box').show(2000,function(){ $(this).text('alex'); }); }); // 隐藏 $('#hide').click(function(){ $('.box').hide('slow'); }); // 开关式的显示隐藏动画 $('#toggle').click(function(){ // 玩动画,就跟玩定时器一样,先关动画,再开动画 $('.box').stop().toggle(2000); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; display: none; } </style> </head> <body> <button id="slideDown">卷帘门下拉</button> <button id="slideUp">卷帘门上拉</button> <button id="toggleSlide">开关式动画</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { // 显示动画 $('#slideDown').click(function() { $('.box').slideDown(200); }); // 隐藏 $('#slideUp').click(function() { $('.box').slideUp(200); }); // 开关式的显示隐藏动画 $('#toggleSlide').click(function() { $('.box').stop().slideToggle(1000); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; display: none; } </style> </head> <body> <button id="fadeIn">淡入动画</button> <button id="fadeOut">淡出动画</button> <button id="fadeToggle">开关式动画</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { // 显示动画 $('#fadeIn').click(function() { $('.box').fadeIn(1000); }); // 隐藏 $('#fadeOut').click(function() { // 第二个参数都是有回调函数 $('.box').fadeOut(1000); }); // 开关式的显示隐藏动画 $('#fadeToggle').click(function() { $('.box').stop().fadeToggle(1000); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <div></div> <button>动画吧</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function(event) { /* Act on the event */ // animate({队列的属性},时间,fn) var json = { width:200, height: 200, top: 200, left : 500, "border-radius":200 }; var json2 = { width: 0, height: 0, top: 10, left: 1000 } $('div').stop().animate(json,2000,function(){ $('div').stop().animate(json2,1000,function(){ alert('已添加购物车') }) }); }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li { background-color: green; } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">二级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">三级菜单1</a> <ul> <li><a href="javascript:void(0);">三级菜单2</a></li> <li><a href="javascript:void(0);">三级菜单3</a></li> <li><a href="javascript:void(0);">三级菜单4</a></li> </ul> </li> </ul> </div> <script src="./jquery-3.3.1.js"></script> <script> //入口函数 $(function () { //需求:鼠标放入一级li中,让他里面的ul显示。移开隐藏。 var jqli = $(".wrap>ul>li"); //绑定事件 mouseenter 鼠标进入 mouseleave 鼠标离开吧 // js onmouseover onmouseout jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000); }); }); </script> </body> </html>
八、jquery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作
html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div title='alex' class="active"></div> <!-- <img src="" alt=""> --> <a href="">百度一下</a> <!-- <input type="text" name="" value="" placeholder="" id="" > --> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> /*1.样式属性操作 css('color') 获取值 css('color','red') 设置单个值 css({ key1:value1, key2:value2 }); key 既可以是驼峰 又可以是margin-left 要给margin-left 加引号 2. 标签的属性操作 attr(key) 获取属性值 attr(key,value) 设置单个值 attr({key1:value1,key2:value2});设置多个值 3.DOM对象属性操作 4.类样式属性操作 addClass() removeClass() toggleClass() 5.对值的操作 text() html() val() innerText innerHTML value 6.对DOM的操作 CRUD */ // js中 // setAttribute(key,value) // getAttribute() // removeAttribute(name: DOMString) $(function () { // attr() 有一个参数表示获取属性值 console.log($('div').attr('title')); // 设置 属性的时候 不要使用此方式来设置类名 不建议 // $('div').attr('class','box1 box2'); // }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女 <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> // prop() removeProp() $(function () { // js对input单选按钮checked的默认设置 // console.log($('input[type = radio]').attr('checked')); //checked var oInput = document.getElementsByTagName('input')[1]; console.dir(oInput); // 用prop返回的是true或false console.log($('input[type=radio]').eq(0).prop('checked')); $('input[type=radio]').eq(0).prop('aaaaa', '11121111'); // console.log($('input[type=radio]').eq(0)) // 可以找到aaaaa $('input[type=radio]').eq(0).removeProp('aaaaa'); console.log($('input[type=radio]').eq(0)) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red; } .hidden{ display: none; } </style> </head> <body> <button id="btn">隐藏</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ var isShow = true; $('#btn').click(function(){ /* 1.通过控制类样式属性对盒子显示隐藏 if (isShow) { $('.box').css('display','none'); isShow = false; $(this).text('显示'); }else{ $('.box').css('display','block'); isShow = true; $(this).text('隐藏'); } */ // 2.通过控制类名 addClass() removeClass() // 记住 如果是操作类名 一定要使用addClass 和removeClass 不要使用attr() if (isShow) { // className +=' hidden' $('.box').addClass('hidden active yyy uuu ooo ppp'); isShow = false; $(this).text('显示'); }else{ $('.box').removeClass('hidden yyy uuu ooo ppp'); isShow = true; $(this).text('隐藏'); } }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="box"> wusir </p> <div class="box"> 女盆友 <span>alex</span> </div> <input type="text" value="123"> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 只 获取文本的内容 text() innerText // trim()清除前后的空格 // console.log($('#box').text().trim()); // 设置文本的内容 // $('#box').text('武sir 女朋友'); // 获取标签和文本的内容 html() innerHTML // console.log($('.box').html().trim()); // 设置 // $('.box').html('<h2>我女朋友呢</h2>'); // // val() value // console.log($('input').val()); // // 清空input输入框中的内容 // $('input').val(''); $('input').val('哈哈哈哈'); }); </script> </body> </html>
5. 插入操作
父子之间插入操作
插到最后一个元素上
父元素.append(子元素) 追加某元素 父元素中添加新的元素
子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="wusir">wusir</div> <div class="box"> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ var oP = document.createElement('p'); oP.innerText = '女朋友'; oP.id = 'tt'; // 1.父子之间 父.append(子) 子.appendTo(父) // 子元素 : 可以是 一个string 、jsDOM对象 、jquery对象 // $('.box').append('alex');//可以插入普通的文本 // $('.box').append('<h2>alex</h2>');//可以插入标签+文本 // $('.box').append(oP); //插入一个jsDom对象 // $('.box').append($('.wusir')); //如果插入的是一个jquery对象 相当于是一个移动操作 // $('.box').append(oP); // console.log($('#tt')); // $('#tt').click(function(){ // // alert($(this).text()); // }); $('<p>日天</p>').appendTo('.box').click(function(event) { $(this).css({ width:100, height:100, backgroundColor:'red' }).text('wusir'); }); // jquery有链式编程 简化我们的代码 }); </script> </body> </html>
插到第一个元素上
prepend() 前置添加, 添加到父元素的第一个位置
prependTo 后置添加,第一个元素添加到父元素中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>alex</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // prepend() prependTo() //1. prepend() 插入 子级的第一个元素 $('ul').prepend('<li>wusir</li>'); $('<li>村长</li>').prependTo('ul').click(function() { alert(this.innerText); }); }); </script> </body> </html>
兄弟之间插入操作
父.before(子) 在匹配的元素之前插入内容 与 子.insertBefor(父)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li class="item">alex</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { // es6的模板字符串,tab键,上面的反引号``,重要,不用考虑单引号和双引号了。使用${变量名}插入变量。 var title = "百度一下"; var title2 = '百度一下before'; $('.item').after(`<li> <a href="#">${title}</a> </li>`); $('<li>wusir</li>').insertAfter('.item'); // // before $('.item').before(`<li> <a href="#">${title2}</a> </li>`); $('<li>wusir before</li>').insertBefore('.item'); }); </script> </body> </html>
6. 替换操作
一、replaceWith():将所有匹配的元素替换成指定的HTML或DOM元素。
//将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>') //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app'));
二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素
二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> <h2>alexsb</h2> <h2>alexsb</h2> <h3>wusirddb</h3> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // 页面中获取的DOM对象.replaceWith(替换的内容) $('h2').replaceWith('<span>圆圆</span>'); // replaceAll() $('<p style = "color:red;">黑girl</p>').replaceAll('span'); }); </script> </body> </html>
7. 删除和清空操作
一、remove() 删除节点后,事件也会删除(简言之,删除了整个标签)
$('ul').remove();
二、detach() 删除节点后,事件会保留
var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)
三、empty(): 清空元素中的所有后代节点
//清空掉ul中的子元素,保留ul $('ul').empty()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> <p style="font-size: 20px;font-weight: 600;">alex</p> </div> <button>删除</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { $('button').click(function() { alert(1); // remove() 删除节点后,事件也会删除,也就是删除了整个标签 // console.log($(this).remove()); // jquery对象 // var jqBtn = $(this).remove(); // $('.box').prepend(jqBtn); // detach() 删除节点后,事件会保留 // var jqBtn = $(this).detach(); // $('.box').prepend(jqBtn); // 清空 $('.box').empty(); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <select> <option>alex</option> <option>wusir</option> <option selected="">黑girl</option> </select> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 原生js onchange // jquery change() // 设置值 加载页面时默认选中第一个 $('input[type=radio]').eq(0).attr('checked',true); $('input[type=radio]').change(function(){ alert(1); // 获取值 on console.log($(this).val()); console.log($('input[type=radio]:checked').val()) }); $('select').change(function(){ // 1.获取选中项的值 console.log($('select option:selected').text()); // 2.获取选中项的值 console.log($('select').find('option:selected').text()); // 3.获取选中项的索引 $('select').get(0) 将jquery对象转化 js对象 console.log($('select').get(0).selectedIndex); console.log($('select option:selected').index()); }); // 设置select 的值 // 加载页面时,设置第二个当做选中值 // $('select option').get(1).selected = true; // selectedIndex是select对象的属性 // $('select').get(0).selectedIndex = 0; // index() 只读的,不能使用这个方法来设置值 }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ position: relative; top: 10px; } .box{ width: 200px; height: 200px; padding: 10px; border: 1px solid red; position: absolute; top: 100px; left: 200px; } </style> </head> <body style="height: 2000px"> <div class="father"> <div class="box"></div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // width() heigth() // 获取宽 // console.log($('.box').width()); // 设置宽 // $('.box').width('300'); // 内部宽和内部高 innerWidth() innerHeight 包含内部宽+padding 不包含border // console.log($('.box').innerWidth()); // 改变的是内部的宽度 不去修改padding和border // $('.box').innerWidth('500'); //外部宽 outerWidth() outerHeight 包含内部宽 + padding + border //$('.box').outerWidth();//222 // 它的返回值 是一个对象 对象中包含了top和left属性 // 距离页面顶部的距离 与父相子绝定位没有任何关系 console.log($('.box').offset().top); console.log($('.box').offset().left); // 它的属性是只读 // $('.box').offset().top // 滚动的偏移的距离 ---> 页面卷起的高度 和宽度 // $(document).scrollTop(110); // 监听文档的滚动事件 ---> jquery的事件方法 $(document).scroll(function(){ console.log($(this).scrollTop()); var scrollTopHeight = $(this).scrollTop(); var boxOffsetTop = $('.box').offset().top; if (scrollTopHeight >boxOffsetTop ) { $('.box').stop().hide(1000); } }) }); </script> </body> </html>
十、jquery的事件
1. 事件的概念
HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念
2. 什么是事件流
事件流描述的是从页面中接收事件的顺序
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:
① 事件捕获阶段;
② 处于目标阶段;
③ 事件冒泡阶段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id='btn'>按钮</button> <script type="text/javascript"> let oBtn = document.getElementById('btn'); oBtn.onclick = function () { alert(1); }; // false:冒泡,ture:捕获,默认是false。 oBtn.addEventListener('click',function(){ console.log('按钮处于捕获阶段'); },false); oBtn.addEventListener('click',function(){ console.log('按钮处于捕获阶段'); },true) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .father{ width: 300px; height: 300px; background-color: red; } </style> </head> <body> <div class="father"> <button>按钮</button> <a href="http://www.baidu.com">百度一下</a> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 给按钮绑定事件 // 在所有的事件回调函数中 都会有默认的事件对象 $('.father button').click(function(event){ // 原生js的事件对象 console.log(event); alert($(this).text()); // 阻止事件冒泡 event.stopPropagation(); }); $('a').click(function(e){ // e.preventDefault(); // e.stopPropagation(); alert('a被点击了'); // 默认事件 return false; }); $('.father').click(function(event){ alert('父亲被点击了'); // event.stopPropagation(); console.log('哈哈哈哈哈'); // 既阻止了默认事件 又阻止了冒泡 return false; }); $('body').click(function(){ alert('body被点击了'); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } /*body{ width: 100%; height: 2000px; }*/ .commentBtn{ font-size: 30px; color: #fff; } .box{ width: 300px; background-color: red; position: relative; } .comment{ position: relative; width: 300px; height: 500px; background-color: yellow; } .comment span.close{ position: absolute; right: 0; top:0; color: #000; cursor: pointer; } .comment button.showQi{ position: absolute; bottom: 0; right: 0; } </style> </head> <body> <div class="box"> <span class="commentBtn">评论</span> <div class="comment" style="display: none;"> <span class="close active">X</span> <button class="showQi active">收起</button> </div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 点击评论 展开评论列表 $('.commentBtn').click(function(e){ e.stopPropagation(); $('.comment').delay(1000).slideDown(50); }); $('.comment span.active,.comment button.active').click(function(e){ e.stopPropagation(); $('.comment').delay(300).slideUp(50); }); // 或直接给box返回一个false,就不用写上面两个阻止冒泡了 $('.box').click(function(event) { /* Act on the event */ return false; }); $('body').click(function(e){ alert(1); // alert(1); $('.comment').delay(300).slideUp(50); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>按钮</button> <input type="text" name="user" value="123"> <p class="content"></p> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // // jquery中没有监听输入框输入内容的方法,需要用原生js,下面代码无效。 // $('input').change(function(e){ // console.log(e.target.value); // }); // 原生oninput的事件 // 双向的数据绑定 单向数据绑定(data==>view) $('input')[0].oninput = function(e){ console.log(e.target.value); $('.content').text(e.target.value); }; // $('.content').text($('input').val()); // 和上面的方法功能一样 $('button').click(function(e){ // currentTaget 当前事件的目标对象 console.log(e.currentTarget); // 事件的触发对象 js对象 console.log(e.target); console.dir(e.target.innerText); console.log($(e.target).text()); console.log($(this).text()); console.log(this===e.currentTarget); // true console.log(this===e.target); // true // 在用事件的时候,99%的情况都需要阻止冒泡 e.stopPropagation(); }); $('body').click(function(e){ // console.log(e.currentTarget); console.log(e.target); console.log(this===e.currentTarget); console.log(this===e.target); }); $('html').click(function(e){ // console.log(e.currentTarget); console.log(e.target); console.log(this===e.currentTarget); console.log(this===e.target); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>按钮</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 两次单击中间的时间差是300毫秒,如果小于300毫秒,表示双击 // 遇到的问题:是双击,调用了两次单击 var timer = null; // 解决这个单双击冲突问题 $('button').click(function(event) { // 取消第一次延时未执行的方法 clearTimeout(timer); // 如果是双击事件,要阻止两次单击事件的调用 timer = setTimeout(function(){ console.log('单击了'); },300) }); $('button').dblclick(function(event) { // 取消的是第二次延时未执行方法 clearTimeout(timer); console.log('双击了'); }); }); </script> </body> </html>
7. 鼠标移入和移出事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .father{ width: 200px; height: 200px; background-color:red; } .child{ width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="father"> <p class="child"> alex </p> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 鼠标穿过被选元素和被选元素的子元素,会触发此事件 // $('.father').mouseover(function(event) { // console.log('移入了'); // }); // $('.father').mouseout(function(event) { // console.log('移出了'); // }); 鼠标只穿过被选元素会触发此事件 $('.father').mouseenter(function(event) { console.log('进入了'); }); $('.father').mouseleave(function(event) { console.log('离开了'); }); }); </script> </body> </html>
购物车案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } .shopCart { position: relative; width: 100px; height: 40px; background-color: red; line-height: 40px; } .content { position: absolute; top: 40px; width: 300px; height: 200px; background-color: green; } </style> </head> <body> <div class="shopCart"> <span>购物车</span> <div class="content" style="display: none;"></div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { /* 不要用over和out实现 $('.shopCart').mouseover(function(){ $(this).children('.content').slideDown(500); }); $('.shopCart').mouseout(function(){ console.log(111); $(this).children('.content').slideUp(500); }) */ /* $('.shopCart').mouseenter(function() { $(this).children('.content').slideDown(500); }); $('.shopCart').mouseleave(function() { console.log(111); $(this).children('.content').slideUp(500); }) */ // 合成事件 mouseenter mouseleave $('.shopCart').hover(function() { $(this).children('.content').slideDown(500); }, function() { /* Stuff to do when the mouse leaves the element */ $(this).children('.content').slideUp(500); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://www.baidu.com/s" method="get"> <input type="text" name="wd"> <input type="submit" value="🔍"> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 文本选中的时候会调用 $('input[type=text]').select(function(){ console.log('内容选中了'); }); // 原生js的onsubmit事件 $('form').submit(function(e){ // 如果想自己用js实现,就要阻止它的默认发送 e.preventDefault(); console.log('form被submit了'); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="user"> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 加载页面时 让输入框 获得焦点 // $('input[type=text]').focus(); // setTimeout(function(){ // $('input[type=text]').blur(); // },2000) // $('input[type=text]').focus(function(){ // console.log('获取焦点'); // }); // $('input[type=text]').blur(function(){ // console.log('失去焦点'); // }); // 键盘按键事件 $('input').keyup(function(e){ console.log(e.keyCode); // 键码 switch (e.keyCode) { case 13: console.log('回车键调用了'); console.log($(this).val()); // 未来与后端进行交互 break; case 27: console.log('回车键调用了'); console.log($(this).val()); // 未来与后端进行交互 break; default: // statements_def break; } }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>alex</li> <li class="item">wusir</li> </ul> <button>添加</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ /* $('ul>li').click(function(){ alert($(this).text()); }); */ // 事件委托(如果是未来追加的元素,建议使用事件委托来绑定事件) // 原理: 利用冒泡的原理,把事件加到父级上,触发执行效果。 $('ul').on('click','li',function(e){ alert($(this).text()); }); // 未来动态的往ul中追加了li标签 // 未来追加的li标签,自己完成不了click事件,那么这个时候考虑“事件委托(代理)” $('button').click(function(event) { $('ul').append('<li>黑gril</li>') }); }); </script> </body> </html>
十一、ajex
什么是动态页面:数据驱动视图(面试必考)
AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)
简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
1. get请求
$.ajax({ url:'http://localhost:8800/course', type:'get', dataType:'json', success:function(data){ console.log(data); // // $('body').html(data); // $('.box').text(data.name); }, error:function(err){ console.log(err); } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form > <input type="text" name="user"> <input type="submit" name=""> </form> <!-- <div class="box"></div> --> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('form').submit(function(e){ // 阻止form表单的默认事件 e.preventDefault(); var userVal = $('input[name=user]').val(); console.log(userVal); // 与你后端交互 $.ajax({ url:"http://localhost:8800/create", type:'post', data:{ "name":userVal }, success:function(data){ console.log(data); }, error:function(err){ console.log(err); } }) }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="tmp"></div> <div class="city"></div> <img src="" alt=""> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { $.ajax({ url: 'https://free-api.heweather.com/s6/weather/now?location=tianjin&key=4693ff5ea653469f8bb0c29638035976', type: "get", success: function (data) { console.log(data.HeWeather6[0].now.tmp); // 温度 var tmp = data.HeWeather6[0].now.tmp; // 城市 var city = data.HeWeather6[0].basic.location; // 天气状况码 var cond_code = data.HeWeather6[0].now.cond_code; // 后面方法的参数使用的是es6的模板字符串拼接的变量 $('.tmp').text(`${tmp}℃`); $('.city').text(city); // 后面的地址是使用的和风天气的天气状况cdn资源。您也可以使用本地图片加载 $('img').attr('src', `https://cdn.heweather.com/cond_icon/${cond_code}.png`); } }) }); </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步