javascript代码实例教程-jQuery知识点总结(一)重要!

发布时间:2019-01-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery知识点总结(一)重要!脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

1.jQuery--->js框架 --->www.jquery.COM

(1)jQuery的特点--->***!!!

(1)jQuery的特点:

利用选择器查找要操作的节点,然后查找到的节点封装成一个jquery对象。通过调用jQuery对象的方法或者属性来实现对 底层被封装的节点的操作。

这样做的好处:

a.兼容性更好:jQuery对象考虑了浏览器的差异性。

b.代码更简洁

(2)编程步骤 (hello.htML)

step1,使用jQuery提供的选择器来查找要操作的节点。--->1.找节点

step2,调用jQuery对象的方法或者属性。--->2.调方法/属性

知识点:

1. jquery可以加载多个ready函数,而原始的js只能加载一次onload

2.用dom对象得到的对象不能使用jquery中的方法,比如VAR p=document.getElementById("id"),此时p不能这样使用p.html(),而应该使用innerHTML

同样,jquery对象不能使用dom中的方法,如果juqery中改写了dom中的方法,则可以使用dom中的方法

2. jQuery对象转换为dom对象的方法:

var $obj=$('#a')

a:使用$obj.get(0)

b:使用$obj.get()[0]

dom对象转换为jQuery对象:

用$()把DOM对象包装起来就OK:

var obj = document.getElementById('a');

var $obj=$(obj);

3.jquery优势:

a:兼容性强大,完美支持css1-2.0

b:完美容错机制,eg:即使没有对应标签也不会报错

4.选择器:

1):id选择器 :$('#id')

eg: $('#p1').css('color','red');//代替了#p1{color:red;}

2):calss选择器 :$('.p1')

eg: $('.p1').css('color','red');//代替了.p1{color:red;}

3):标签选择器(不推荐*选择器)

eg: $('p').css('color','red');//代替了.p1{color:red;}

4):多重选择器

eg: 123

 

12312

 

<script>

$(function(){

$('p,p').css('color','red');

});

</script>

5):层次选择器

E F 查找满足F要求的后代

E>F 只查找子节点

E+next 查找下一个兄弟,等于next()

E~siblings 查找下面所有兄弟,等于nextAll()

eg:给p标签后紧邻的p标签添加颜色

$('p+p').css('color','red');

$('p').next().css('color','red');

给p标签后所有的p标签添加颜色

$('p~p').css('color','red');

$('p').nextAll().css('color','red');

6):过滤选择器:(用法:只举一例,其他参考手册)

:First

$('p:first').css();

注意:标签内嵌套标签时单引号和双引号错开使用,若计算偶数则下标从0算起

7):属性选择器

A:

safs

 

选取tITle为js的p标签添加红色,注意title可以为原有标签,也可以为自己自定义的标签

$('p[title=js]').css('color','red');

或者$('p[title]').css('color','red');

B:选取含有title和myuu属性的p元素,注意title可以为原有标签,也可以为自己自定义的标签

$('p[title=js][myuu]').css('color','red');

C:子元素:p的子标签p的第一个标签

$('p p:first-child').css('color','red');

8):表单元素及表单元素属性选择器

$(':input[tyPE=checkbox]').val();

$(':input:disabled').val();

$(':input[disabled=disabled]').val();

$('select:selected').val();

5.dom筛选

$('p:eq(0)').css(); //给指定下标为0的p标签添加颜色

$('p').filter('#second').css(); //奇偶数添加

$('p').click(function(){//单击p标签给当前添加颜色

if($(this).is('.first')){

$(this).css('backgound','red');

}

});

$('p').not(':last').css();//给p标签添颜色,除了最后一个

$('p').not('#second').css();//给p标签添颜色,除了id为second的p标签

$('input').map(function(){ //将一组元素转换为数组(一不用,因为有一个序列化的方法比这个更好用)

return $(this).val();

}).get().join(',');//,即将三组文本框中的值用逗号隔开并转为字符串

slice(): $('p').slice(1,5).css();// 选中下标为1,2,3,4的元素,包含1,不包含5。也可传入负数

6.dom遍历查找:(注:返回一组元素的都可以加参数,返回一个的不能加参数)

$('#p1').parent().css(); //通过子节点p1找到父节点wrap

$('#p1').parents('.outer').css();//选取祖先元素,通常加参数,表示范围为class为outer的标签为止

$('p1').offsetParent().css();//offsetParent()返回父元素中第一个其position设为relative或者absolute的元素,仅对可见元素有效

$('#p2').siblings('p').css();//选择p2所有的兄弟元素(可加参数)

$('span').parent().css('color','red').end().css('color','blue')//先设置红色再设置成蓝色,颜色可重叠。链式操作,end()函数

$('input').each(function(){//用的不多,因为效率低,后面有工具函数可以代替它

alert($(this).val());

});

7.(仅了解)特殊符号的处理:有的加1个/,有的加2个//

$('input[name=gender[]]')没加转义符,报错

$('input[name=gender//[//]]')加了转义符,正确

$('input[name=/'checkbox/']')正确

8.表格隔行变色

----------js代码-----------

var table=document.getElementById('table');

var tr=table.getElementByTagName('tr');

for(var i=0;i

if(i%2==1){

tr.style.background('blue');

}else{

tr.style.background('red');

}

}

-----------jquery代码-------

$('table tr:even').css('backgrpund','red');---->偶数行

