jQuery的学习日记

jq的本质

就是封装的js函数

jq对象获取&设置

类似数组的对象，通过length属性可进行遍历，每个数组成员是一个dom对象，可以使用dom原生方法；需要注意的是，jq对象只可用jq方法，dom对象只可用dom方法。jq对象通过下标进行数组访问可获得dom对象，dom对象可通过$(dom对象名)转换为jq对象（谨慎转换）。所以在参数列表中最后一个参数为带有两个参数（第一个为的对象的下标，第二个为当前对象的某个值）的函数，而这个函数中的this指的是当前这个下标的dom对象（具体应该用了call或bind方法）

html()和text()方法

html获取和设置内容与innerHTML一致；text获取内容方法是在html方法获取的内容作出了去标签的处理，设置内容时浏览器不会翻译内容中的任何标签（慎用）

遍历

①长辈

parent()//爸爸parents()//爸爸爷爷...parentsUntil()//爸爸爷爷..到某个标签结束例:jq(“span”).parent(“div”).css({"background-color":"blue"})//span的爸爸并且还得是div的背景为bluejq(“span”).parents().css({"background-color":"blue"})//span的所有直系长辈的背景为bluejq(“span”).parentsUntil(“div”).css({"background-color":"blue"})//span的爸爸爷爷..到div结束的背景为blue

②晚辈

children()//儿子find()//所有后代

③同胞

siblings()//所有同胞元素next()//下一个同胞元素nextAll()//下一个和后面所有同胞元素nextUntil(“元素1”)//到元素1之间的所有同胞

盒子位置

scroll().top/scroll().leftoffset()// 获取或设置坐标值(相对文档)设置值后变成相对定位,返回一个坐标对象,设置也传对象属性是left和top //offset().top    offset({left:100})position()  // 获取坐标值(相对父亲)只能读取不能设置//readOnlyscrollTop()//设置或获取元素滚动条垂直卷去的距离:设置scrollTop(100)scrollLeft()//设置或获取元素滚动条水平卷去的距离

data()方法

用处不大，给对象添加属性使用（可能是为了方便没学js的人）

改变文档结构

append()//在被选元素的内容结尾插入n个元素:$(‘#div’).append(‘你好’,’666’)prepend() //在被选元素的内容开头插入n个元素after() //在被选元素之后插入n个元素before()//在被选元素之前插入n个元素replaceWith()//把被选元素替换掉remove()//删除被选元素和他的后代empty()//删除被选元素的后代

jq事件

三种方式：直接调用：形如xxx.click(function(e){})bind调用：形如xxx.bind('click mousedown mouseover',function(e){});delegate调用(先辈元素事件传给字辈)：形如$('ul').delegate('li','click……',function(e){})on调用：形如$('ul').on('click……','li',function(e){})这里的函数如果了解dom操作则很容易理解，是一个具体的dom对象在调用函数，this指代内容和函数参数e与dom一致（就是相同的东西）解除事件绑定的方法分别为unbind(也适用于直接调用绑定事件)、undelegate、off

jq的等待加载完毕执行方法

window.onload = function(){}//dom方法$(function(){})//jq方法,与ready一致$(document).ready(function(){})//jq方法，当dom结构加载完执行$(document).load(function(){})//jq方法，当整个页面加载完执行，加载完所有连接和引用（比如图片资源）。支持度较差，不推荐大量使用

jq动画

隐藏/显示

xxx.hide(v,fn)//hide的速度，回调函数，都可不填xxx.show(v,fn)xxx.toggle(v,fn)//如果hide则执行show，反之亦是如此

淡入淡出

xxx.fadeIn(v,fn)//淡入已经隐藏的元素xxx.fadeOut(v,fn)//淡出已经显示的元素xxx.fadeToggle(v,fn)//淡出入开关xxx.fadeTo(v,alpha,fn)//自定义透明度//参数都是可选的,v是速度可填slow fast normal或数字(ms),alpha是透明度,fn是回调函数

滑动隐藏

 xxx.slideUp(v,fn)//向上滑动隐藏 xxx.slideDown(v,fn)//向下滑动显示 xxx.slideToggle(v,fn)//上下滑动隐藏显示开关//参数都是可选的,v是速度可填slow fast normal 或数字(ms) fn是回调函数