jQuery基础知识-函数（2）

选择网页元素
1. Tag : $('div')
2. Class : $('.div')
3. Id : $('#div')

设置网页元素
```
　$('.div').css('background' , 'red')
```

选择网页元素

$('li:first').css('background', 'red')

$('li:last').css('background', 'red')

$('li:eq(2)').css('background', 'red')

$('li:even').css('background', 'red')

$('li:odd').css('background', 'red')

$('li').filter('[title=hello]').css('background', 'red')

方法函数化 ==> 必须加()

window.onload = function(){}

==>  $(function(){})

innerHTML = 123

==> html(123)

onclick = function(){}

==> click(function(){})

JQ与JS的关系 - 共存但不能混用

$function(){

$('div').click(function(){

alert($(this).html() );    ==>JQ

alert(this.innerHTML); ==>JS

alert($(this).innerHTML ) ==>wrong

alert(this.html() )  ==> wrong

链式操作

$('#div').html('hello').css('background','red').click(function(){

alert(123);

});

});

取值赋值合体

$('div').html('hello')  ==>赋值

$('div').html() ==> 取值

css('width', '200px')   ==>  赋值

css('width') ==>取值

取值赋值注意事项

$('li').html()  ==> 当是一组元素的时候，取值是一组中的第一个

$('li').html('hello') ==> 当是一组元素的时候，赋值是一组中的所有元素

attr() 属性值

$('div').attr('title','456') ==>  存在就更改属性，不存在就添加属性

filter() & not() ==> 针对元素本身
```
filter()   :   过滤

not()  :   filter的反义词
```

has() ==> 针对元素内的元素
```
has()  : 包含  
```

next() && pre()

元素上一个或者下一个兄弟元素

find()

查找元素内的元素

$('div').find('h2').eq(2).css('background','red');

index()

索引就是当前元素在所有兄弟节点中的位置

addClass() && removeClass()
```
添加删除Class
```

width() 宽

width()   ==>   width;

innerWidth()  ==>  width + padding;

outerWidth()  ==>  width + padding + border;

outerWidth(true)  ==>  width + padding + border + margin;

节点的操作

$('span').insertBefore($('div') )   ==> span 插在 div 前面

$('span').before($('div') )   ==>  span  的前面是 div

$('span').insertAfter($('div') )   ==> span 插在 div 后面

$('span').before($('div') )   ==>  span  的后面是 div

$('div').appendTo( $('span') ); ==>  div插在span里面，靠后插入

$('div').appendTo( $('span') ); ==>  div中的最后一个元素是span

$('div').prependTo( $('span') ); ==>  div插在span前面，靠前插入

$('div').prepend( $('span') ); ==>  div中的第一次元素是span

remove() ==> 删除元素
```
$('div').remove();
```

on() off() ==> 事件

$('div').on({

'click' : function(){

alert(123);

$('div').off('click')

},

'mouseover' : function(){

alert(456);

$('div').off();

}

});

scrollTop() ==> 滚动距离
```
$(window).scrollTop();
```

事件细节

ev : event  对象

ev.pageX（相对于文档的）：clientX （相对于可视区）

ev.which （键盘值&&鼠标值）  :  keyCode

ev.preventDefault();   ==> 阻止默认事件

ev.stopPropagation(); ==> 阻止冒泡的操作

return false;   ==>  阻止默认事件 + 阻止冒泡事件

one() ==> 事件只执行一次

offset() && position() ==> 距离

offset().left  ==>  获取到屏幕的左距离

position().left ==>  到有定位的父级的left值，把当前元素转化卫类似定位的形式

parent() && offsetParent() ==> 获取父级

parent()  ==>  获取父级

offsetParent()  ==>  获取有定位的父级

val() && size() && each()

val()  ==>  value值

size()   ==>   类似length

each()  ==>  循环

$('li').each(function(I,elem){

$(elem).html(i);

}   ==>   循环赋值

hover()

$('div').hover(function(){

$('span').hide(3000);  ==>  3秒消失

$('span').fadeOut(3000);  ==>  3秒消失  透明度

$('span').slideUp(3000);  ==>  3秒消失 向上滚动

$('span').fadeTo(3000,0.5);  ==>  3秒消失  透明度改为0.5

 }, function(){

$('span').show(3000);  ==>  3秒消失

$('span').fadeIn(3000);  ==>  3秒消失  透明度

$('span').slideDown(3000);  ==>  3秒消失 向上滚动

$('span').fadeTo(3000,1);  ==>  3秒消失  透明度改为1

get() ==> 就是把JQ转成原生JS
```
$('#div').get(0).innerHTML
```

outerWidth() ==> 可以获取隐藏元素的width
```
offsetWidth() ==> 无法获取到隐藏元素
```

html() ==> 只会获取一个元素
```
text()  ==>   会获取所有文本
```

remove() ==> 删除之前元素的所有操作
detact() ==> 保留删除元素的操作

$(function() {}); ==> 等DOM加载晚就可以执行了

window.onload = function(){};  ==>   等页面加载完

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

parents() ==> 获取当前元素的所有祖先节点，参数起到筛选的作用
closest() ==> 获取最近的指定的祖先节点（包括当前元素自身），必须有参数，只能呢个找到一个元素
siblings() ==> 兄弟节点可以写一个参数进行筛选
nextAll() ==> 下面所有的兄弟节点
```
preAll()  ==>  上面所有的兄弟节点
```

Until() ==> 截至

parentsUntil()  nextUntil()  prevUntil()

clone() ==> 可以传递一个参数，可以复制元素的所有事件

wrap() ==> 包装

wrapAll()  ==>  全包装

wrapInner() ==>  内部包装

unwrap()  ==>  删除包装，删除父级（不包括body）

add() && slice() ==> 截取

数据串联化

serialize()  ==>  

serializeArray() ==>  转化为数组

animate()

第一个参数：  {json}  运动值和属性

第二个参数：  时间   默认：400毫秒

第三个参数：  运动形式  只有两种运动形式 (默认：swing-慢快慢  liner - 匀速）

最后一个参数： 回调函数

stop() ==> 默认只会阻止当前运动

stop(true) ==> 阻止所有操作运动

stop(true,true)  ==>可以立即执行到目标点

finish() ==> 立即停止到所有目标点
delay() ==> 延迟

事件委托 delegate()

$('ul').delegate('li', 'click', function(){   });

undelegate()  ==>  阻止事件委托

主动触发 trigger();
ev.date ==> 事件细节
```
ev.target

ev.type
```

工具方法

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

$().html()

$().val()
//不仅可以给JQ用，也可以给原生JS用
$.xxx()

$.yyy()

$.zzz()

$.type(); ==> 可以判断的类型更多
$.trim() ==> 强制去空格
$.inArray() ==> 类似于 indecOf()
proxy(函数，指向对象) ==> 改变this 指向
noConflict() ==> 防止冲突
```
$.noConflict()
```

parseJSON() ==> 解析成真正的json
makeArray() ==> 解析成真正的数组

$.ajax() ==> 异步传输

$.ajax({

url : "xxx.php",

date: "name",

type: "Post",

success :function(data){

},

fail: function(){}

})

$.get();
$.poat();
$.getJSON()
插件操作
1. $.extent ==> 扩展工具方法下的插件形式 $.xxx();
2. $.fn.extent ==> 扩展到JQ对象下的插件形式 $().xxx();

posted on 2016-05-28 16:29 Lizziezhao 阅读(164) 评论(0) 收藏举报

刷新页面返回顶部

Zhao Lina

jQuery基础知识-函数（2）

选择网页元素

设置网页元素

选择网页元素

方法函数化 ==> 必须加()

JQ与JS的关系 - 共存但不能混用

链式操作

取值赋值合体

取值赋值注意事项

attr() 属性值

filter() & not() ==> 针对元素本身

has() ==> 针对元素内的元素

next() && pre()

find()

index()

addClass() && removeClass()

width() 宽

节点的操作

remove() ==> 删除元素

on() off() ==> 事件

scrollTop() ==> 滚动距离

事件细节

one() ==> 事件只执行一次

offset() && position() ==> 距离

parent() && offsetParent() ==> 获取父级

val() && size() && each()

hover()

get() ==> 就是把JQ转成原生JS

outerWidth() ==> 可以获取隐藏元素的width

html() ==> 只会获取一个元素

remove() ==> 删除之前元素的所有操作

detact() ==> 保留删除元素的操作

$(function() {}); ==> 等DOM加载晚就可以执行了

parents() ==> 获取当前元素的所有祖先节点，参数起到筛选的作用

closest() ==> 获取最近的指定的祖先节点（包括当前元素自身），必须有参数，只能呢个找到一个元素

siblings() ==> 兄弟节点 可以写一个参数进行筛选

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

Until() ==> 截至

clone() ==> 可以传递一个参数，可以复制元素的所有事件

wrap() ==> 包装

add() && slice() ==> 截取

数据串联化

animate()

stop() ==> 默认只会阻止当前运动

finish() ==> 立即停止到所有目标点

delay() ==> 延迟

事件委托 delegate()

主动触发 trigger();

ev.date ==> 事件细节

工具方法

$.type(); ==> 可以判断的类型更多

$.trim() ==> 强制去空格

$.inArray() ==> 类似于 indecOf()

proxy(函数 ， 指向对象) ==> 改变this 指向

noConflict() ==> 防止冲突

parseJSON() ==> 解析成真正的json

makeArray() ==> 解析成真正的数组

$.ajax() ==> 异步传输

$.get();

$.poat();

$.getJSON()

插件操作

导航

公告

siblings() ==> 兄弟节点可以写一个参数进行筛选

proxy(函数，指向对象) ==> 改变this 指向