http://jquery.cuishifeng.cn/
(一)查找元素
DOM: 10个左右
jQuery:
选择器,直接找到某个或者某类标签
1.id
$('#id')
2.class
<div class='c1'></div>
$(".c1")
3.标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> abc </div>
</div>
$('a') //找出所有a标签
4.组合获取
$('a,.c2',#i1) //同时获取a标签和c2类和i1标签,多个用逗号隔开
5.层级找
$('#i10 a') 找i10下面的子子孙孙a
$('#i10>a') 找i10下面的儿子
6.基本筛选器:
<div id='i10' class='c1'>
<a>f1</a>
<a>f2</a>
</div>
$('#i10>a:first') //找到i10下面第一个a标签,有:first就有:last
$('#i10>a:eq(index)') //根据索引找,index=0开始,代表第一个索引位置
7.属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id='i10' class='c1'> <div> <a>asdfddd</a> </div> <a liyang='123'>123</a> <a liyang='456'>456</a> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> abc</div> </div> </body> </html>
找出具有liyang属性的标签
$('[liyang]') 这个说是可以把<a liyang='123'>123</a>和<a liyang='456'>456</a>都找出来,但是我测试只会默认匹配出第一个
$('[liyang="123"]') 这个倒是可以精确查找
$("input[type='text']") 也可以这么组合使用,找input标签下面的text属性
$("input[type='text']") 等同于 $(':text')
8.表单对象
<input type="text" disabled /> //加上disabled表示框框不可编辑
<input type="text" /> //默认可编辑
$(':disabled') //找到所有不可编辑的标签
实例:
多选,反选,全选
$("#rpt :checkbox").prop('checked'); 获取值
$("#rpt :checkbox").prop('checked',true); 设置值
id值后面有空格,然后再冒号,不然识别不了
$("#rpt :checkbox").each(function(k){
//k当前索引位置
//this,DOM,当前循环元素
//$(this),jQuery
}
var v = 条件?真值:假值
筛选器
$(this).next() 获取下一个标签
$(this).nextAll() 获取下面所有标签
$(this).nextUntil('#i1') 直到找到某个id,class也适用
$(this).prev() 获取上一个标签
$(this).prevAll() 获取上面所有标签
$(this).parent() 获取父标签
$(this).parents() 获取所有父标签,以列表形式展现直到找到祖宗
$(this).children() 获取所有子标签
$(this).siblings() 获取兄弟标签
文本操作:
$(..).text() ##获取文本内容
$(..).text("<a>1a</a>") ##设置文本内容
$(..).html() ##获取文本内容,解析标签
$(..).html("<a>1a</a>") ##设置文本内容,解析标签
$(..).val() ##获取value的值
$(..).val(..) ##设置value的值
样式操作:
addClass()
removeClass()
toggleClass()
属性操作:
$(..).attr('key') / $(..).attr('key','value') #专门用于做自定义属性
$(..).removeAttr('key') #删除属性
$(..).prop('key') # 专门用于checkbox,radio ,获取值
$(..).prop('key',true) # 专门用于checkbox,radio ,设置值
ps:
index 获取索引位置
文档处理:
append
prepend
after
before
remove
empty
clone
css处理
$('t1').css('样式名称','样式值')
点赞:
$('t1').append()
$('t1').remove()
setInterval #定时器
透明度 1 》0
position
字体大小,位置
位置:
$(window).scrollTop() /$('div').scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([value])
offset 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
下面有三层div,当position('i1'),这里父标签是最外层的relative ,而不是第二层。
<div style='relative'>
<div id='i2'>
<div id='i1' style='position:absolute;'>
<div>
</div>
$('i1').height() 获取标签的高度,纯高度,80px
$('i1').innerHeight() 只获取边框+纯高度+?
$('i1').outerHeight() 只获取边框+纯高度+?
$('i1').outerHeight(true) 只获取边框+纯高度+?
<div id='i1' style='position:absolute;height:80px;border:1px;'> </div>
事件
DOM: 三种绑定方式
jQuery:
$('.c1').click(function(){})
$('.c1').bind('click',function(){})
$('.c1').unbind('click',function(){})
通过委托绑定
$('.c1').delegate('a','click',function(){}) a:标签
$('.c1').undelegate('a','click',function(){})
$('.c1').on('click',function(){})
$('.c1').off('click',function(){})
阻止事件发生
return false
#当页面框架加载完成之后,自动执行
$(function(){
$(......)
})
jQuery扩展
$.extend
$.fn.extend
(function(){
var status = 1;
//封装变量
})(jQuery)
(二)操作元素
一、jQuery选择器:
简单调用jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">123</div> <script src="jquery-1.12.4.js"></script> <script> $("#i1") </script> </body> </html>
jQuery和Dom操作比较
tab菜单示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="reverseAll()" /> <input type="button" value="取消" onclick="cancelAll()"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="rpt" > <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.2</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.4</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $("#rpt :checkbox").prop('checked',true) } function cancelAll(){ $("#rpt :checkbox").prop('checked',false) } function reverseAll(){ $("#rpt :checkbox").each(function(){ if($(this).prop('checked')){ $(this).prop('checked',false); }else{ $(this).prop('checked',true); } }) } </script> </body> </html>
当然上面那个reverseAll()函数也可以使用三元运算代替:
function reverseAll(){ $("#rpt :checkbox").each(function(){ <!--var v = 条件?真值:假值--> var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); })
筛选器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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 red;"> <div class="item"> <div class="header">标题一</div> <div class="content">内容一</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> <!--1.当前点击的标签 $(this)--> <!--2.获取某个标签的下一个标签--> <!--3.获取某个标签的父标签--> <!--4.获取所有兄弟标签(不包括自己)--> <!--5.添加样式和移除样式--> <!--$('.i1').addClass('hide')--> <!--$('.i1').removeClass('hide')--> $('.header').click(function(){ console.log(this); <!--筛选器:在选择器基础上再选择一次--> <!--获取当前标签的下一个标签--> $(this).next().removeClass('hide'); $(this).parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html>
$(this).parent().siblings().find('.content')
find可以去直接找某个标签,包括前面parent()和siblings(),里面也可以加标签参数具体找哪一个。
上面例子里面两行也可以用上面一行实现,即链式编程。
模态对话框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .modal{ position: fixed; top: 50%; left: 50%; 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: 8; } .hide{ display: none; } </style> <body> <a onclick="addElement();">添加</a> <table border="1"> <tr> <td>1.1.1.1</td> <td>80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td>1.1.1.2</td> <td>81</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td>1.1.1.3 </td> <td>82</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="cancelMode()"/> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> function addElement(){ $(".modal").removeClass('hide'); $(".shadow").removeClass('hide'); <!--以上两条也可以合在一起写:--> <!--$(".modal,.shadow").removeClass('hide');--> } function cancelMode(){ $(".modal,.shadow").addClass('hide'); <!--清理数据--> $(".modal input[type='text']").val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); var tds = $(this).parent().prevAll(); <!--循环获取tds中内容--> <!--获取<td>内容</td>获取中间的内容--> <!--赋值给input标签中的value--> var port = $(tds[0]).text(); var host = $(tds[1]).text(); $('.modal input[name="hostname"]').val(host) $('.modal input[name="port"]').val(port) }) </script> </body> </html>
也可以这样,优势在于当我新增一列数据时候不用再修改调用函数:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .modal{ position: fixed; top: 50%; left: 50%; 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: 8; } .hide{ display: none; } </style> <body> <a onclick="addElement();">添加</a> <table border="1"> <tr> <td target="hostname">1.1.1.1</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.2</td> <td target="port">81</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.3 </td> <td target="port">82</td> <td target="ip">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" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelMode()"/> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> function addElement(){ $(".modal").removeClass('hide'); $(".shadow").removeClass('hide'); } function cancelMode(){ $(".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(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n +a2; $(temp).val(text) }) }) </script> </body> </html>
开关(注释掉的方法和toggleClass方法都可以)
<!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">asdkfjadf</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>
点击目录一,出现内容一;点击目录二,出现内容二;点击目录三,出现内容三
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 48px; background-color: #eeeeee; line-height: 48px; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .active{ background-color: brown; } .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>
也可以通过索引的方式实现
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 48px; background-color: #eeeeee; line-height: 48px; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .active{ background-color: brown; } .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">菜单一</div> <div class="menu-item">菜单二</div> <div class="menu-item">菜单三</div> </div> <div class="content"> <div>内容一</div> <div class="hide">内容二</div> <div class="hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var v = $(this).index(); $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide'); }) </script> </body> </html>
实现新增,删除,复制页面条目
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="ul"> <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>"; <!--append():在末尾添加--> <!--$('#ul').append(temp);--> <!--prepend():在开头添加--> $('#ul').prepend(temp); <!--在上一层添加--> <!--$('#ul').after(temp);--> <!--$('#ul').before(temp);--> }) $('#a2').click(function(){ var index = $('#t1').val(); $('#ul li').eq(index).remove(); <!--$('#ul li').eq(index).empty();--> }) $('#a3').click(function(){ var index = $('#t1').val(); var v = $('#ul li').eq(index).clone(); $('#ul').append(v); }) </script> </body> </html>
jquery操作高度及位置操作:点赞
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> <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; <!--生成一个DOM对象,创建+1标签--> var tag = document.createElement('span'); <!--使用text方法给新建的标签赋值--> $(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); $(self).append(tag); <!--加定时器obj,每隔100ms执行一次,一直到opacity变成负数,清除定时器,删除标签--> var obj = setInterval(function(){ fontSize = fontSize + 5; top = top - 5; right = right - 5; opacity = opacity - 0.2; $(tag).css('fontSize',fontSize+'px'); $(tag).css('right',right+'px'); $(tag).css('top',top+'px'); $(tag).css('opacity',opacity); <!--这里不要用opacity=0判断,因为不一定有0值,可能直接跳到负数了--> if(opacity < 0){ clearInterval(obj); $(tag).remove(); } },100); } </script> </body> </html>
表单验证前戏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return clickOn()" href="http://www.baidu.com">点我</a> <script> function clickOn(){ alert(123); <!--return true;--> return false; } </script> </body> </html>
简单表单验证
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="test2.html" method="POST"> <input type="text" /> <input type="submit" value="提交"> </form> <script src="jquery-1.12.4.js"></script> <script> $(':submit').click(function(){ <!--判断上一个标签有没有值--> var v = $(this).prev().val(); if(v.length > 0){ return true; }else{ alert('请输入内容'); return false; } }) </script> </body> </html>
当有多个input的时候的表单验证
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form id="f1" action="test3.html" method="POST"> <div><input name="n1" type="text" /></div> <div><input name="n2" type="password" /></div> <div><input name="n3" type="text" /></div> <div><input name="n4" type="text" /></div> <div><input name="n5" type="text" /></div> <input type="submit" value="提交"> </form> <script src="jquery-1.12.4.js"></script> <script> $(':submit').click(function(){ $('.error').remove(); var flag = true; $('#f1').find('input[type="text"],input[type="password"]').each(function(){ var v = $(this).val(); if(v.length <= 0){ flag = false; var tag = document.createElement('span'); tag.className = "error"; tag.innerHTML = "必填"; $(this).after(tag); return false; } }); return flag; }) </script> </body> </html>