标签：get val AC 外部 通配符选择器 位置 按钮 find 隐藏
书写繁琐，代码量大
代码复杂
动画效果，很难实现。使用定时器 各种操作和处理 
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法
# 1 DOM文档加载的步骤 1.解析HTML结构。 2.加载外部脚本和样式表文件。 3.解析并执行脚本代码。 4.DOM树构建完成。 $(document).ready(function(){}) / $(function(){}) 5.加载图片等外部文件。 6.页面加载完毕。 window.onload() #2 执行时间不同 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 #3 编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行 #4 简化写法不同 window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){});
（4）juqery的引入与使用
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
$(function () {
})
</script>
1.基本选择器
//1.标签选择器 $($(‘h1‘)[0]).click(function () { $(this).css(‘background-color‘,‘red‘); $(this).css(‘font-size‘,‘22px‘); $(this).css(‘line-height‘,‘22px‘); }); //2.id选择器 $(‘#old‘).click(function () { $(this).css(‘color‘,‘green‘); }); //3.class选择器 $(‘.box1‘).click(function () { $(this).css(‘font-size‘,‘30px‘); }); //4.通配符选择器 * 使用不是很频繁 //$(‘*‘).html(‘‘); 清空整个页面的dom元素
2.层级选择器
//1.后代选择器 $(‘ul p‘).click(function () { $(this).css(‘color‘,‘red‘) }); //2.子代选择器 $(‘ul>li‘).click(function () { $(this).css(‘font-size‘,‘22px‘) }); //3.毗邻选择器 匹配该元素紧邻的下一个兄弟元素 $(‘ul+h2‘).click(function () { $(this).css(‘background-color‘,‘red‘) }); //4.兄弟选择器， 匹配的元素后面的所有兄弟元素 $(‘ul~h3‘).click(function () { $(this).css(‘color‘,‘blue‘); });
3.基本过滤选择器
//1.获取first last元素 $(‘li:first‘).css(‘font-size‘,‘43px‘); $(‘li:last‘).css(‘font-size‘,‘43px‘); //2.eq gt lt 选中索引值为1的元素 * ，大于，小于 $(‘li:eq(1)‘).css(‘font-size‘,‘43px‘); $(‘li:gt(1)‘).css(‘font-size‘,‘13px‘); $(‘li:lt(1)‘).css(‘font-size‘,‘23px‘); //3.奇数偶数 $(‘li:odd‘).css(‘background-color‘,‘pink‘); $(‘li:even‘).css(‘background-color‘,‘orange‘);
4.属性选择器
//1. 标签名[属性名] 查找所有含有id属性的该标签签名的元素 $(‘li[id]‘).css(‘color‘,‘red‘); //2. 匹配给定的属性值是active的元素 $(‘li[class=active]‘).css(‘color‘,‘red‘); //3. $(‘li[class^=a]‘).css(‘color‘,‘red‘); //4. $(‘li[class$=e]‘).css(); //5. 匹配给定的属性是以包含某些值的元素 $(‘li[class*=btn]‘).css()
解释：
标签名[属性名]，查找所有含有id属性的该标签名的元素
匹配给定的属性 是what值 [attr=value] 匹配给定的属性是某个特定值的元素
没有class 也会发生变化，[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
匹配给定的属性是以某些值开始的元素 ^
匹配给定的属性是以某些值结尾的元素 $
匹配给定的属性是以包含某些值的元素 *
5.筛选选择器/筛选方法
（1）each遍历方法
1.each 遍历 $(‘ul‘).children().each(function (index,ele) { // console.log(index,ele); var isDanger = $(this).hasClass(‘danger‘); if(isDanger){ $(this).css(‘color‘,‘red‘); }else{ $(this).css(‘font-size‘,‘28px‘); } });
（2）父兄子
$($(‘h1‘)[2]).click(function () { //1.获取父级节点 $(this).parent(); //一个父亲节点 $(this).parents(); //所有父辈节点 //2.获取兄弟节点 $(this).siblings(); //所有的兄弟节点 $(this).prev(); //前一个兄弟节点 $(this).prevAll(); //all 前一个兄弟节点 $(this).next(); //下一个兄弟节点 $(this).nextAll(); //all 下一个兄弟节点 //3.获取儿子，后代节点 $(this).parent().children(‘h1‘).css(‘font-size‘,‘22px‘); //所有的儿子节点 $(this).parent().find(‘h1‘).css(‘color‘,‘red‘); //后代节点 //4.指定eq last first $(this).parent().children().eq(2); $(this).parent().children().first(); $(this).parent().children().last(); //5.指定标签 h1 $(this).parent().children(‘h1‘); $(this).parents(‘body‘).children(‘h1‘); })
解释：
获取第n个元素 数值从0开始 .eq()
获取第一个元素 .first()
获取最后一个元素 .last()
获取父亲元素 .parent()
选择所有的兄弟元素 .siblings()
查找所有的后代元素 .find()
#Dom对象--> jquery对象 var box = document.getElementById(‘box‘); console.log($(box)); #jquery对象--> DOM对象 $(‘button‘)[0] $(‘button‘).get(0) #注： Dom对象 box.onclick = function(){} jquery对象 $(box).click(function(){})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box1 { border: 1px solid red; width: 70px; height: 70px; } </style> </head> <body> <div id="box1"></div> <input type="button" id="btn" value="隐藏"> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> //隐藏显示 hide show toggle $(function () { $(‘#btn‘).click(function () { // $(this).prev().toggle(); }); var flag = 1 $(‘#btn‘).click(function () { if (flag) { $(this).prev().hide(3000) $(this).val(‘显示‘); flag = 0 }else{ $(this).prev().show(2000) $(this).val(‘隐藏‘) flag = 1 } }) }) </script> </html>
<script type="text/javascript"> // 盒子变高 slideUp slideDown slideToggle $(function () { var flag = 1 $(‘#btn‘).click(function () { if (flag) { $(this).prev().slideUp(1000) $(this).val(‘变高‘) flag = 0 } else { $(this).prev().slideDown(1000) $(this).val(‘变低‘) flag = 1 } // $(this).prev().slideToggle(3000) }) }) </script>
<script type="text/javascript"> //淡入淡出 fadeIn fadeOut fadeTo fadeToggle $(function () { var flag = 1 $(‘#btn‘).click(function () { if (flag) { $(this).prev().fadeOut(3000) $(this).val(‘淡入‘) flag = 0 } else { $(this).prev().fadeIn(2000) $(this).val(‘淡出‘) flag = 1 } //$(this).prev().fadeToggle() //$(this).prev().fadeTo(3000,0.3) }) }) </script>
<script type="text/javascript"> $(function () { //动画 animate delay stop $(‘#btn‘).click(function () { $(this).prev().animate({‘width‘:‘200px‘,‘height‘:‘200px‘},3000) $(this).prev().animate({‘margin-left‘:‘20px‘}).delay(200).animate({‘margin-top‘:‘30px‘}) }); $(‘#btn1‘).click(function () { $(this).prevAll(‘div‘).stop() }) }) </script>
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作。
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val():用于表单控件中获取值，比如input textarea select等等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单个标签 修改css属性</title> <style type="text/css"> .active { background-color: pink; } .box1 { color: orange; } .font1 { font-size: 22px; } </style> </head> <body> <h1 id="Luffycity" class="box1">路飞学城</h1> <input type="button" id="btn" value="点击"> <h2 id="oldBoy">老男孩</h2> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { $("#Luffycity").click(function () { //1. html属性操作 attr() //1.1 获取标签的 各种属性值 ： attr() 如果有1个参数，表示获取值 $(this).attr(‘id‘); $(this).attr(‘class‘); $(this).attr(‘title‘); //1.2 设置标签的属性值class id name： attr() 如果有2个参数，表示设置值 $(this).attr(‘class‘, ‘active‘); $(this).attr({‘id‘: ‘box2‘, ‘name‘: ‘name11‘}); //如果设置多个类名，不能使用attr //1.3 删除1个或多个属性 $(this).removeAttr(‘id‘); $(this).removeAttr(‘name title‘); // 2、DOM属性操作 prop 可以设置没有的属性 //attr 只能操作标签自带的属性， //2.1 获取该元素的class值 $(this).prop(‘class‘); //2.2 设置值 $(this).prop({‘title‘: ‘img1‘, ‘title22‘: ‘active‘}); //2.3 删除dom对象的title属性 $(this).removeProp(‘title‘, ‘title2‘); // 3、类样式操作 addClass() removeClass() toggleClass（）添加类，删除类 //3.1 添加一个或多个 class $(this).addClass(‘box1‘); $(this).addClass(‘box1 font1‘); //添加多个 //3.2 删除一个或多个class $(this).removeClass(‘font1‘); $(this).removeClass(); //移除所有的 //3.3.反复添加删除class属性值 $(this).toggleClass(‘active‘); ///4、值操作 // 4.1 获取值 $(this).text(); //获取标签的text 路飞学城 $(this).html(); //获取标签的里面的html 路飞学城 $("#btn").val(); //获取input标签的 val 点击 //4.2 设置值 $(this).html(‘路飞学城2‘); $(this).text(‘路飞学城22‘); $(this).html("<span>我是一个span</span>"); $("#btn").val(‘设置了value‘); //表单控件使用的一个方法 }); }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { margin: 20px; } </style> </head> <body> <div> <input type="radio" value="1" name="sex">男 <input type="radio" value="2" name="sex" checked>女 <input type="radio" value="3" name="sex">other </div> <div> <input type="checkbox" name="hobby" value="11" checked>game <input type="checkbox" name="hobby" value="12" checked>sing <input type="checkbox" name="hobby" value="13">book </div> <div> username:<input type="text" name="username" placeholder="请输入用户名"><br> password:<input type="password" name="password" placeholder="请输入密码"> </div> <div> <button type="reset">重置</button> <button type="submit">提交</button> <button type="button">登录</button> </div> <div> <select name="city" id="city" multiple> <option value="21">shanghai</option> <option value="22" selected>guangzhou</option> <option value="23" selected>beijing</option> <option value="24">xian</option> </select> </div> <div> <textarea name="desc" id="desc" cols="30" rows="10"></textarea> <textarea name="desc" id="desc1" cols="30" rows="10"></textarea> <textarea name="desc" id="desc2" cols="30" rows="10"></textarea> </div> <script src="./jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { //1.单选框 type=radio 设置,获取 value $("input[type=radio]").val([‘0‘]); console.log($(‘input[type=radio]:checked‘).val()); $(‘input[type=radio]‘).get(1).checked = true //radio第二个框设定为checked //2.复选框 type=checkbox 仅仅获取第一个checked $(‘input[type=checkbox]‘).val([‘12‘, ‘13‘]); console.log($("input[type=checkbox]:checked").val()); $.each($(‘input[type="checkbox"]:checked‘), function () { // $.each循环下 console.log($(this).val()) }) $(‘input[type=checkbox]‘).get(1).checked = true //3.下拉列表select option $(‘select‘).val([‘23‘]); //设置 必须用select $(‘select‘).val([‘21‘, ‘22‘, ‘23‘, ‘24‘]) $(‘select[name=city]‘).val([‘21‘]) console.log($(‘#city option:selected‘).val()); //获取值 console.log($(‘select[id=city]:selected‘).text()) console.log($(‘:selected‘).text()) console.log($(‘select>option:selected‘).eq(1).text()) //4. 文本type=text $(‘input[type=text]‘).val(‘试试就是说‘) console.log($(‘input[type=text]‘).val()) //5.button按钮 $(‘button[type=reset]‘).html(‘我要重置了‘) //6.文本框，禁用输入字段 $("textarea[id=‘desc‘]").attr(‘disabled‘, true) $("textarea[id=‘desc1‘]").attr(‘readonly‘, true) }) </script> </html>
插入操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点的增删改查</title> </head> <body> <h1>路飞学城0</h1> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { $($(‘h1‘)[0]).click(function () { //1.创建新的标签 var oH2 = document.createElement(‘h2‘); var btn = document.createElement(‘input‘); //2.给新标签inner 新的html text值 $(oH2).html(‘路飞学城2‘); $(oH2).text(‘路飞学城22‘); $(oH2).html("<span>我是一个span</span>"); $(btn).val(‘设置了value‘); //3.给新标签添加属性值 id title class name $(oH2).attr(‘id‘,‘Luffycity2‘); $(oH2).attr({‘title‘:‘luff‘,‘class‘:‘active‘,‘name‘:‘luff‘}); $(oH2).addClass(‘active2‘); //插入操作 //4.父子add的各种方式 append prepend $(this).parent().append(oH2); //追加到子元素的后面 $(oH2).appendTo($(this).parent()); $(this).parent().prepend(oH2); //添加到子元素的最前面 $(oH2).prependTo($(this).parent()); //5.同级兄弟 add元素 before after $(this).after(oH2); $(oH2).insertAfter($(this)); $(this).before(oH2); $(oH2).insertBefore($(this)); }) }) </script> </html>
复制clone(true),替换，删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 id="Luffycity1">路飞学城1</h1> <input type="button" id="btn" value="复制"><br> <input type="button" id="btn2" value="替换"> <input type="text" id="username" value="文本框"><br> <input type="button" id="btn3" value="empty"> <input type="button" id="btn4" value="remove"> <input type="button" id="btn5" value="detach"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { // 复制操作： $(‘#btn‘).click(function () { $(‘#Luffycity1‘).after($(‘#Luffycity1‘).clone(true)); // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) $(‘#Luffycity1‘).after($(‘#Luffycity1‘).clone()); // 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。 }); // 替换操作 $(‘#btn2‘).click(function () { $(‘#username‘).replaceWith(‘<span>我是新的文本</span>‘) // 替换成指定的HTML或DOM元素。 $(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘) // 替换掉所有 selector匹配到的元素 }); //删除操作 //1. empty() 只是清空了被选的内容 $(‘#btn3‘).click(function () { $(‘ul‘).empty(); }); //2.remove() 被选元素也被删掉了，事件就没有了，什么都没有了 $(‘#btn4‘).click(function () { $(‘ul‘).remove(); }); //3.detach() 移除匹配的节点元素 删除节点后，事件会保留 $(‘#btn5‘).click(function () { var btn5 = $(this).detach(); console.log($(btn5)); $(‘ul‘).append($(btn5)); }); }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #box1 { position: relative; width: 200px; height: 200px; border: 5px solid red; padding: 10px 5px; } p { position: absolute; top: 30px; left: 30px; } #box2 { width: 200px; height: 200px; margin: 0 auto; border: 1px solid deepskyblue; } </style> </head> <body> <div id="box1"> <p>我是一个段落标签</p> </div> <button id="btn">动画吧</button> <div id="box2"></div> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { //1.相对于父级的偏移量 position() position().left position().top console.log($(‘p‘).position()); console.log($(‘p‘).position().left); console.log($(‘p‘).position().top); var offSetTop = $(‘p‘).position().top + 50 + ‘px‘ $(‘#btn‘).click(function () { $(this).prev().children(‘p‘).animate({‘top‘: offSetTop,}, 2000) }) //2.相对滚动条的位置信息 scroll scrollTop scrollLeft console.log($(document).scroll()) console.log($(document).scrollTop()) //滚动条距离顶部100px console.log($(document).scrollLeft()) //监听文档滚动条滚动 $(document).scroll(function () { $(document).scrollTop() > 100 ? $(‘#gotop‘).show() : $(‘#gotop‘).hide() }) $(‘#gotop‘).click(function () { $(‘html,body‘).animate({scrollTop: ‘0‘}, 2000) }) //3.在当前视口的相对偏移 相对于浏览器 offset offset().top offset().left console.log($(‘p‘).offset()) console.log($(‘#box1‘).offset()) console.log($(‘p‘).offset().top) // 30px+1px console.log($("p").offset().left) //4.获取元素的内容区域content 的宽高 width height console.log($(‘#box1‘).width()) console.log($(‘#box1‘).height()) //设置 $(‘#box1‘).width(400) //5.该元素 的内部宽高 innerHeight= content+padding console.log($(‘#box1‘).innerHeight()) // 200px + padding*2 console.log($(‘#box1‘).innerWidth())
//6.外部高度 outerWidth outerHeight console.log($(‘#box1‘).outerHeight()) // 200px + padding*2 + border*2 console.log($(‘#box1‘).outerWidth()) }) </script> </html>
标签：get val AC 外部 通配符选择器 位置 按钮 find 隐藏
原文地址：https://www.cnblogs.com/venicid/p/9220067.html
