jQuery
jQuery
一：简介
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
学习网址参考网址：http://jquery.cuishifeng.cn/
下载 jQuery
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
二、查找元素
1、id
写法 $('#id')
2、class
写法 $('.c1')
3、标签
写法 $('a') $('div')
4、组合
写法 $('a,div,.c1') 同时查找，检索这三个标签的任意一个满足即可，获取
5、层级
写法 $('a div .c1') 空格分开，表示这几个标签下必须同时满足，才获取，并且是下面的子子孙孙
另一种写法 $('a>dev') 表示只找a标签下的div
6、基本筛选器
：first ：last ：eq(index索引值从0开始)
7、属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
8、实例：多选，反选，全选
知识点：(1) $('#tb :checkbox').prop('checked'); 获取值
$('#tb :checkbox').prop('checked', true); 设置值
(2) jQuery方法内置循环： $('#tb :checkbox').xxxx
(3) $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
(4) var v = 条件？条件为真赋予v的值：条件为假赋予v的值
<!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="cancleAll();"/> <input type="button" value="进入编辑模式" onclick="editAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> <th>状态</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>81</td> <td>在线</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.2</td> <td>82</td> <td>在线</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>83</td> <td>在线</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } function cancleAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
9、筛选
$('#i1').next() #标签id为#i1的下一个标签
$('#i1').nextAll() #标签id为#i1下的所有标签
$('#i1').nextUntil('#ii1') #标签id为#i1和标签id=#ii1之间的所有标签，不包括i1和ii1
$('#i1').prev() #标签id为#i1的上一个标签
$('#i1').prevAll() 与next类似
$('#i1').prevUntil('#ii1')
$('#i1').parent() #标签id为#i1的父标签
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children() #标签id为#i1的子孙标签
$('#i1').siblings() #标签id为#i1的兄弟标签
$('p').find(‘span’) #标签p内的span标签
$('li:eq(1)') #一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
$('li').eq(1) #同上，获取匹配的第二个元素
first() #获取匹配的第一个元素
last() #获取匹配的最后个元素
hasClass(class) #检查当前的元素是否含有某个特定的类，如果有，则返回true
<!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>
更多实例
三、操作元素
1、文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html() #获取文本内容包括标签
$(..).html("<a>1</a>") #设置文本内容，解析对应的标签
$(..).val() #获取文本框中的值
$(..).val(..) #设定文本框的值
2、样式操作：
addClass 为每个匹配的元素添加指定的类名。
removeClass 从所有匹配的元素中删除全部或者指定的类
toggleClass 如果存在（不存在）就删除（添加）一个类。
3、属性操作：
# 专门用于做自定义属性
$(..).attr('n') 返回被选元素的属性值。
$(..).attr('n','v') 设置被选元素的属性值。
$(..).removeAttr('n') 删除被选元素的属性值。
# 专门用于checkbox,radio（1,2版本一定要用这个prop，用attr不行）
<input type='checkbox' id='i1' />
$(..).prop('checked') 获取在匹配的元素集中的属性值。
$(..).prop('checked', true) 设置在匹配的元素的属性值
4、文档处理：
append 在被选元素的结尾插入内容
prepend 在被选元素的开头插入内容
after 在每个匹配的元素之后插入内容
before 在每个匹配的元素之前插入内容
remove 从DOM中删除所有匹配的元素
empty 删除匹配的元素集合中所有的子节点
clone 克隆匹配的DOM元素并且选中这些克隆的副本
5、css处理：
$('t1').css('样式名称', '样式值')
点赞实例应用：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 > 0
- position
- 字体大小，位置
<!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) { // DOM对象 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); $(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>
6、位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
查看代码
<!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>
7、事件
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你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>
