当前位置:首页 > 开发 > 互联网 > 正文

jq 笔记

发表于: 2015-06-24   作者:miyaye   来源:转载   浏览次数:
摘要: http://bbs.miaov.com/forum.php?mod=forumdisplay&fid=402014.10.10jquery2.0不兼容ie678,以上更适合做移动端开发,代码更少1.js对于集合document.getElementByTagName('div')[0]只有一个div的情况2.$==jQuery用jQuery是为了防止冲突起了两个这样的名字3.jq()中参数问题h

http://bbs.miaov.com/forum.php?mod=forumdisplay&fid=40

2014.10.10
jquery 2.0 不兼容ie 6 7 8,以上更适合做移动端开发,代码更少

1.js对于集合 document.getElementByTagName('div')[0] 只有一个div的情况

2.$==jQuery 用jQuery是为了防止冲突 起了两个这样的名字

3.jq () 中参数问题 html() css()等
()没有参数就是获取,有参数就是赋值,设置,参数的个数决定
常用的设置获取赋值方法有attr() val()

4.多元素进行取值只能取到第一个元素的值

5.***** 属性选择:
$('input[value=123]') 也可以写成$('input[class="123 456"]')两个的时候用""
$('input[value^=123]')起始位
$('input[value$=123]')末位
$('input[value*=123]')通配

6.链式操作基本都是设置

7.命名规范,如果是jq对象就用$开头 例如 var $oDiv=$("#div1") 原生的就直接不用$ 例如 oDiv=document.getElementById("#div1")

8.jq的容错性比较好,当元素不存在的时候 进行设置也不会报错,同时对于我们开发找出问题也很麻烦
$('#span').html() $("#span")不存在也不会报错

9.集合的长度 .size() * 相当于原生的 length *****
$("div").size() 等于$("div").length
jq的集合 即使只有一个的时候 也有length, 原生的只有一个元素的情况没有length
$("#div1").length

10.***class操作
addClass('box2 box3')
removeClass('box2 box3')
toggleClass('box2') 智能判断添加删除class

*****智能设置显示隐藏 show() hide()

var oBtn=true
$('input').click(function(){
if(oBtn){
$("div").hide()
}else{
$("div").show()
}
oBtn=!oBtn //条件走完了改变条件 实现点击显示隐藏

})

20.兄弟节点 prev() next() prevAll("筛选元素")上边所有的 nextAll("筛选元素") siblings("h2")所有的兄弟节点


------------------------------------------------------------------------------------------------
10.12

1.slice(起始位置,结束为止) 截取集合
如果只有一个 参数就是截取起始位置到最后

2.children() 子元素 ,不能获取孙子及以后的节点 | 可接受过滤筛选的参数

3.find()查找的范围更加广泛,使用更加频繁| 如果不用find() 可以直接用 $("ul p")这种方法来找子节点 | 但是推荐用find(),因为性能更高,因为css选择器的方法是从右 到左来找的

4.parent() 父节点 | parents()所有祖先节点,父节点以及以上的

5.*****closest() 找指定的最近的一个祖先元素(包括自身),必须要接收一个参数(只能选到唯一的元素),离他最近的元素的条件

6.创建元素 | js document.createElement("div") | jq $("<div>") $('<div id="div1"></div>')

7.append() 把元素添加到指定的节点里面的最后 在里边 n. A.append(B) A里面的最后是B

8.prepend() 把元素添加到指定的节点里面的最前面 在里边

9.before() 把元素添加到指定的节点的前面 在外边

10.after() 把元素添加到指定的节点的后面 在外边

11.appendTo() v. A.appendTo(B) 把A添加到B的最后
n. 和 v.的区别是对后续操作的影响不一样

12.remove() 原生js是removeChild(oDiv)

13.clone()节点的复制操作 A.clone() | 参数true 会克隆操作事件

14.index()
第一种 方法:兄弟中的排行 ,索引值
第二种方法:筛选后的排行,针对非兄弟关系的节点 $("#span1").index("span") 首先找到#span1 ,然后在所有的span中排序,也可以倒过来写 $('span').index($('#span1'))

15.each(function(i,elem){ $(elem).html(i) ; return false}) i索引值 elem 操作的元素,就是this,原生的元素|return false 跳出 相当于js的break

16.wrap()

-----------------------------------------------------------------------------------------------------------------------
10.16

1.jq获取元素的尺寸 width() height()
获取:
width() --->width
innerWidth() --->width+padding innerHeight()同理
outerWidth() --->width+padding+border outerHeight()同理
outerWidth(true) --->width+padding+border+margin

**获取和设置都是组合

设置:
width(200)
outerWidth(200,true)--->width:200-padding-border-margin


js获取尺寸 获取不到隐藏元素的尺寸,jq可以获取隐藏元素的尺寸
obj.offsetWidth --->如果obj是display="none"的话 是获取不到它的尺寸的

jq获取可视区的尺寸
$(window).height() ----->jq可视区的尺寸
$(document).height()----->页面的高

2.滚动距离:
获取:
scrollTop()
$(document).scrollTop()---->整个页面的滚动距离
$(document).scrollTop()=$(document).height()-$(window).height()

$('#div1').scrollTop() --->获取元素的滚动距离

设置:
$(document).scrollTop(300) //设置页面的滚动距离300
scrollLeft()

