jQuery学习
jquery简介
jquery 相当于一个模块 查找标签 操作标签 jquery的版本 那个系列都可以用 推进使用1系列的最新版本 兼容性更好 1.x 兼容性更好 2.x 忽略IE的低版本 3.x 现在用的是 jquery-1.12.4.js 测试就用这个 可以看到源码 如果是时候生产环境用的话 就用带min字样的压缩版
引入jquery模块/文件
<script src="jquery-1.12.4.js"></script> 调用jquery方法 方法1 jQuery.方法 方法2 $. 用$代替jQuery
基本选择器
找标签 直接寻找 //对比js的使用方法 根据id $('#id') 根据classname $('.classname') 根据标签名字 $('a') 组合寻找 $('a','.c1','#id') 1.通过id $('#id') <div id=i1">火柴互娱</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').方法 </script> jquery和js的转换 jquery=>dom $()[0] dom=>jquery $(dom) 举例如下: <div class="i1">火柴互娱</div> $('#i1') [div#i1, context: document, selector: "#i1"] document.getElementById('i1') <div id="i1">火柴互娱</div> $('#i1')[0] //jquery===>dom jquery取值索引为0 就是js的方法 <div id="i1">火柴互娱</div> $(document.getElementById('i1')) //dom====>jquery $(dom) [div#i1, context: div#i1]
层级选择器
找标签 以某个标签为参照物寻找其他的标签 找子子孙孙 空格 后代查找 子子孙孙都查找 凡是在其下的都查找
> 子代查询 只找儿子 重要记住
+ 下一个
~ 兄弟标签
空格 寻找子子孙孙 寻找i10下的所有a标签 $('#i10 a') 重要记住 <div id="i10" class="c1"> <a href="">f</a> <a href="">f</a> <div class="i9"> <a href="">h</a> <a href="">h</a> </div> $(this).next() //()里可以继续添加筛选条件 获取标签的下一个标签 筛选器 nextall 是找到下边所有的 next是仅仅找到下边一个 nextUntil('截止找到哪里') $(this).prev() 上一个 prevall preUntil 同理 $(this).parent() 父亲 parents 找出所有的关系 parentUntil 找到那个位置截止 $(this).children() 儿子 $(this).siblings()兄弟们
$(this).find()//查找所有 后代查询
基本筛选器
什么什么里边的第几个标签 都可以组合来用 灵活应用
$(
"li:first"
) $(
"li:eq(2)"
) $(
"li:even"
) $(
"li:gt(1)"
)
1.寻找i10里的第一个a标签 $('#i10 a:first') last是最后一个标签 <div id="i10" class="c1"> <a href="">f1</a> <a href="">f2</a> </div> 2. $('#i10 a:eq(3)') 根据索引取标签 $('#i10 a:gt(3)') 大于某个索引的标签 $('#i10 a:lt(3)') 小于
属性筛选器
$(
'[id="div1"]'
) $(
'["alex="sb"][id]'
)
<a alex="123">f2</a> 属性是alex='123' $('[alex]') //筛选出有alex属性的标签 $('[alex="123"]') //这个是更加细致了,包括属性的值了 举例:筛选出type='text'的input标签 <input type="text"> <input type="text"> <input type="password"> <input type="file"> $('input[type="text"]') //简写为: $(':text')
表单对象属性
$(
"[type='text']"
)
-
-
-
-
-
>$(
":text"
) 注意只适用于
input
标签 : $(
"input:checked"
)
<from> <input type="text"> <input type="text" disabled> <input type="text" enabled> </from> $(':enabled'); $(':disabled'); 其他属性还有:checked selected
三元运算
var v=条件? 真值:假值 如果条件是真的 就把真值赋值给v,否则把假值赋值给v $('#tb :checkbox').prop('checked',true); //这里的true 如果指定了 //就是指定值,如果为空,就是获取值 //prop 属性是专门针对checked selected 做的 //$().each(function){} each就是jquery里的for循环 每一次循环执行function里的内容 ////$('#tb :checkbox').each(function (k) { 如果加个k 就是指当前的索引位置
jQuery的内容操作
文本操作 先回顾一下js的操作 document.getElementById('i1') var tag=document.getElementById('i1') tag.innerText //获取内容所有内容 均是当做文本处理 tag.innerHTML //获取内容 识别标签 tag.innerText='abcdef' //重新赋值 tag.innerHTML='<a>jdhfkjdhfkjdf</a>' //识别标签 重新赋值 jQuery的内容操作 $('#i1').text() //获取内容所有内容 均是当做文本处理 $('#i1').html() //获取内容 识别标签 $('#i1').text('123456') //重新赋值 $('#i1').html('<a>djfhdjkfh</a>') //识别标签 重新赋值
$(this).html('hello').next().css('color','red') //jquery支持链式操作 回顾js对input的操作 <input type="text" id="i2" value="qiqi"> var tag=document.getElementById('i2') tag.value "qiqi" tag.value='geget' "geget" tag.value "geget" jquery对input的操作 <input type="text" id="i2" value="qiqi"> $('#i2').val() //获取value的值 "qiqi" $('#i2').val('gege') //给value重新赋值 [input#i2, context: document, selector: "#i2"] $('#i2').val() "gege" 样式操作 $('.c1').hasClass('hide') //是否有 $('.c1').removeClass('hide'); //删除 $('.c1').addClass('hide'); //添加 $('.c1').toggleClass('hide'); //有就删除 无就添加 实例如下: <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关"> <div class="c1 hide">djfhksdhf</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function () { //想要的效果是 点击开关 然后内容显示 再点击 内容消失 // //逻辑就是 如果class存在hide就移除 不存在就加上 // if ($('.c1').hasClass('hide')){ // $('.c1').removeClass('hide'); // }else{ // $('.c1').addClass('hide'); // } //厉害了 以上的if逻辑 jQuery一句话就实现了 $('.c1').toggleClass('hide'); //逻辑就是 如果class存在hide就移除 不存在就加上 }) 属性操作 重要 $().attr() //专门用于做自定义属性的 $().prop() //专门用于checkbox,radio做操作的 $().removeAttr() //删除标签的属性 $().index //获取索引 $().attr() //专门用于做自定义属性的 一个值是取值,两个是设置值 举例如下: <input id="i1" type="button" value="开关"> $('#i1').attr('type') //获取input标签的type属性的值 $('#i1').attr('type','submit') //给属性赋值 $('#i1').attr('name','alex')//添加新的属性 $().prop() <input type="checkbox" id="i3"> $('#i3').prop('checked',true) $('#i3').prop('checked',false) 文档处理 添加 $('#ul').append(temp);// 以儿子的身份添加到末尾 也就是添加到ul里边 $('#ul').prepend(temp);// 以儿子的身份添加到开头 也就是添加到ul里边 $('#ul').after(temp);//添加到ul的后边,和ul是平级 $('#ul').before(temp);//添加到ul的前边,和ul是平级 删除 $().remove();//删除标签 $().empty();//仅仅删除标签里的内容 克隆 var tag=$().clone();//复制
标签操作
创建标签
var $li=$('<li>') 创建一个li标签 前边加$是为了提醒自己这是个jquery对象 注意<>
删除标签
$(this).parent().parent().remove();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .tanchu { position: fixed; top:30%; left:30%; width:300px; height:250px; margin-left:20px; margin-top:20px; /*border: 1px solid red;*/ z-index: 10; background: white; } .shadow { position: fixed; /*固定在页面的某个位置*/ top:0; /*上下左右都是是0的话 就会覆盖整个页面*/ left:0; right:0; bottom:0; z-index:9; /*和弹出框有个封层 设置z-index*/ background-color: #ededed; opacity: 0.8; ; } .hide { display: none; } </style> </head> <body> <!--<div class="zhezhao hide></div>--> <button id='add' onclick="addElement();">添加</button> <table border="1" id="tb"> <thead> <tr> <th>IP</th> <th>端口号</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td target="ip">1.1.1.1</td> <td target="port">80</td> <td><button class="edit">编辑</button><button class="del">删除</button></td> </tr> <tr> <td target="ip">2.2.2.2</td> <td target="port">81</td> <td><button class="edit">编辑</button><button class="del">删除</button></td> </tr> <tr> <td target="ip">3.3.3.3</td> <td target="port">82</td> <td><button class="edit">编辑</button><button class="del">删除</button></td> </tr> <tr> <td target="ip">4.4.4.4</td> <td target="port">83</td> <td><button class="edit">编辑</button><button class="del">删除</button></td> </tr> </tbody> </table> <div class="tanchu hide"> <p>IP:<input type="text" class="ip" name="ip"></p> <p>端口号:<input type="text" class="port" name="port"></p> <input type="button" value="取消" onclick="cancel();"> <input type="button" value="确定" onclick="confirm();"> </div> <div class="shadow hide" onclick="cancel2();"></div> <script src="jquery-1.12.4.js"></script> <script> //点击添加 弹出弹出框 function addElement() { $('.tanchu,.shadow').removeClass('hide'); } //设置弹出框里的取消 点击就返回页面 function cancel() { $('.tanchu,.shadow').addClass('hide'); } // 点击灰色遮罩层 也是返回页面 function cancel2() { $('.tanchu,.shadow').addClass('hide'); } cook(); function cook() { $('.del').click(function () { $(this).parent().parent().remove(); //哇塞 学会了就是开心 一下子这里就写出来了 }) $('.edit').click(function () { //这样不利于 后续添加的编辑按钮 $('.tanchu,.shadow').removeClass('hide'); // 知识点 prevAll 上边的所有标签 var tds=$(this).parent().prevAll(); //拿到了ip和端口号的标签 就该循环获取里边的值 赋值给对应的input中的value tds.each(function () { //this 指的是当前每个td //获取td的target的属性值 var n=$(this).attr('target'); //获取td的文本内容 var text=$(this).text(); // var a1='.tanchu input[name="'; // var a2='"]'; // var temp=a1+n+a2; //$(temp).val(text); $('.tanchu input[name="'+n +'"]').val((text)); //字符串拼接 这行是以上四行的拼接 }); }) } //点击弹出框里的确定按钮 就添加标签 觉得这个很难的 function confirm() { //1.获取弹出框里需要输入的ip和端口号 把获取到的值搞成数组 然后组成td 每个td有target属性 var trs=[]; $('.tanchu input[type="text"]').each(function () { //循环输入的input //以下是写死的添加 本来应该用循环的 先写死吧 循环明天自己思考 var tr=document.createElement('tr'); var td1=document.createElement('td'); td1.innerHTML=$(".ip").val(); var td2=document.createElement('td'); td2.innerHTML=$(".port").val(); var tded=document.createElement('td'); var buttone=document.createElement('button'); var buttond=document.createElement('button'); buttone.innerHTML='编辑'; buttond.innerHTML='删除'; $(buttond).addClass("del"); $(buttone).addClass("edit"); $(tr).append(td1); $(tr).append(td2); $(tded).append(buttone); $(tded).append(buttond); $(tr).append(tded); $('#tb').append(tr); //以上是写死的添加 cook(); }) } //点击删除按钮就删除对应的tr </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header { background-color:yellow; } .content { min-height:50px; } .hide { display: none; } </style> </head> <body> <div style="height: 400px;width: 200px; border: 1px solid red;"> <div class="item"> <div class="header">标题1</div> <div class="content">内容1</div> </div> <div class="item"> <div class="header">标题2</div> <div class="content hide">内容2</div> </div> <div class="item"> <div class="header">标题3</div> <div class="content hide">内容3</div> </div> <div class="item"> <div class="header">标题4</div> <div class="content hide">内容4</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> //$('.header').click() //所有class是header的标签 绑定click事件 $('.header').click(function () { // console.log(this) //以下是函数里需要做的事情 //$(this) 当前点击的标签 //当点击header标题标签的时候,需要获取到header的下一个标签也就是content去掉hide //然后继续找当前点击标签(header)的父亲的兄弟们的带有content属性的儿子们 加上hide //筛选器 /* $(this).next() //获取标签的下一个标签 筛选器 nextall 是找到下边所有的 next是仅仅找到下边一个 nextUntil('截止找到哪里') $(this).prev() 上一个 prevall preUntil 同理 $(this).parent() 父亲 parents 找出所有的关系 parentUntil 找到那个位置截止 $(this).children() 孩子们 $(this).siblings()兄弟们 */ $(this).next().removeClass('hide'); //jquery移除class // $(this).parent().siblings().children('.content').addClass('hide'); //或者 $(this).parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkall();" > <input type="button" value="反选" onclick="reverse();"> <input type="button" value="取消" onclick="cancel();"> <table border="1"> <thead> <tr> <th>选项</th> <th>ip</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"/></td> <td>2.1.1.1</td> <td>81</td> </tr> <tr> <td><input type="checkbox"/></td> <td>3.1.1.1</td> <td>82</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkall() { //console.log($(':checkbox')) $('#tb :checkbox').prop('checked',true); //这行就相当于在js中 for循环所有的带有checkbox属性的标签 //并一个一个选中 // } function cancel() { $('#tb :checkbox').prop('checked',false); } function reverse() { //.each循环每一个 干函数里的事情 $('#tb :checkbox').each(function () { //this 指得是当前循环的每一个元素 // console.log(this); 这里拿到的this直接是dom对象 显示的直接是标签 //没有用[]起来 // console.log($(this)) 转换为jquery对象 /* 这种方法是通过dom方法实现的 if(this.checked) { //如果this的checked的属性等于true的话 this.checked = false; }else{ this.checked=true; } */ //以下通过三元运算实现 /* 三元运算 var v=条件? 真值:假值 如果条件是真的 就把真值赋值给v,否则把假值赋值给v */ var v=$(this).prop('checked')?false:true;//做判断 如果条件成立,也就是checked true那么v就是false,反之 $(this).prop('checked',v); }) } </script> </body> </html>
事件绑定的方法
.有两种 常用的就是直接$().click
还有一种就是
绑定:
$('长辈标签').on('click',‘委派标签’,function(){
})
解绑:
$('长辈标签').off ('click',‘委派标签’,function(){
})
举例见table的编辑删除添加
动画效果
1.显示 隐藏 切换
<p>yuan</p> <button class="xianshi">显示</button> <button class="yincang">隐藏</button> <button class="qiehuan">切换</button> <script src="jquery-1.12.4.js"></script> <script> $('.xianshi').click(function () { $('p').show(1000); }) $('.yincang').click(function () { $('p').hide(); }) $('.qiehuan').click(function () { $('p').toggle(); }) </script>
2.滑动效果
<style> .c1 { background-color: #8aab30; height:50px; width:50px; } </style> </head> <body> <div class="c1"></div> <button id="in">fadein淡入</button>
<button id="out">fadeout淡出</button>
<button id="toggle">fadetoggle切换</button>
<button id="fadeto">fadeto</button> <script src="jquery-1.12.4.js"></script> <script> $('#in').click(function () { $('.c1'). }) $('.down').click(function () { $('.c1').slideDown(2000) //数越大 滑的越慢 }) $('.huan').click(function () { $('.c1').slideToggle(2000) //数越大 滑的越慢 }) </script>
3.淡入淡出
<style> .c1 { background-color: #8aab30; height:50px; width:50px; } </style> </head> <body> <div class="c1"></div> <button id="in">fadein淡入</button> <button id="out">fadeout淡出</button> <button id="toggle">fadetoggle切换</button> <button id="fadeto">fadeto模糊</button> <script src="jquery-1.12.4.js"></script> <script> $('#in').click(function () { $('.c1').fadeIn(1000); //数越大越慢 }) $('#out').click(function () { $('.c1').fadeOut(1000); }) $('#toggle').click(function () { $('.c1').fadeToggle(1000); }) $('#fadeto').click(function () { $('.c1').fadeTo(1000,0.4); // 变得模糊了 }) </script>
css的操作
$("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
偏移量
<style> .c1 { background-color: #8aab30; height:50px; width:50px; } </style> </head> <body> <div class="c1"></div> <script src="jquery-1.12.4.js"></script> <script> //offset的方法是参照物是可视窗口 console.log($('.c1').offset()); //查看div c1的偏移量 只有 top和left console.log($('.c1').offset().top); console.log($('.c1').offset().left); console.log($('.c1').offset({top:100,left:100})); //设置偏移量 是一个字典的形式 </script>
就写例子 记得快
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .menu { height: 500px; width: 20%; background-color: gainsboro; text-align: center; float: left; } .content { height: 500px; width: 80%; background-color: darkgray; float: left; } .title { line-height: 50px; background-color: wheat; color: rebeccapurple; } .hide { display: none; } </style> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"></div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.title').click(function () { //方法1: //$(this).next().removeClass('hide'); // $(this).parent().siblings().children('.con').addClass('hide'); // yayaya 这里我想用last 不行呀 我写了两行 //方法2 // $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); //一行也可以搞定呢 //方法3 // if($(this).next().css("display")=="none"){ // $(this).next().show(); // }else{ //// $(this).next().hide(); // $(this).next().show(); // $(this).parent().siblings().children('.con').hide(); //方法4 $(this).next().toggle(); //这里用toggle 不用直接用show $(this).parent().siblings().children('.con').hide(); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="quan">全选</button> <button class="cancal">取消</button> <button class="reverse">反选</button> <table border="1"> <tr> <td><input type="checkbox"></td> <td>篮球</td> </tr> <tr> <td><input type="checkbox"></td> <td>足球</td> </tr> <tr> <td><input type="checkbox"></td> <td>橄榄球</td> </tr> </table> <script src="jquery-1.12.4.js"></script> <script> $('.quan').click(function () { $(':checkbox').prop('checked',true); }); $('.cancal').click(function () { $(':checkbox').prop('checked',false); }); $('.reverse').click(function () { $(':checkbox').each(function () { if ($(this).prop('checked')){ $(this).prop('checked',false); }else{ $(this).prop('checked',true); } }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding:50px; border:1px solid #dddddd; } .item { position: relative; width:30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { addfaver(this); }) function addfaver(self) { var fontsize=15; var top=0; var right=0; var opacity=1; var $tag=$('<span>'); $tag.text('+1'); $tag.css('color','green'); $tag.css('fontSize', fontsize + 'px'); $tag.css('top',top + 'px'); $tag.css('right',right + 'px'); $tag.css('opacity',opacity); $tag.css('position','absolute'); $(self).append($tag); var obj=setInterval(function () { fontsize=fontsize -5; top=top -5; right=right -5; opacity=opacity -0.1; $tag.css('fontSize', fontsize + 'px'); $tag.css('top',top + 'px'); $tag.css('right',right + 'px'); $tag.css('opacity',opacity); if (opacity < 0){ clearInterval(obj); $(tag).remove(); } },100); } </script> </body> </html>
css操作
css的操作 $().css('样式',‘值’); $(this).css('color','red'); 点赞操作: 见点赞操作实例 捕捉滚动条的高度 $('div').scrollTop() //捕捉指定标签的滚动条的高度 $(window).scrollTop() //捕捉浏览器自带的滚动条的高度 //也可以设定具体的数值 $(window).scrollTop(0) //返回顶部 $().scrollLeft() position <div style="position: relative"> <div style="position:absolute;"> //absolute相对于relative的位置 </div> </div> 一堆高度 什么鬼呀 $().height() $().innerHeight() $().outerHeight() $().outerHeight(true) 纯高度 边框 外边框 内边距 事件 阻止默认事件的执行 例如 a标签 点击就会跳转 默认有个click事件 <a href="http://www.baidu.com" class="i1">走你</a> <script src="jquery-1.12.4.js"></script> <script> $('.i1').click(function () { alert(123); return false; #false阻止默认事件的执行 })