$('table tr: odd').css('backgrpund','blue');---->奇数

使用end()函数可以优化为一行代码:

$('table tr').fliter(':even').css().end().fliter(': odd').css()

9.tab标签页

$('#ul li').click(function(){

$(this).addClass('current').siblings().removeClass('current');//点击li的时候切换样式

$(#content>p).eq($(this).index()).show().siblings().hide();//根据li的索引值,来确定哪个p显示哪个p隐藏

上面两行代码可优化为一行:

$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();

});

10.jquery选择器的优化:

a:最快的是id选择器:能用id获取到的标签尽量不用class选择器

b:假如p标签下有一个class为a,则尽量:$('p.a'),当然$('.a')这样写也可以。

假如有一个p标签,id为a,则直接:$('#id'),一定不要$('p#id')这样写。

c:假如p有一个子p,则尽量使用直接使用id获取,不要通过父元素找。

d:通过find()来找,尽量不使用上下文查找

eg:$('li.item-li').find('li').css();

e:链式操作比缓存快很多,只有在要通过一个元素查找另外的元素的时候才需要用到缓存,如果直接对某一个元素进行修改,则直接用链式操作。

11.dom操作:

a:创建节点:分为内部插入和外部插入。$(html)

内部插入:插入后是子元素

外部插入:插入后是兄弟元素

$('body').append('

p标签

');//给页面添加了一个p标签

 

或者也可以这样写:

var str='

p标签

';

 

$('body').append(str);

$('p').append('

p标签

');//向p标签的尾部插入p标签,p是p的所有子标签中排序在最后一个

 

$('

p标签

').appendTo('p');//结果和上一句一样

 

 

12.添加样式

<script>

$('p').addClass('bg white');

$('p').removeClass('bg white');

//toggleClass();//切换样式

</script>

再比如:

 

11111111

 

<script>

/*$('p').css('background','red').css('color','white').css('border','10px solid #abcdef');*/

$('p').css({

'backgroundColor':'red',

'color':'white',

'border':'10px solid #abcdef'

});

//建议大家把css属性名用引号引起来

</script>

13.jQuery中的事件和对象

绑定事件

正式写法:

$obj.bind(type,fn)

简写形式:

$obj.click(F1)

获得事件

var obj=e.target;

获得鼠标点击的坐标

e.pageX

e.pageY

取消事件冒泡

e.stopPropagation()

合成事件

hover(f1,f2) :模拟鼠标悬停事件

f1:处理鼠标进入

f2:处理鼠标离开

toggle(f1,f2) : 模拟鼠标连续点击事件

f1:处理第1次点击

模拟操作

正式写法

$obj.trigger(type)

简写形式

$obj.focus()

eg obj.trigger('focus’)--->获得焦点

14.动画

1).show()/hide()

改变元素的度和高度来实现显示和隐藏

用法:$obj.show(time,[callback])

2).slidDown()/slideUp()

改变元素的高度来实现显示和隐藏

3).fadein()/fadeOut()

改变元素的不透明度来实现显示和隐藏

4).aniMATE

自定义动画

$obj.animate({},time,[callback]);

{ }:对象

time:执行时间

[callback]:回调函数

 

 

15.jQuery插件编写(类级别开发,几乎不用):

$.zxit={ //zxit为命名空间

centerDiv:function(obj){ //centerDiv为我们自己自定义的插件方法

obj.css({

'top': ($(window).height()-p.height())/2,

'left': ($(window).width()-p.width())/2,

'position':'absolute'

});

 

return obj;//返回和传入的都是jquery对象

}

}

16.jQuery插件编写(对象级别开发,使用率99%):

$(function($){

$.fn.plugin=function(options){

var defaults = {

//各种参数,各种属性

}

var options = $.extend(defaults,options);

 

this.each(function(){

//实现功能的代码

});

return this;

}

})(jQuery);

17.对ajax编程的支持

(1)load()

1)作用:异步地向服务器发送请求,并且将服务器返回的数据直接添加到符合要求的节点之上。

2)用法:

$obj.load(url,[data]);

url:请求地址

data:请求参数,有两种形式:

请求字符串 "username=tom&age=23"

对象形式 {"username":"tom","age":23}

如果有请求参数,并且请求参数采用对象的形式来发送,load方法会发送post请求,否则发送get请求。

(2)$.get()和$.post()

1)作用:异步地向服务器发送请求,并且可以将服务器返回的数据进行处理。

$.get()发送get请求,

$.post()发送post()请求。

2)用法:

$.get(url,[data],[callback],type);

url 请求地址

data 请求参数

callback 回调函数,用来处理服务器返回的数据,格式

如下:function(data,statusText){

}

data:服务器返回的数据。

statusText:状态描述。

type 服务器返回的数据类型:

html: html文档 text: 文本 json: json字符串 XMl: XML文档 script: javascript脚本

(3)$.ajax()

1)作用:可以完全控制ajax对象来发送请求(同步或者异步)。

2)用法:

$.ajax({});

{}是一个对象,用来描述发送请求时的选项参数,常见的选项参数如下:

url:请求地址

data:请求参数

type:请求类型

dataType:服务器返回的数据类型

success:服务器处理成功对应的回调函数。

error:服务器处理失败对应的回调函数。

async:true(异步,默认值)

和false(同步)。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery知识点总结(一)重要!全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery知识点总结(一)重要!所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。