标签：查询 else 优秀 抽屉 nts a标签 地址 2.4 pad
jQuery有1.x、2.x、3.x三个大的版本，推荐使用1.x的最新版本（兼容性更换），本次使用的版本为jquery-1.12.4.js
引用：
<script src="jquery-1.12.4.js"></script>
下载地址-》》jquery-1.12.4.js、jquery-1.12.4.min.js
Dom和jQuery对象相互转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">James</div> <script src="jquery-1.12.4.js"></script> </body> </html>
jQuery转换为Dom:
> $(‘#i1‘) < [<div id=?"i1">?James?</div>?] > document.getElementById(‘i1‘) < <div id=?"i1">?James?</div>? >$(‘#i1‘)[0] < <div id=?"i1">?James?</div>?
Dom转换为jQuery:
> $(‘#i1‘) < [<div id=?"i1">?James?</div>?] > d1 = document.getElementById(‘i1‘) < <div id=?"i1">?James?</div>? > $(d1) < [<div id=?"i1">?James?</div>?]
一、基本选择器
① id选择器
<div id="id">James</div> $(‘#id‘)
② clss选择器
<div class="c1">James</div> $(‘.c1‘)
③ 标签选择器
查找所有的a标签：
<div id="id">James</div>
<div class="c1">
<a>f</a>
</div>
<div class="c1">
<a>f</a>
<a>f</a>
</div>
$(‘a‘)
④ *表示所有
$(‘*‘)
⑤ 多查询（selector1,selector2,selectorN）
<div id="id">James</div>
<div class="c1">
<a>f</a>
</div>
<div class="c1">
<a>f</a>
<a>f</a>
</div>
$(‘#id,.c1,a‘)
二、层级选择器
① ancestor descendant(查找包含的所有-子子孙孙)
<div id="i1" class="c1"> <div> <a>a</a> </div> <a>b</a> <a>c</a> </div> > $(‘#i1 a‘) < [<a>?a?</a>?, <a>?b?</a>?, <a>?c?</a>?]
② parent > child(只查找下一级所有-儿子)
<div id="i1" class="c1"> <div> <a>a</a> </div> <a>b</a> <a>c</a> </div> > $(‘#i1 > a‘) < [<a>?b?</a>?, <a>?c?</a>?]
③ prev + next(查找同级相邻的一个)
<div id="i1" class="c1"> <div> <input name="name"/> <a>a</a> </div> <a>b</a> <input name="name"/> <a>c</a> <a>d</a> </div> > $(‘input + a‘) < [<a>?a?</a>?, <a>?c?</a>?]
④ prev ~ siblings(查找同级下面所有)
<div id="i1" class="c1"> <div> <input name="name"/> <a>a</a> </div> <a>b</a> <input name="name"/> <a>c</a> <a>d</a> </div> > $(‘input ~ a‘) < [<a>?a?</a>?, <a>?c?</a>?, <a>?d?</a>?]
三、基本筛选器
操作html文件：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
① :first（获取匹配的第一个元素）
> $(‘ul li:first‘) < [<li>?list item 1?</li>?]
② :last（获取匹配的最后一个元素）
> $(‘ul li:last‘) < [<li>?list item 5?</li>?]
③ :eq（匹配一个给定索引值的元素）
> $(‘ul li:eq(1)‘) < [<li>?list item 2?</li>?]
④ :gt（匹配所有大于给定索引值的元素）
> $(‘ul li:gt(2)‘) < [<li>?list item 4?</li>?, <li>?list item 5?</li>?]
⑤ :lt （匹配所有小于给定索引值的元素）
> $(‘ul li:lt(2)‘) < [<li>?list item 1?</li>?, <li>?list item 2?</li>?]
⑥ 其他
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:lang(language) 选择指定语言的所有元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus 匹配当前获取焦点的元素
:root 选择该文档的根元素
:targe 选择由文档URI的格式化识别码表示的目标元素
四、属性选择器
① [ ]（匹配包含给定属性的元素）
<div class="c1"> <div James="123">123</div> <div James="456">456</div> </div> > $(‘div[James]‘) < [<div james=?"123">?123?</div>?, <div james=?"456">?456?</div>?]
② [a="b"]（匹配给定的属性是某个特定值的元素）
<div class="c1"> <div James="123">123</div> <div James="456">456</div> </div> > $(‘div[James="456"]‘) < [<div james=?"456">?456?</div>?]
③ 其他
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用
五、表单选择器
操作html文件：
<form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form>
① :input（匹配所有 input, textarea, select 和 button 元素）
> $(‘:input‘) < [<input type=?"text">?, <input type=?"checkbox">?, <input type=?"radio">?, <input type=?"image">?, <input type=?"file">?, <input type=? "submit">?, <input type=?"reset">?, <input type=?"password">?, <input type=?"button">?, <select>?…?</select>?, <textarea>?</textarea>?, <button>?</button>?]
② :text（匹配所有的单行文本框）
> $(‘:text‘) < [<input type=?"text">?]
③ :password（匹配所有密码框）
> $(‘:password‘) < [<input type=?"password">?]
④ :radio（匹配所有单选按钮）
> $(‘:radio‘) < [<input type=?"radio">?]
⑤ :checkbox（匹配所有复选框）
> $(‘:checkbox‘) < [<input type=?"checkbox">?]
⑥ :submit（匹配所有提交按钮）
> (‘:submit‘) < [<input type=?"submit">?, <button>?</button>?]
⑦ :image（匹配所有图像域）
> $(‘:image‘) < [<input type=?"image">?]
⑧ :reset（匹配所有重置按钮）
> $(‘:reset‘) < [<input type=?"reset">?]
⑨ :button（匹配所有按钮）
(‘:button‘) [<input type=?"button">?, <button>?</button>?]
⑩ :file（匹配所有文件域）
> $(‘:file‘) < [<input type=?"file">?]
六、表单对象属性
① :enabled（匹配所有可编辑元素）
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> > $("input:enabled") < [<input name="id" />]
② :disabled（匹配所有不可编辑元素）
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> > $("input:disabled") < [<input name="email" disabled="disabled" />]
③ :checked（匹配所有选中的被选中元素）
<form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> > $("input:checked") < [<input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />]
④ :selected（匹配所有选中的option元素）
<select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </select> > $("select option:selected") < [<option value="2" selected="selected">Gardens</option>]
一、查找
① next（紧邻的同级下一个元素）
<p>Hello</p> <span>Hello Again</span> <div> <span>And Again</span> </div> > $("p").next() < [<span>?Hello Again?</span>?]
② prev（紧邻的同级上一个元素）
<p>Hello</p> <span>Hello Again</span> <div> <span>And Again</span> </div> > $("div").prev() < [<span>?Hello Again?</span>?]
③ parent（匹配元素的唯一父元素）
<div> <p>Hello</p> <p>Hello</p> </div> > $("p").parent() < [<div>?<p>?Hello?</p>?<p>?Hello?</p>?</div>?]
④ children（匹配元素所有子元素的元素集合）
<div> <p>Hello</p> <span> <p>Hello</p> </span> </div> > $("div").children() < [<p>?Hello?</p>?, <span>?<p>?Hello?</p>?</span>?]
⑤ siblings（匹配元素所有同级元素的元素集合）
<div> <p>Hello</p> <span>Hello Again</span> <p>Hello</p> </div> > $("span").siblings() < [<p>?Hello?</p>?, <p>?Hello?</p>?]
⑥ find（搜索所有与指定表达式匹配的元素）
<div> <p>Hello</p> <span>Hello Again</span> <p>Hello</p> </div> > ("div").find(‘span‘) < [<span>?Hello Again?</span>?]
⑦ 其他
closest 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
nextAll 查找当前元素之后所有的同辈元素
nextUntil 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent 返回第一个匹配元素用于定位的父节点
parents 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
parentsUntil 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
prevAll 查找当前元素之前所有的同辈元素
prevUntil 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选
二、过滤
① hasClass（检查当前的元素是否含有某个特定的类，如果有，则返回true）
# 给包含有某个类的元素进行一个动画 <div class="protected"></div><div></div> $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); })
② 其他
eq 获取当前链式操作中第N个jQuery对象，返回jQuery对象
first 获取第一个元素
last 获取最后个元素
filter 筛选出与指定表达式匹配的元素集合
is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
map 将一组元素转换成其他数组（不论是否是元素数组）
has 保留包含特定后代的元素，去掉那些不含有指定后代的元素
not 从匹配元素的集合中删除与指定表达式匹配的元素
slice 选取一个匹配的子集
一、HTML代码/文本/值
① html（获取和设置匹配元素的内容）
<div> <p>Hello</p> <span>Hello Again</span> <p>Hello</p> </div> # 获取数据 > $(‘span‘).html() < "Hello Again" # 更改数据 > $(‘span‘).html(‘<p>James</p>‘) < [<span>?<p>?James?</p>?</span>?]
② text（获取和设置匹配元素的内容）
<div> <p>Hello</p> <span>Hello Again</span> <p>Hello</p> </div> # 获取数据 > $(‘span‘).text() < "Hello Again" # 更改数据 > $(‘span‘).text(‘<p>James</p>‘) < [<span>?<p>James</p>?</span>?] > $(‘span‘).text() < "<p>James</p>" #此时的p是个字符而不是标签
③ val（获取和设置input框中的内容）
<input name="James" type="text" value="默认值"/> # 获取input框中的内容 > $(‘input‘).val() < "默认值" # 重设input框中的内容 > $(‘input‘).val(‘新输入的值‘) < [<input name=?"James" type=?"text" value=?"默认值">?] > $(‘input‘).val() < "新输入的值"
二、CSS
① addClass（为每个匹配的元素添加指定的类名）
<div> <span>And Again</span> </div> > $(‘span‘).addClass(‘James‘) < [<span class=?"James">?And Again?</span>?]
② removeClass（从所有匹配的元素中删除全部或者指定的类）
<div> <span class="James">And Again</span> </div> > $(‘span‘).removeClass(‘James‘) < [<span class>?And Again?</span>?]
③ toggleClass（如果存在就删除、不存在就添加）
<div> <span class="James">And Again</span> </div> > (‘span‘).toggleClass(‘James‘) < [<span class>?And Again?</span>?] > $(‘span‘).toggleClass(‘James‘) > [<span class=?"James">?And Again?</span>?]
三、属性
① attr（设置或返回自定义属性值）
<input id="i1" type="button" value="开关" /> # 获取值 > $(‘#i1‘).attr(‘type‘) < "button" > $(‘#i1‘).attr(‘value‘) < "开关" > $(‘#i1‘).attr(‘id‘) < "i1" # 设置值 > $(‘#i1‘).attr(‘name‘,‘James‘) < [<input id=?"i1" type=?"button" value=?"开关" name=?"James">?]
② removeAttr（删除自定义属性）
<input id="i1" type="button" value="开关" name=“James”/> > $(‘#i1‘) < [<input id=?"i1" type=?"button" value=?"开关" name=?"James">?] > $(‘#i1‘).removeAttr(‘name‘) < [<input id=?"i1" type=?"button" value=?"开关">?]
③ prop（专门用于checkbox，radio）
<input id="i1" type="checkbox" checked="checked" /> # 判断 > (‘input:checkbox‘).prop(‘checked‘) < true # 设置 > $(‘input:checkbox‘).prop(‘checked‘,false) < [<input id=?"i1" type=?"checkbox" checked=?"checked">?] > $(‘input:checkbox‘).prop(‘checked‘) < false # 禁用 > $(‘input:checkbox‘).prop(‘disabled‘) < false > $(‘input:checkbox‘).prop(‘disabled‘,true) < [<input id=?"i1" type=?"checkbox" checked=?"checked" disabled>?]
④ removeProp（用来删除由.prop()方法设置的属性集）
<input id="i1" type="checkbox" checked="checked" /> > $(‘input:checkbox‘).prop(‘disabled‘,true) < [<input id=?"i1" type=?"checkbox" checked=?"checked" disabled>?] > $(‘input:checkbox‘).removeProp(‘disabled‘) < [<input id=?"i1" type=?"checkbox" checked=?"checked">?]
一、内部添加
① append（向每个匹配的元素内部追加内容）
内部最后追加② prepend（向每个匹配的元素内部前置内容）
<div class="d1"> <p>第一行</p> </div> > $("div").prepend("<p>第零行</p>"); < [<div class=?"d1">?<p>?第零行?</p>?<p>?第一行?</p>?</div>?]
二、外部添加
① after（在每个匹配的元素之后插入内容）
<div class="d1"> <p>第一行</p> </div> > $("div").after("<div>下面另起一行</div>"); < [<div class=?"d1">?<p>?第一行?</p>?</div>?] > $("div") < [<div class=?"d1">?<p>?第一行?</p>?</div>?, <div>?下面另起一行?</div>?]
② before（在每个匹配的元素之前插入内容）
<div class="d1"> <p>第一行</p> </div> > $("div").before("<div>上面另起一行</div>"); < [<div class=?"d1">?<p>?第一行?</p>?</div>?] > $("div") < [<div>?上面另起一行?</div>?, <div class=?"d1">?<p>?第一行?</p>?</div>?]
三、删除
① empty（删除匹配的元素集合中内容不删除标签）
<div class="d1"> <p>第一行</p> </div> > $("p").empty(); < [<p>?</p>?] > $("div") < [<div class=?"d1">?<p>?</p>?</div>?]
② remove（删除匹配的元素集合包括标签）
<div class="d1"> <p>第一行</p> </div> > $("p").remove(); < [<p>?第一行?</p>?] > $("div") < [<div class=?"d1">?</div>?]
四、复制
① clone（克隆匹配的DOM元素并且选中这些克隆的副本）
<div class="d1"> <b>第零行</b> <p>第一行</p> </div> > $("b").clone().insertBefore("p"); < [<b>?第零行?</b>?] > $("div") < [<div class=?"d1">?<b>?第零行?</b>?<b>?第零行?</b>?<p>?第一行?</p>?</div>?]
一、css
① css（获取和设置匹配元素的样式属性）
<div> <span>And Again</span> </div> # 获取样式值 > $(‘span‘).css(‘color‘) < "rgb(0, 0, 0)" # 设置样式值 > $(‘span‘).css(‘color‘,‘red‘) < [<span style=?"color:? red;?">?And Again?</span>?] > $(‘span‘).css({‘color‘:‘#dddddd‘,‘background‘:‘blue‘}) < [<span style=?"color:? red;?">?And Again?</span>?] > $(‘span‘) < [<span style=?"color:? rgb(221, 221, 221)?;? background:? blue;?">?And Again?</span>?]
二、 位置
① offset（获取和设置匹配元素在整个html的相对坐标）
<div id="i1"></div> <div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div id="i2"></div> <div style="height: 1000px;"></div> # 获取偏移量 > $(‘#i2‘).offset() < Object {top: 108, left: 8} > $(‘#i2‘).offset().top < 108 > $(‘#i2‘).offset().left < 8 > $(‘#i2‘).offset({top:100,left:300}) < [<div id=?"i2" style=?"position:? relative;? top:? -8px;? left:? 292px;?> ">?</div>?] < $(‘#i2‘).offset() > Object {top: 100, left: 300}
② position（获取匹配元素相对父元素的坐标）
<div style="height: 200px">000</div> <div style="position: relative"> <div style="height: 100px">123</div> <div id="i1" style="position: absolute">456</div> </div> > $(‘#i1‘).position() < Object {top: 100, left: 0} > $(‘#i1‘).position().top < 100
③ scrollTop（获取和设置滚动条到顶部的坐标）
<div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div style="height: 1000px;"></div> # 获取滚动条坐标 > $(window).scrollTop() < 0 > $(‘div‘).scrollTop() < 424 # 设置滚动条坐标 > $(window).scrollTop(200) < [Window] > $(window).scrollTop() < 200
④ scrollLeft（获取和设置滚动条到左侧的坐标）
<div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div style="height: 1000px;width: 2000px"></div> # 获取 > $(window).scrollLeft() < 0 # 设置 > $(window).scrollLeft(300) < [Window] > $(window).scrollLeft() < 300
三、尺寸
一、事件处理
① on（在选择元素上绑定一个或多个事件的事件处理函数）
# 点击p标签打印标签内容
$("p").on("click", function(){
alert( $(this).text() );
});
② off（off方法移除用on绑定的事件处理程序）
# 移出on绑定的事件
$("p").off()
③ bind（为每个匹配元素的特定事件绑定事件处理函数）
# 点击p标签打印标签内容
$("p").bind("click", function(){
alert( $(this).text() );
});
二、事件委派
① delegate（指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数）
#使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）--关键
# 当点击div的button标签时，隐藏或显示 p 元素
div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
② undelegat（删除由 delegate() 方法添加的一个或多个事件处理程序）
# 从p元素删除由 delegate() 方法添加的所有事件处理器
$("p").undelegate();
三、事件
① click（给元素绑定事件，点击触发函数调用执行）
# 所有的p标签点击后隐藏
$("p").click( function () { $(this).hide(); });
1、选择框 全选、取消以及反选（反选用到了三种方法）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <input type="button" value="全选" onclick="checkAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <input type="button" value="反选" onclick="reversAll();"/> <thead> <tr> <td>选项</td> <td>IP</td> <td>端口</td> </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>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> /*全选 把选择框设置成true*/ function checkAll() { $(‘#tb :checkbox‘).prop(‘checked‘,true); } /*取消 把选择框设置成false*/ function cancleAll() { $(‘#tb :checkbox‘).prop(‘checked‘,false); } /*反选 利用DOM的this.checked进行判断和赋值*/ function reversAll() { $(‘#tb :checkbox‘).each(function (k) { //k当索引 if(this.checked){ this.checked=false; }else { this.checked=true; } }) } /*反选 利用jQuery当$(this).prop(‘checked‘)时表示判断，括号里添加false和true时表示设置*/ function reversAll() { $(‘#tb :checkbox‘).each(function (k) { //k当索引 if($(this).prop(‘checked‘)){ $(this).prop(‘checked‘,false) }else { $(this).prop(‘checked‘,true) } }) } /*反选 三元运算 var v=条件？真值：假值*/ function reversAll() { $(‘#tb :checkbox‘).each(function (k) { //k当索引 var v = $(this).prop(‘checked‘) ? false : true; $(this).prop(‘checked‘,v) }) } </script> </body> </html>
2、两行代码搞定菜单栏（点击展开、其他关闭）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">标题一</div> <div id="i1" class="content hide">内容</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘.item .header‘).click(function () { $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘) }) </script> </body> </html>
3、模态对话框以及资产管理页面雏形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <input type="button" value="添加" onclick="addElement();"/> <table border="1"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> function addElement() { $(‘.modal,.shadow‘).removeClass(‘hide‘); } function cancelModal() { $(‘.modal,.shadow‘).addClass(‘hide‘); $(‘.modal input[type="text"]‘).val("") } $(‘.edit‘).click(function () { $(‘.modal,.shadow‘).removeClass(‘hide‘); var tds = $(this).parent().prevAll(); tds.each(function () { var n = $(this).attr("target"); var text = $(this).text(); $(‘.modal input[name="‘+n+‘"]‘).val(text) }) }) </script> </body> </html>
4、点击开灯关灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c1 hide">假装现在有效果了</div> <script src="jquery-1.12.4.js"></script> <script> $(‘#i1‘).click(function () { /* 第一种方法 if($(‘.c1‘).hasClass(‘hide‘)){ $(‘.c1‘).removeClass(‘hide‘) }else { $(‘.c1‘).addClass(‘hide‘) } */ $(‘.c1‘).toggleClass(‘hide‘) }) </script> </body> </html>
备注：利用toggleClass()
5、升级版菜单栏-购物商场点击不同的菜单显示不同的内容
① 菜单和内容设置对应的自定义属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘.menu-item‘).click(function () { $(this).addClass(‘active‘).siblings().removeClass(‘active‘); var target = $(this).attr(‘a‘); $(‘.content‘).children(‘[b="‘+target+‘"]‘).removeClass(‘hide‘).siblings().addClass(‘hide‘); }) </script> </body> </html>
② 不设置对应的属性，直接用索引
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘.menu-item‘).click(function () { $(this).addClass(‘active‘).siblings().removeClass(‘active‘); $(‘.content‘).children().eq($(this).index()).removeClass(‘hide‘).siblings().addClass(‘hide‘); }) </script> </body> </html>
6、添加、删除、复制列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="删除" /> <input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(‘#a1‘).click(function () { var v = $(‘#t1‘).val(); var temp = "<li>" + v + "</li>"; $(‘#u1‘).append(temp); }) $(‘#a2‘).click(function () { var index = $(‘#t1‘).val(); $(‘#u1 li‘).eq(index).remove(); }) $(‘#a3‘).click(function () { var index = $(‘#t1‘).val(); var v = $(‘#u1 li‘).eq(index).clone(); console.log(v[0]); $(‘#u1‘).append(v); }) </script> </body> </html>
7、模态对话框完善删除和添加功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="确定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $(‘.del‘).click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var tr = document.createElement(‘tr‘); var td1 = document.createElement(‘td‘); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement(‘td‘); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $(‘#tb‘).append(tr); $(".modal,.shadow").addClass(‘hide‘); // $(‘.modal input[type="text"]‘).each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass(‘hide‘); } function cancelModal() { $(".modal,.shadow").addClass(‘hide‘); $(‘.modal input[type="text"]‘).val(""); } $(‘.edit‘).click(function(){ $(".modal,.shadow").removeClass(‘hide‘); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr(‘target‘); // 获取td中的内容 var text = $(this).text(); var a1 = ‘.modal input[name="‘; var a2 = ‘"]‘; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // // $(‘.modal input[name="hostname"]‘).val(host); // $(‘.modal input[name="port"]‘).val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body> </html>
8、抽屉网点赞动态效果
<!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 () { addFavor(this); }) function addFavor(self) { var fontSize = 15; var top = 0; var right= 0; var opacity = 1; var tag = document.createElement(‘span‘); $(tag).text(‘+1‘); $(tag).css(‘color‘,‘green‘); $(tag).css(‘position‘,‘absolute‘); $(tag).css(‘fontSize‘,fontSize + ‘px‘); $(tag).css(‘right‘,right + ‘px‘); $(tag).css(‘top‘,top + ‘px‘); $(tag).css(‘opacity‘,opacity + ‘px‘); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css(‘fontSize‘,fontSize + ‘px‘); $(tag).css(‘right‘,right + ‘px‘); $(tag).css(‘top‘,top + ‘px‘); $(tag).css(‘opacity‘,opacity); if(opacity < 0 ){ clearInterval(obj); $(tag).remove(); } },40); } </script> </body> </html>
备注：利用CSS和定时器
9、做个可以随鼠标移动的条框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $(‘#title‘).mouseover(function(){ $(this).css(‘cursor‘,‘move‘); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(‘#title‘).on(‘mousemove‘, function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css(‘left‘,x+‘px‘); $(this).parent().css(‘top‘,y+‘px‘); }) }); $("#title").mouseup(function(){ $("#title").off(‘mousemove‘); }); }) </script> </body> </html>
10、事件委派delegate练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(‘#a1‘).click(function () { var v = $(‘#t1‘).val(); var temp = "<li>" + v + "</li>"; $(‘#u1‘).append(temp); }); // 新添加的li不能执行 // $(‘ul li‘).click(function () { // var v = $(this).text(); // alert(v); // }) // 新添加的li不能执行 // $(‘ul li‘).bind(‘click‘,function () { // var v = $(this).text(); // alert(v); // }) // 新添加的li不能执行 // $(‘ul li‘).on(‘click‘, function () { // var v = $(this).text(); // alert(v); // }) // 新添加的li能执行 $(‘ul‘).delegate(‘li‘,‘click‘,function () { var v = $(this).text(); alert(v); }) </script> </body> </html>
11、多事件绑定执行顺序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="https://home.cnblogs.com/u/lianzhilei/">走你1</a> <a id="i1" href="http://https://home.cnblogs.com/u/lianzhilei/">走你2</a> <script src="jquery-1.12.4.js"></script> <script> function ClickOn() { alert(123); return true; } $(‘#i1‘).click(function () { alert(456); return false; }) </script> </body> </html>
12、登录表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form id="f1" action="s5.html" method="POST"> <div><input name="n1" tex = "用户名" type="text" /></div> <div><input name="n2" tex = "密码" type="password" /></div> <div><input name="n3" tex = "邮箱" type="text" /></div> <div><input name="n4" tex = "端口" type="text" /></div> <div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" /> </form> <script src="jquery-1.12.4.js"></script> <script> // 当页面框架加载完毕后，自动执行 // $(function(){ // $.Login(‘#f1‘) // }); // $(function(){ // 当页面所有元素完全加载完毕后，执行 $(‘:submit‘).click(function () { $(‘.error‘).remove(); var flag = true; $(‘#f1‘).find(‘input[type="text"],input[type="password"]‘).each(function () { var v = $(this).val(); var n = $(this).attr(‘tex‘); if(v.length <= 0){ flag = false; var tag = document.createElement(‘span‘); tag.className = "error"; tag.innerHTML = n + "必填"; $(this).after(tag); // return false; } }); return flag; }); }); </script> </body> </html>
Python开发【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html
Python开发【前端】：DOM--》》http://www.cnblogs.com/lianzhilei/p/6072367.html
参考文档-》》jQuery API 中文在线手册
标签：查询 else 优秀 抽屉 nts a标签 地址 2.4 pad
原文地址：http://www.cnblogs.com/lianzhilei/p/6110866.html
