关于Jquery的笔记

---

1、使用$('X')来选择页面元素，X = #idName,tagName,.className 如果使用尖括号，如$('<Y>')表示创建Y元素

2、可以一次性选择多个元素,多个元素中选择第几个可以用：even表示第偶数个，odd表示奇数个，first,last,eq(n-1),n=1、2、3...

3、使用filter进行筛选，大范围中选择小范围

---

 

方法函数化： window.onload = function(){}; -->$(function(){});function $(){}; innerHTML = 123;-->html(123); onclick = function(){}; --> click(function(){});function click(){} JQ的方法后面都有一个括号()

JQ与JS关系，两者可以共存，但不能混着用

alert($(this).html()); //JQ写法

alert(this.innerHTML); //JS写法

链式操作：类似下面这个，可以连起来写 $('#div1').css('background','red').html('1234').click(function () {alert(1234);})

JQ取值赋值的问题： 取值一组元素时，取出的是一组中的第一个；赋值一组元素时，赋值的是全部

---

 

$()下的常用方法

filter()：过滤，括号内只加类似 #idName,.className这些词,只对该元素进行过滤

not()：过滤的反义词

has()：子元素中包含

next()：该元素下一个兄弟节点，就一个

prev()：上一个兄弟节点，就一个

find()：选择该元素下包含的满足关系

eq()；相当于下标,从0开始

index()：索引，表示当前元素在所有兄弟节点中的位置

attr('attrName','attrValue')：可改变目标元素的属性

addClass(),removeClass()：添加，删除样式

以下几个只有数值

width()：width

innerWidth()：width + padding

outerWidth()：width + padding + border;

outerWidth(true)：width+padding+border+margin

'a'.insertBefore('b')：b前面是a

insertAfter() appendTo()与原生中appendChild()类似，在最后一个位置添加节点

prependTo()在第一个子节点添加元素 对应before 

a.before('b') a前面是b 同理after,append,prepend 区别：后续操作不一样，都是对应自己的'a'

a.remove()：删除节点a； on('click onmouseover 函数名',{函数传入的参数:参数值},'function'):添加事件的写法,可以写原有事件也可以用自写事件,一次可以写多个不同事件(json形式)

a.off('b'):取消a的事件b

scrollTop():滚动距离

---

 

事件细节：

var oEvent = ev || event //原生

ev直接用 //JQ

ev.pageX是相对于文档的 clientX是相对于可视区

ev.which:keyCode--键盘的键值，ev.which也可以监测鼠标的值

ev.preventDefault():阻止默认事件

ev.stopPropagation():阻止冒泡的操作

return false //阻止默认时间+阻止冒泡事件

one():事件只执行一次，放在on()的位置

offset()获取到屏幕的距离，下面有两个属性值，left top

offsetParent()：获取有定位的父级

parent()：获取父级

position()将元素看做一个有定位的元素，到有定位的父级，下面有两个属性值left top

val():获取value值，加参数为设置

size()：获取一组元素的长度，如$('li').size();与length类似

each()：一个循环，如：$('li').each(function(i,elem){elem.innnerHTML = i;})，一参：下标；二参：每个元素

---

 

jQuery下常用的方法：

hover(fun1(),fun2())鼠标移入移出的状态，第一个函数表示移入，第二个函数表示移出

show()显示

hide()隐藏，这两者可以接受参数表示时间，单位毫秒

fadeIn() 淡入 fadeOut()淡出，这两者也可以接受时间参数，默认都是400

fadeTo() 设置透明度，第一个参数表示时间，第二个参数表示透明度opacity的值，如0.3

slideDown() 向下展开 slideUp() 向上卷起

---

 

jQuery高级部分 基础方法扩充

a.get()：将JQ形式的数组a转成原生JS

outerWidth()：也可以获取隐藏元素的宽度

原生代码中，offsetWidth获取不到隐藏元素的宽度值

text()：获取所有符合要求元素内的文本内容，不会获取到标签。加参数的话，都会转换为文本内容

html()中获取第一个元素中的内容，包括标签，加参数的话，会解析参数内容 