3.元素距离
offset().left --->元素距离屏幕左边的距离,相对于整个页面的,不是可视区的,不管有没有定位
offset().top --->元素距离屏幕上边的距离,相对于整个页面的,不是可视区的,不管有没有定位

position().left--->距离到有定位的祖先节点,不认margin值

js 的 offsetLeft 定位到祖先节点

offsetParent()--> 获取有定位的祖先节点,相对定位的父级
通常想获取 内部元素距离 父亲节点的距离 可通过 obj.offsetParent().offset().left-obj.offset() 来获取

$(window).scroll()

4.jq事件
on('click mouseover',function(){})-->可以同时绑定多个事件

off()取消元素上的所有事件,off('mouseover')可设置过滤条件

5.ev事件
ev.pageX 鼠标的横坐标,相对于整个页面
ev.pageY

ev.clientX 鼠标相对于可视区的坐标
ev.clientX

which 键盘的键值
obj.keydown.function(ev){
ev.which
}


ev.target 目标元素,事件源,鼠标点在哪里就弹出什么
$(document).click(function(ev){
alert( ev.target );弹出的是当前元素,不是window
})

ev.stopPropagation()--->阻止事件冒泡

$(document).contextmenu(function(ev){
ev.preventDefault()-->阻止鼠标右键阻止默认事件
})


return false 阻止冒泡和默认事件

6.$('ul').delegate('li','click',function(ev){
$(this)--->li
$(ev.delegateTarget) 指的是委托人 $('ul')

})
delegate()对于动态添加的元素同样适用

取消委托绑定 undelegate() 取消的是委托人身上的事件
$(ev.delegateTarget).undelegate()

7.$.isFunction()判断是否是函数
$.isNumeric()判断是否是数字
$.isArray()判断是否是数组
$.isWindow() var a=window; alert( $.isWindow(a) ) -->true
$.isEmptyObject() var a={}; alert( $.isEmptyObject(a) ) -->true
$.isPlainObject() 对象自变量 http://www.cnblogs.com/snandy/archive/2011/03/14/1982016.html
---------------------------------------------------------------------------------------------------
10.19

1.运动 normal 400毫秒
fast 200毫秒
slow 600毫秒

show('normal') = show(400)

2.toggle()
fadeToggle()
slideToggle()
fadeIn() 淡入
fadeOut() 淡出
slideDown()
slideUp()

3.animate(
{width:300,height:400}, // 第一个参数{} 去设置样式属性和值
2000, // 第二个参数 时间,默认400
'linear', //第三个参数运动形式 swing(默认缓冲,慢快慢),linear(匀速)
function(){} //第四个参数 函数function() 运动结束的回调
)

width:'+=300' 第一个参数可以数值运算,每次点击都加300px

第二种写法:配置参数step animate({参数一},{参数2,参数3,参数4})


animate({width:300},{
duration:1000,
easing:'linear',
complete:function(){
},
step:function(a,b){//检测定时器的每次变化
console.log(b.pos) //运动过程中的比例值 0-1
}
})

4.delay() 延迟
animate({width:300},1000).delay(1000).animate({height:300},1000)

5.stop()默认停止当前运动,清空前面的队列
stop(true) 停止所有的
stop(true,true) 停止到指定目标点(当前的)
finish() 所有运动停止到指定目标点


6.工具方法
$.parseJSON() 把json类型的字符串转为真正的json安全性好,只能解析json类型的字符串,要严格的json key值和value值要加"" var aaa= '{"a":"111","b":"222"}'; $.parseJSON(aaa)
$.parseHTML() 转化html形式的字符串为Dom节点,然后把dom节点放到数组中 var aaa="<div>div</div><span>span</span>" var bbb=$.parseHTML(aaa) bbb是个数组[div,span]
$.parseXML()

$.ajax() //提交数据,查询数据
url
success
type
data:{"username":obj.val()}
error
dataType:'json', //程序会自动将后端返回内容转化为json类型,如果不规定,则在success函数中通过 $.parseJason()方法来转
async:false //同步,先走完一个再走后面的,默认是异步的

10.26 第六课
1.清空内容
obj.html('')
obj.empty()

2.删除节点
obj.remove()
obj.detach()






jq 笔记

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
<script type="text/javascript"> jQuery(function () { var SpanShow = function () { var r
本章将讲解如何使用jQuery获取和修改元素属性和样式. 1.区分DOM属性和元素属性 <img src="images
什么是插件   插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一
作者: 阮一峰 日期: <a href="http://www.ruanyifeng.com/blog/2011/07/" style="list-style-t
MVC在Web开发中的优势(在TDD方面、逻辑与UI的彻底分离)已无需多言,除此之外个人感觉在给UI提供JS
demo: http://rubentd.com/radios-to-slider/ 用法: <script src="js/jquery-1.10.2.min.js">
demo: http://rubentd.com/radios-to-slider/ 用法: <script src="js/jquery-1.10.2.min.js">
明白jqGrid是怎么工作的会很快加速你理解和掌握这个插件的全部功能。首先第一个要了解的事情是这个
demo: http://rubentd.com/radios-to-slider/ 用法: <script src="js/jquery-1.10.2.min.js">
一个Jq文字特效插件,包括3D效果。兼容性只有IE9+哈。 引入的库 <script type="text/javascript"
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号