DOM 值操作 text() 和 html() 同 js 的 innerText 和 innerHTML
1 2 3 4 5 6 取文本: c.text(); 不带标签 c.html(); 带标签 设置文本: c.text('文本' ); c.html('文本' ); -- 文本--"<a href=''>皇家赌场</a>"
class 类值操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 html代码 <div class ="c1" > </div> css代码: .c1{ background-color: red; height: 100px; width: 100px; } .c2{ background-color: green; } jQuery $('div' ).addClass('c2' ); $('div' ).removeClass('c2' ); $('div' ).toggleClass('c2' ); 示例: var t = setInterval ("$('div').toggleClass('c2');" ,500 );
val 值操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 示例: html代码: <input type="text" id="username"> <input type="radio" class="a1" name="sex" value="1">男 <input type="radio" class="a1" name="sex" value="2">女 <input type="checkbox" class="a2" name="hobby" value="1">抽烟 <input type="checkbox" class="a2" name="hobby" value="2">喝酒 <input type="checkbox" class="a2" name="hobby" value="3">烫头 <select name="city" id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </select> <select name="lover" id="s2" multiple> <option value="1">波多</option> <option value="2">苍井</option> <option value="3">小泽</option> </select>
获取值 1 2 3 4 5 6 7 8 9 文本输人框:$('#username' ).val(); 单选radio框:$('.a1:checked' ).val(); 多选checkout框:$('.a2:checked' ).val()是不行的;需要循环取值,如下: var d = $(':checkbox:checked' );for (var i=0 ;i<d.length;i++){console .log(d.eq(i).val());} 单选select框:$('#city' ).val(); 多选select框:$('#lover' ).val();
设置值 1 2 3 4 5 文本输入框:$('#username' ).val('you are my love' ); 单选radio框:$('.a1' ).val([2 ]); 多选checkout框:$('.a2' ).val(['2' ,'3' ]) 单选select框:$('#city' ).val('1' ); 多选select框:$('#lover' ).val(['2' ,'3' ])
模态对话框 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 HTML代码: <h1 > 26期新热榜</h1 > <div > <button id ="btn" > 弹他</button > </div > <img src ="1.jpg" alt ="" > <div class ="login hide" > <h3 style ="text-align: center" > 欢迎来到王者荣耀</h3 > <div > 用户名:<input type ="text" > </div > <div > 密码:<input type ="text" > </div > <div > <button id ="login-btn" > 登录</button > <button id ="login-cancel" > 取消</button > </div > </div > <div class ="shadow hide" > </div > CSS写法: .shadow{ position: fixed; /* 固定定位 */ top:0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 90; /* 控制定位的元素的层级,数字越大越在上层显示 */ } .login{ position: fixed; top:50%; left: 50%; background-color: white; width: 300px; height: 360px; z-index: 100; margin-left: -150px; margin-top: -180px; } .hide{ display: none; } js代码: $('#btn').click(function () { $('.shadow').removeClass('hide'); $('.login').removeClass('hide'); }); $('#login-cancel').click(function () { $('.shadow').addClass('hide'); $('.login').addClass('hide'); });
模态对话框就是当点击网页中某个标签之后,会让背景颜色变暗不可选,只有当用户填写表格或点击关闭,才会退出。
创建标签 1 2 3 4 5 6 7 8 9 10 11 12 13 添加标签: $('.c1' ).html('<a href="http://www.baidu.com">百度</a>' ); 但是这个属于替换内容,将标签内原来的内容全部替换掉. js var a = document .createElement('a' ); jquery: $('<a>' ,{ text :'这还是个链接' , href :'http://www.baidu.com' , class :'link' , id :'baidu' , name :'baidu' })
文档操作 标签内部的后面插入内容(append) 1 2 3 4 5 6 7 8 9 10 11 html代码: <div class ="c1" > <h1 > xx</h1 > </div > 方式1 : 1. var a = document .createElement('a' ); 创建标签 2. a.href = 'http://www.jd.com' ; 添加属性 3. a.innerText = '京东' ; 添加文本 $('.c1' ).append(a); 方式2 : 常用 $('.c1' ).append('<a href="http://www.baidu.com">百度</a>' );
标签内部的上面插入内容(prepend) 1 2 $('.c1' ).prepend('<a href="http://www.baidu.com">百度</a>' ); $('.c1' ).prepend('<h1>亚洲</h1>' );
标签外部的下面插入内容(after) 1 $('.c1' ).after('<h1>兄弟</h1>' );
标签外部的上面插入内容(before) 1 $('.c1' ).before('<h1>兄弟</h1>' );
简单示例:
1 2 var s = $('<div>' ,{'class' :'c2' ,'text' :'彭于晏' });$('.c1' ).after(s);
empty 清空标签 1 2 方式1 :$('.c1' ).empty(); 方式2 :$('.c1' ).html('' ); .text('' )
remove 删除标签
字符串格式化 ${变量名} 1 var tr_str = `<tr><td><input type="checkbox"></td><td>${inp_name} </td><td>${inp_hobby} </td><td><button class="delete">删除</button></td></tr>` ;
增加和删除示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 HTML代码: <div > <button id ="btn" > 新增</button > </div > <table border ="1" > <thead > <tr > <th > #</th > <th > 姓名</th > <th > 爱好</th > <th > 操作</th > </tr > </thead > <tbody > <tr > <td > <input type ="checkbox" > </td > <td > 潘景祥</td > <td > 日京,日韩</td > <td > <button class ="delete" > 删除</button > </td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 薛晓博</td > <td > 日景祥,开车</td > <td > <button class ="delete" > 删除</button > </td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 王赛</td > <td > 日景祥</td > <td > <button class ="delete" > 删除</button > </td > </tr > </tbody > </table > <div class ="login hide" > <div > 姓名:<input type ="text" id ="name" > </div > <div > 毕生追求:<input type ="text" id ="want" > </div > <div > <button id ="login-btn" > 保存</button > <button id ="login-cancel" > 取消</button > </div > </div > <div class ="shadow hide" > </div > CSS写法: .shadow{ position: fixed; /* 固定定位 */ top:0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 90; /* 控制定位的元素的层级,数字越大越在上层显示 */ } .login{ position: fixed; top:50%; left: 50%; background-color: white; width: 300px; height: 360px; z-index: 100; margin-left: -150px; margin-top: -180px; } .hide{ display: none; } JS代码: //一 新增 绑定用户的点击操作,弹出模态对话框 $('#btn').click(function () { $('.shadow').removeClass('hide'); $('.login').removeClass('hide'); }); //2 点击取消 关闭模态对话框 $('#login-cancel').click(function () { // 2.1 $('.shadow').addClass('hide'); $('.login').addClass('hide'); // 2.2 清空 $('#name').val(''); $('#want').val(''); }); // 3 保存 // 3.1 用户输入数据,然后点击保存时获取用户输入的数据 $('#login-btn').click(function(){ var inp_name = $('#name').val(); var inp_hobby = $('#want').val(); // 3.2 创建标签,将数据加入到标签里面 // var tr_str = '<tr > <td > <input type ="checkbox" > </td > <td > '+ inp_name +'</td > <td > '+ inp_hobby +'</td > <td > <button class ="delete" > 删除</button > </td > </tr > '; var tr_str = `<tr > <td > <input type ="checkbox" > </td > <td > ${inp_name}</td > <td > ${inp_hobby}</td > <td > <button class ="delete" > 删除</button > </td > </tr > `; // 3.3 给tbody标签添加上我们做好的tr标签 $('tbody').append(tr_str); // 3.4 关闭模态对话框,并且清空用户之前输入的数据 $('.shadow').addClass('hide'); $('.login').addClass('hide'); $('#name').val(''); $('#want').val(''); }); //二 删除 // $('.delete').click(function () { // // $(this)标签点击的那个按钮 // $(this).parent().parent().remove(); // // // }); // $('.delete').on('click',function () { // $(this).parent().parent().remove(); // }) // 事件委托 $('tbody').on('click','.delete',function () { // $(this) 还是你点击的那个按钮标签 $(this).parent().parent().remove(); // tr });
通过上面的代码,我们就可以实现表格内容的增加和删除了。
事件冒泡 点击儿子标签会触发父级标签/祖父标签,等等的所有点击事件,这叫事件冒泡
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 html代码 <div class ="c1" > <div class ="c2" > </div > </div > css代码 .c1{ border: 1px solid red; height: 100px; } .c2{ border: 1px solid green; height: 50px; width: 50px; } jquery代码 $('.c1').click(function () { alert('父级标签c1'); }); $('.c2').click(function () { alert('儿子标签c2'); return false; // 阻止后续事件发生 });
事件委托 1 2 3 4 5 6 $('tbody' ).on('click' ,'.delete' ,function ( ) { $(this ).parent().parent().remove(); });
prop属性操作 1 2 3 4 5 6 selected checked disabled enabled 设置属性 $('#d1' ).prop('checked' ,true ); 选中 $('#d1' ).prop('checked' ,false ); 取消选中 查看属性 $('#d1' ).prop('checked' ); true 表示选中了,false 表示未选中
除了这四个属性,我们也可以操作HTML标签中的其它属性
1 2 3 4 5 var a = document .createElement('a' );a.href = 'xxx' ; a.attr({'xx' :'oo' }) a.attr('xx' )
逻辑运算符
全选反选取消的代码示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Title</title > </head > <body > <button id ="all" > 全选</button > <button id ="reverse" > 反选</button > <button id ="cancel" > 取消</button > <table border ="1" > <thead > <tr > <th > #</th > <th > 姓名</th > <th > 爱好</th > </tr > </thead > <tbody > <tr > <td > <input type ="checkbox" > </td > <td > 金老板</td > <td > 开车</td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 景女神</td > <td > 茶道</td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 苑昊(苑局)</td > <td > 不洗头、不翻车、不要脸</td > </tr > </tbody > </table > <script src ="jquery.js" > </script > <script > $('#all' ).click(function ( ) { $('[type="checkbox"]' ).prop('checked' ,true ); }); $('#cancel' ).click(function ( ) { $('[type="checkbox"]' ).prop('checked' ,false ); }); $('#reverse' ).click(function ( ) { var all_inp = $('[type="checkbox"]' ); for (var i=0 ;i<all_inp.length;i++){ var status = all_inp.eq(i).prop('checked' ); all_inp.eq(i).prop('checked' ,!status); } }) </script > </body > </html >
新增和删除示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Title</title > <style > .shadow { position : fixed; top :0 ; left : 0 ; right : 0 ; bottom : 0 ; background-color : rgba (0 ,0 ,0 ,0.8 ); z-index : 90 ; } .login { position : fixed; top :50% ; left : 50% ; background-color : white; width : 300px ; height : 360px ; z-index : 100 ; margin-left : -150px ; margin-top : -180px ; } .hide { display : none; } </style > </head > <body > <div > <button id ="btn" > 新增</button > </div > <table border ="1" > <thead > <tr > <th > #</th > <th > 姓名</th > <th > 爱好</th > <th > 操作</th > </tr > </thead > <tbody > <tr > <td > <input type ="checkbox" > </td > <td > 潘景祥</td > <td > 日京,日韩</td > <td > <button class ="delete" > 删除</button > </td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 薛晓博</td > <td > 日景祥,开车</td > <td > <button class ="delete" > 删除</button > </td > </tr > <tr > <td > <input type ="checkbox" > </td > <td > 王赛</td > <td > 日景祥</td > <td > <button class ="delete" > 删除</button > </td > </tr > </tbody > </table > <div class ="login hide" > <div > 姓名:<input type ="text" id ="name" > </div > <div > 毕生追求:<input type ="text" id ="want" > </div > <div > <button id ="login-btn" > 保存</button > <button id ="login-cancel" > 取消</button > </div > </div > <div class ="shadow hide" > </div > </body > <script src ="jquery.js" > </script > <script > $('#btn' ).click(function ( ) { $('.shadow' ).removeClass('hide' ); $('.login' ).removeClass('hide' ); }); $('#login-cancel' ).click(function ( ) { $('.shadow' ).addClass('hide' ); $('.login' ).addClass('hide' ); $('#name' ).val('' ); $('#want' ).val('' ); }); $('#login-btn' ).click(function ( ) { var inp_name = $('#name' ).val(); var inp_hobby = $('#want' ).val(); var tr_str = `<tr><td><input type="checkbox"></td><td>${inp_name} </td><td>${inp_hobby} </td><td><button class="delete">删除</button></td></tr>` ; $('tbody' ).append(tr_str); $('.shadow' ).addClass('hide' ); $('.login' ).addClass('hide' ); $('#name' ).val('' ); $('#want' ).val('' ); }); $('tbody' ).on('click' ,'.delete' ,function ( ) { $(this ).parent().parent().remove(); }); </script > </html >
常用事件 点击事件 click 1 2 3 4 5 $('.c1' ).click(function ( ) { $(this ).css('background-color' ,'green' ); })
focus和blur 输入框获取或失去光标时触发的事件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 html代码: <input type ="text" id ="username" > <div class ="c1" > </div > css代码: .c1{ background-color: red; height: 200px; width: 200px; } .c2{ background-color: green; } jQuery代码: // focus获取光标时触发的事件 $('#username').focus(function () { $(this).css({'background-color':'yellow'}); $('.c1').addClass('c2'); }); // blur失去光标时触发的事件 $('#username').blur(function () { $(this).css({'background-color':'white'}); $('.c1').removeClass('c2'); });
change 域内容发生变化时触发的事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('select' ).change(function ( ) { var option_text = this .options[this .selectedIndex].innerText; console .log(option_text); });
hover 鼠标悬浮事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 示例 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Title</title > <style > .c1 { background-color : red; height : 200px ; width : 200px ; } </style > </head > <body > <div class ="c1" > </div > </body > <script src ="jquery.js" > </script > <script > $('.c1' ).hover( function ( ) { $('.c1' ).css({'background-color' :'yellow' }); }, function ( ) { $('.c1' ).css({'background-color' :'blue' }); } ) </script > </html >
根据用户输入的内容,实时触发的事件。
input 事件只能 使用 on
绑定。
1 2 3 4 $('#username' ).on('input' ,function ( ) { });
绑定事件的两个方式 1 2 3 4 5 $('.c1' ).click(function ( ) {}) $('.c1' ).on('click' ,function ( ) {}) $('.c1' ).on('click' ,'子辈的标签选择器' ,function ( ) {})
页面载入 1 2 3 4 5 6 7 8 9 window .onload =function ( ) {} jquery写法 $(function ( ) { $('.c1' ).click(function ( ) { $(this ).toggleClass('c2' ); }) }); 等待所有标签加载完成之后触发的事件,不存在覆盖现象
关于window window是整个heml文档,指代的是全局
1 2 var a = 10 ; location.href;