内容回顾:
- 筛选选择器
$('li:eq(1)') 查找匹配的元素
$('li:first')
$('li:last')
- 属性选择器
- 筛选的方法
- find() 查找后代的元素
- children() 查找亲儿子的元素
- parent() 查找的亲爹
- siblings() 查找的是兄弟(除自己之外)
- eq() 查找匹配的元素
- DOM操作
-类的操作
-addClass('active pp')
- removeClass('active pp')
- toggleClass('active')
- 标签属性操作
-attr('src')
-attr('src','./1.png')
-attr('title',/校花)
-attr ({'src':''1.png','title':'校花'})
- 值的操作
- text() 文本
- html() 文本和标签
- val() 只对表单元素有效
<input name value type/>
select
<option>抽烟</option>
<option value='喝酒'>喝酒</option>
<option>烫头</option>
<p>
<a>123</a>
</p>
- 样式属性操作
-css ('color','red')
-css({})
- 对象属性操作
- prop()
- removeProp()
- 自定义动画
- animate({},时间,fn)
今日内容
1.DOM的操作
-追加元素 (后置追加) 父子
content:可以是 jsDOM对象, jquery对象, 标签字符串
- 父.append(content)
- 子.appendTo(父)
-追加元素(前置追加) 父子
- 父.prepend()
-子.prependTo(父)
- 兄弟插入
- 参考节点.after()(要插入的兄弟节点)
-要插入的兄弟节点.insertAfter(参考节点)
- before()
- inserBefore()
- 替换操作
- 原节点.replaceWith(替换的节点)
- 替换的节点.replaceAll(原节点)
- 删除操作
- remove() 删除所有 元素和事件一起删除
- detach() 删除元素事件不删除
- empty() 清空
- html('') 清空内容
<head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> $(function () { var oA = document.createElement('a'); oA.href = '#'; oA.innerText = '家辉' // append(content) //jsDOM对象，jquery对象，标签字符串 $('.box').append('<h1 id="aaa">得劲</h1>'); $('#aaa').click(function () { $(this).css('color','red'); }) //移动操作 $('.box').append($('ul')); $('.box').append('<h3>得劲</h3>'); $('.box').append(oA); $('<h1>得劲</h1>').appendTo('.box').css('color', 'red').click(function () { $(this).css('color', 'yellow'); }) // // $('.box').prepend(`<ul> <li class="item">龙飞</li> <li class="item">龙飞</li> <li>龙飞</li> </ul>`); // $('.box').prepend(`<ol id="second"> <li class="item">龙飞</li> <li class="item">龙飞</li> <li>龙飞</li> </ol>`); // $(`<ol id="first"> <li class="item">鹏</li> <li class="item">马</li> <li>鹤</li> </ol>`).appendTo('ol li.item:eq(0)'); }) </script> </head> <body> <div class="box"> </div> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> $(function () { $('.box ul li.item').after('<li class="item2">家辉</li>'); $('<li class="item3">龙飞</li>').insertAfter('.item2'); $('.item3').replaceWith('<li id="box3">文杰</li>'); $(`<li class="active">李鑫</li>`).replaceAll('ul li'); $('<h2>艳林</h2>').replaceAll('.content p'); }) </script> </head> <body> <div class="box"> <ul> <li class="item">得劲</li> </ul> <div class="content"> <p>alex</p> </div> </div> </body>
<script src="jquery.js"></script> <script> $(function () { $('.btn').click(function () { alert(1111); //remove()删除元素 元素和事件一起删除 let jBtn = $(this).remove(); //删除元素 事件不删除 // let jBtn = $(this).detach(); console.log(jBtn) $('.content').append(jBtn); }) setTimeout(function () { $('.content').empty(); },2000) }) </script> </head> <body> <div class="content"> <h3>文正</h3> </div> <hr> <hr> <hr> <hr> <button class="btn">删除</button> </body>
2.事件
事件流
- DOM2级事件
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
鼠标事件：
- click()
- dblclick()
当鼠标穿过被选元素或者被选元素的子元素会被调用
- mouseover()
- mouseout()
当鼠标穿过被选元素的时候会调用
- mouseenter()
- mouseleave()
- mouseDown()
- mouseUp()
- mousemove()
- focus()
- blur()
表单事件：
- change()
- select()
- submit()
<body> <button id="btn"> 按钮 </button> <script> var oBtn = document.getElementById('btn'); //false 默认为false 没有捕获阶段 oBtn.addEventListener('click',function () { alert(1) },false) oBtn.onclick = function () { alert('弹出了'); } document.addEventListener('click',function () { console.log('document处于捕获阶段') },true); document.documentElement.addEventListener('click',function () { console.log('html处于捕获阶段') },true); document.body.addEventListener('click',function () { console.log('body处于捕获阶段') },true); oBtn.addEventListener('click',function () { console.log('按钮处于捕获阶段'); },true) oBtn.addEventListener('click',function () { console.log('按钮处于冒泡阶段'); },false) document.body.addEventListener('click',function () { console.log('body处于冒泡阶段') },false); document.documentElement.addEventListener('click',function () { console.log('html处于冒泡阶段') },false); document.addEventListener('click',function () { console.log('document处于冒泡阶段') },false); </script> </body>
<style> *{ padding: 0; margin:0; } .header{ width: 100%; height: 49px; background-color: darkviolet; } .header a{ color: #fff; } .changefu{ position: fixed; top: 0; left: 0; width: 100%; height: 200px; background-color: darkcyan; display: none; } .up{ float: right; } </style> </head> <body style="height: 2000px"> <div class="header"> <a href="#">换肤</a> </div> <div class="changefu"> <div class="content"> <button>img1</button> </div> <button class="up">收起</button> </div> <script> $('.header a').click(function (e) { // console.log(e); //阻止默认事件 e.preventDefault();//取消事件的默认动作。 e.stopPropagation()//不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 $('.changefu').stop().slideDown(2000); }) $('.up,body').click(function () { $('.changefu').stop().slideUp(2000); }) $('.content button').click(function (e) { e.stopPropagation() alert(2222); }) </script> </body>
<style> .box{ width: 200px; height: 200px; background-color: red; position: relative; } .child{ position: absolute; top: 200px; width: 100px; height: 100px; background-color: green; display: none; } </style> </head> <body> <button>按钮</button> <div class="box"> <div class="child"></div> </div> <input type="text" value="123"> <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0">女 <select name="" id=""> <option value="a">抽烟</option> <option value="b">喝酒</option> <option value="c">烫头</option> </select> <script> //两次单击时间间隔是300毫秒 //先做两次单击 再做双击 var timer = null; $('button').click(function () { clearTimeout(timer) timer = setTimeout(function () { console.log('单击了'); },300) }) $('button').dblclick(function () { clearTimeout(timer) console.log('双击了'); }) // $('.box').mouseenter(function () { // console.log('盒子进入了'); // $(this).children().show(); // }) // $('.box').mouseleave(function () { // console.log('盒子离开了'); // $(this).children().hide(); // }) // // $('.box').mouseover(function () { // console.log('盒子进入了'); // $(this).children().show(); // }) // $('.box').mouseout(function () { // console.log('盒子离开了'); // $(this).children().hide(); // }) $('.box').hover(function () { $(this).children().show(); },function () { $(this).children().hide(); }) $('.box').mousedown(function () { console.log('鼠标摁下了'); }) $('.box').mouseup(function () { console.log('鼠标抬起了'); }) // $('input[type=text]').focus(function () { // console.log('获取焦点了'); // }) // // $('input[type=text]').blur(function () { // console.log('失去焦点了'); // }) //自动获取焦点 // $('input[type=text]')[0].focus(); $('input[type=radio]').change(function () { console.log('表单元素改变了'); console.log($(this).val()); }) $('select').change(function (e) { console.log($(this).find('option:selected').val()); // // }) $('input[type=text]').select(function () { console.log('被选泽了') }) </script> </body>
3.ajax
<body> <a href=""></a> <form action="" method="get"> <input type="text" name="username" value=""> <br> <input type="password" name="username"> <br> <input type="submit"> </form> <script> $('form').submit(function (e) { var username = $('input[type=text]').val(); alert(1111); // 阻止默认事件 e.preventDefault(); var data = { 'title': "该用户已存在" } $(`<span>${data.title}</span>`).insertAfter('input[type=text]').css({ "color": 'red', "font-size": 12 }); // 与后端发生交互 // $.ajax({ // url: `http://127.0.0.1:8080/login?username=${username}`, // type:'get', // success:function (data) { // //{"text":'该用户已存在'} // // // // // //DOM操作 // } // // }); $.ajax({ url: `http://127.0.0.1:8080/login`, type: 'post', data: { username: 'alex', password: '123' }, success: function (data) { //{"text":'该用户已存在'} //DOM操作 } }); }); </script>
4.位置信息
width()
height()
<style> .box{ width: 200px; height: 400px; background-color: red; } </style> </head> <body> <div class="box"></div> <script> // console.log($('.box').css('width')); console.log($('.box').width()) console.log($('.box').height()) $('.box').width(400); </script> </body>
5.jquery插件