当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jQuery初步学习记录

发表于: 2014-04-15   作者:Coraction   来源:转载   浏览:
摘要: jQuery 【一下内容全是摘自本人学习笔记,及学习材料】A、什么是jQuery? ①jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互; ②jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可;

jQuery

【一下内容全是摘自本人学习笔记,及学习材料】A、什么是jQuery?

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互;

②jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可;

③jQuery兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+,chrome)。

 

B、使用jQuery有什么好处?

对程序员:简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。

对用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。

 

C、jQuery的特点?

①轻量级:经GZip压缩后传输的代码文件仅14KB,未经压缩传送的代码文件仅26KB 

②链式语法 :$("p.surprise").addClass("ohmy").show("slow");

③CSS 1-3 选择器:支持CSS选择器选定DOM对象 

④跨浏览器:支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ 

⑤简单:较其它JS库更容易入门,中、英文档很齐全 

 

⑥易扩展: JQUERY UI 、 JQUERY FX –已经有很完善的基于JQUERY的用户界面库 和网页特效库

 

D、jQuery下载:

官方网站下载:http://jquery.com/  

 

E、jQuery的页面载入方式:

$(document).ready(callback);

 

$(document).ready(function() {});----->>>简化版:$(function(){});

(a.绑定一个在DOM文档载入完成后执行的函数;b.同一个页面上可以多次使用)

 

F、核心函数

$(expression,[context])

接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素;jQuery 的核心功能都是通过这个函数实现的。

$(html)根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。

$(elements)将一个或多个DOM元素转化为jQuery对象  注意是jQuery对象,而不是DOM对象。如果我想得到DOM对象呢?很简单,只需在其后跟一个索引值(如[0])—因为它得到的是一个对象数组,即可得到DOM对象。然后就可以使用innerHTML、innerText等DHTML方法和属性了。

 

G、选择器

返回jQuery对象

基本选择器*, class,element, id, selector1, selector2等.

层级选择器ancestor descendant, parent > child, prev + next , prev ` siblings

简单选择器even, odd, eq[index], last, first等

 

内容选择器contains[text], empty,  parent, has[selector]等.

可见性选择器hidden, visible.

属性选择器[attribute *=value], [attribute =value], [attribute]等

子元素选择器first-child, last-child, nth-child(index), only-child.

表单选择器button, checkbox, file, hidden等.

表单对象属性选择器checked, disabled, enabled, selected.

 

H、属性

attr(name):取得第一个匹配元素的属性值

attr(properties):将一个“名/值”形式的对象设置为所有匹配元素的属性

attr(key,value):为所有匹配的元素设置一个属性值

 

I、class

addClass(class):为每个匹配的元素添加指定的class

removeClass(class):从所有匹配的元素中删除全部或者指定的class

 

J、HTML

html():取得第一个匹配元素的html内容

html(val):设置每一个匹配元素的html内容【val为需要设置的值比如var val="test value"】

 

K、文本

text()、text(val)和HTML类似【只是html("<font color='red'>test value</font>");中的font标签不会显示在网页上,即显示的是 test value(字体为红);但是Text就是以纯文本的形式写出去,即在text("<font color='red'>test value</font>");网页显示的就是:<font color='red'>test value</font>.】

 

L、值

val():获得第一个匹配元素的当前值。

val(val):设置每一个匹配元素的值。

 

M、DOM文档处理

内部插入append(content), appendTo(content), prepend(content), prependTo(content).

外部插入after(content), before(content), insertAfter(content), insertBefore(content).

 

N、CSS

css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性,属性名包含 "-"的话,必须使用引号

css(name,value):在所有匹配的元素中,设置一个样式属性的值。

 

O、事件

页面载入事件

事件处理:bind , one , trigger, triggerHandler, unbind

交互处理:hover, toggle

事件:click, mouse event, keyboardevent等.

 

P、效果

show():显示隐藏的匹配元素

show(speed,[callback]):以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数

hide():隐藏显示的元素。

hide(speed,[callback]):以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数 

toggle() :切换元素的可见状态 

 

Q、Ajax

$.ajax(options)

$.get(”search.do”,{id:1},rend); function rend(xml){ alert(xml); }  

$.post(”search.do”,{id:1},rend); function rend(xml){alert(xml);}  

$(”#msg”).ajaxStart(function(){this.html(”正在载入..”);});  

$(”#msg”).ajaxSuccess(function(){this.html(”加载完成!”); });  

通过 HTTP 请求加载远程数据

 

工具、

可采用任意文本编辑器, 

VS2008中可以实现智能提示.

Aptana Studio

FireFox2 + FireBug1.05!

 [弄了这么多,不容易啊!T.T]

jQuery初步学习记录

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号