detach()：与remove()方法类似，不过会保留被删除元素的所有行为

remove()：删除节点，被删除元素的所有行为也会被删除

$(function(){})：等DOM加载完，所以比原生的window.onload加载要快 

$(function(){}) = $(document).ready(function(){})

window.onload = function(){}：所有元素都加载完

DOMContentLoaded

parents()：获取当前元素的所有的祖先节点，参数表示过滤，只有符合参数的祖先级节点才会被选择

closest()：获取最近的一个指定祖先节点，不包括元素自身，必须加参数表示过滤，只有符合参数的祖先节点才会被选择

siblings()：获取元素的兄弟节点，不包括自身，可以加一个参数表示筛选

nextAll()：下面所有的兄弟节点

prevAll()：上面的所有兄弟节点

parentsUntil()：参数表示截止位置

nextUntil()：参数表示截止位置

prevUntil()：参数表示截止位置

clone()：克隆节点，可以接受一个boolean参数，true表示复制之前的行为

wrap()：对每个标签外部进行包装；如$('span').wrap('<div>');

wrapAll()：整体包装，如果aaba，对a进行包装，则会变成aaab

wrapInner()：内部包装

unwrap()：删除包装(删除父级：不包括body)

add()：加入元素

slice()：截取指定的节点范围

serialize()：串联成字符串

serializeArray()：串联成数组

animate()：第一个参数JSON，属性：目标值；第二个参数：时间,默认时间为400；第三个参数：运动形式，只有两种形式（默认：'swing'(慢快慢),'linear'(匀速)）;第四个参数：回调函数，function

a.stop()：默认停止a元素的当前运动，当传入第一个参数true的时候，会阻止后续的所有运动，第二个参数true的话表示立即到达当前运动的目标位置； 调用finish()表示立即到达最终的目标点

delay()：设置延迟，参数表示时间

a.delegate(obj,动作,调用函数)：设置事件委托，将obj的事件添加到a身上

undelegate()：取消事件委托

a.trigger()：对a主动触发动作，参数表示动作，函数名

ev.data  传递事件中的参数

ev.target 当前操作的事情

ev.type  操作的事件类型

---

 

以下是$下的常用方法，上述是$()下的常用方法 带括号的只能给JQ对象用 不带括号的形如$.XXX()这种，不仅可以给JQ用，也可以给原生JS用，称为工具方法

$.type()：判断类型，比原生方法能判断出更多方法

$.trim()：去掉空格

$.inArray()：类似于原生的indexOf()，第一个参数表示需要查找的字符，第二个参数表示数组

$.proxy()：改变this指向的第一个参数表示函数名，第二个参数表示需要指向的目标，后面也可以传递函数的参数

$.noConflict()：防止冲突；给$赋值一个新的名字 如 var a = $.conflict()，后面所有的$都可以用a表示

$.parseJSON()：解析成JSON形式， 原始数据需要使用严格型

$.makeArray：转换成真数组；

getElementsByTagName返回的不是真数组，没有push操作

$.ajax()：传递json形式的配置参数，比如  url, data, type,  success（成功的话接收的一个返回参数） ,error（失败的话接收的一个返回参数） ajax包含的方法可以在jQuery官网api文档里面查找ajax，异步对象，异步操作blala

抽象出来的方法，如制定type类型是post或者get方法，可以使用$.post()发送一个get提交方式，$.post()内第一个参数是目标php文件，第二个表示使用的方法，$.get()方法类似 注：$().get()表示将jQuery形式转换为原生

$.getJSON()：如$.getJSON('XXX.php?callback=show',function(){});表示接收

---

 

jQuery插件：

$.extend：扩展工具方法下的插件形式，形如$.xxx,$.yyy

$.fn.extend：扩展到JQ对象下的插件形式，形如$().xxx().$().yyy()

---

 

图片预加载：

界面滚到哪里图片才显示到哪里 window.onload = function () {   var oImg = new Image();   oImg.src = '预加载图片的地址';  }

预判加载：看第一张图时加载第二张

延迟加载：现在加HTML，再加载页面图片

转载于:https://www.cnblogs.com/likaopu/p/5341962.html