jQuery基础与常用方法学习笔记

JQ与JS的关系：可以共存，不可混用。jq源码，源生JS面向对象写的

 

JQ写法

链式操作 $(‘#div’).html(‘hello’).css().click()

赋值取值合体 .html(‘hello’)赋值，html()取值  当一组元素的时候，取值是一组当中的第一个，赋值是一组中的所有元素

 

$() 可以选择元素，充当window.onload JQ的写法$(document).ready()，还可以创建节点$(‘<div>')

$() 等dom加载完就执行，性能好些，相等于$(document).ready(function(){})

(function($){})($)

window.onload = function(){} 原生页面加载完

 

JQ中的方法分为两派

$().css $().html() 只能给JQ对象用

$.xxx() $.yyy() 不仅可以给JQ用，也可以给原生JS用，叫做工具方法

 

$()下的常用方法

has() 包含

filter() not() 不过滤

attr() 设置属性（获取checked属性，返回checked或''）

prop() 获取checked属性，返回true、flase

next() 下一个兄弟节点

prev() 上一个兄弟节点

find()  查找当前元素集合中的每个后代元素

:eq() 查找坐标 $(‘li:eq(2)’).css()

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

addClass(‘box’) 添加样式

removeClass(‘box’) 删除

width() 实际的宽

innerWidth() 宽加padding

outerWidth() 宽加padding加border

outerWidth(true) 宽加padding加border加margin 注:也有关于高的这些方法，以上方法可以获取到隐藏的宽，但原生JS不能

insertBefore()  找到一个元素，然后移动到前面 $(’span’).insertBefore( $(‘div') )

before() 在被选元素前插入指定的内容   区别 后续操作变了

insertAfter() 把一个节点添加到指定节点的后面

after() 

appendTo() 被选元素的结尾插入内容，剪切操作 $(‘div’).appendTo( $(’span') );

append() 被选元素的节尾插入指定内容

prependTo() 添加到兄弟元素的前面

remove() 删除节点

on() 好处，可以写自定义事件，可以添加多个方法

$(‘div’).on(‘click mouseover’,function(){

     alert(123)

})

$(‘div’).on({

     ‘click’ : function(){

     alert('123');

     },

     ‘mouseover’,function(){

     alert(‘456’);

     }

})

off() 取消事件

$(window).scrollTop() 滚动距离

ev —原生event对象

ev.pageX（相对于文档）—原生clientX（相对于可视区）

ev.which  键盘的键值

ev.preventDefault() 阻止默认事件

ev.stopPropagation() 阻止冒泡事件

return false 以上两者都阻止

one() 事件只执行一次

offset() 获取到屏幕的左或上距离 offset().left/offset().top

position() 相对于父元素的位置（偏移）

parent()  获取低级

offsetParent() 获取有定位的父级

val() 获取元素的value值

size() 获取一组元素的长度

each() 循环，接受一个回调函数，接受两个参数，1下标，2每个元素

hover() 鼠标移入移出结合，接受两个函数

show() hide() 显示隐藏 可以接受一个参数时间，有运动效果

fadeIn() fadeOut() 淡入淡出 也可以指定时间，默认400

fadeTo() 指定范围 两个参数（时间，透明值）

slideUp() slideDown() 向上展开，向下收起

get() 把Jq转成原生JS  注： get()不加下标是一组元素的集合 例：$(‘#div1’).get(0).innerHTML 反集合的对象转在原生的，$(‘li’)[i]这样也可以转成原生，不过jq手册里没有。jq下面有length属性

html() 获取第一个内容包括标签 $(‘div’).html();

text() 获取到所有的文本

remove()和detach() 删除一个节点

remove会把之前的元素所有操作都删除，可以存在变量里重新插入

detach会保留这个元素的操作行为

例：

$(function(){

     $(‘div’).click(function(){

     alert(‘12’);

     })

    var oDiv =  $(‘div’).remove();

     $(‘body’).append( oDiv );

})

parents() 获取所有的袓先节点，参数是筛选功能

closest() 获取最近的袓先节点（包括当前元素自身）必需要写筛选的参数，只能找到一个元素

siblings() 找所有的兄弟节点，参数是筛选功能

children() 返回匹配元素集合中每个元素的子元素

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

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

parentsUntil() 袓先截止的节点

nextUnitil() 加参数可以设置到XX截止

prevUntil() 上面截止的节点

clone() 克隆节点，复制节点的操作 $(‘div’).clone().appendTo( $(’span') ); 参数设置true可以将事件也复制到新节点当中

wrap() 包装 $(’span’).wrap(‘<div>’) 给每一个span加一个div

wrapAll() 整体包装

wrapInner() 内部包装

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

add() 让两个标签组合进行其它操作

slice() 参数起点坐标-结束 JQ:把匹配元素集合缩减为指定的指数范围的子集 JS解释：数组中返回指定的元素

serialize() 串连成字符串

serializeArray() 串连成数组

animate() 第一个参数：{ 运动的属性和值 }，第二个参数：时间（默认400），第三个参数：运动形式，只有两种（默认：慢快慢swing，匀速linear），第四个参数：回调函数

stop() 停止运动 // 默认：只会阻止当前运动 ，加个参数true可以阻止所有操作，第二个参数设为true可以立即停止到指定的目标点

finish() 完成现在正在运行的效果。会立即停止到所有指定的目标点

delay() 延迟方法，停顿一下

delegate() 事件委托方法 省掉循环操作，对后续添加的内容直接有了事件操作，提高性能。$(‘ul’).delegate(‘li’,’click’,function(){})

undelegate() 阻止事件委托

trigger() 主动触发被选元素的指定事件类型。适合自定义事件

ev下其它属性 ev.data 事件中的数据 $(‘.a’).on(‘click’’,{name:1}’,function(ev){alert(ev.data.name)}) ev.target 事件源(操作的是谁) ev.type事件类型

odd()偶数行

even()奇数行

charAt() 从某个字符串取得具体的字符，参数坐标

substring() 字符串中提取一些字符，参数坐标

 

$下的工具方法

$.type() 判断类型

$.trim() 去前后空格

$.inArray() 类似于indexOf  var arr = [‘a’,’b’]; alert( $inArray(‘b’,arr) )

$.proxy() 改变this指向 第一个参数函数名，第二个指向，第三个可以写传参，这样如果是事件调用的时候不会执行。加上()执行，相当于调用函数，还可以在里面传参，也可以在前面或后面混着传 ）function show(n1,n2){alert(this)}$.proxy(show, document,3)(4);

$.noConflict() 防止冲突 var miaov = $.noCoflict(); miaov(function())

$.parseJSON() 转对象

$.makeAarry() 转数组

$.ajax({ }) 里面是个对象 抽象出来的方法有三个：$.get() $.get(‘xx.php’,{},function(){})      $.post()        $.getJSON() 请求json或JSONP的形式

扩展插件

$.extend 扩展工具方法下的插件形式 $.xxx() $.yyy()

$.fn.extend 扩展到jq对象下的插件形式 $().xxx() $().yyy()

 

形参：全称为“形式参数”是在定义函数名和函数体的时候使用的参数，目的是用来接收调用该函数时传递的参数。

实参：可以是常量、变量、表达式、函数等， 无论实参是何种类型的量，在进行函数调用时，它们都必须具有确定的值， 以便把这些值传送给形参。