注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

JQuery主要的功能结构  

2017-02-08 18:29:27|  分类: html5-webapp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1.JQuery简介。

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。简单来说就是一款免费且开放源代码的JavaScript代码库,类似的JavaScript代码库还有比如:jQuery、dojo、prototype、ExtJS。

2.JQuery特点。

  1. 动态特效

  2. AJAX

  3. 通过插件来扩展

  4. 方便的工具 - 例如浏览器版本判断

  5. 渐进增强

  6. 链式调用

  7. 多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)。

3.JQuery中的选择器

在JQuery中,获得页面中元素的方式就称做选择器。

  1. 基本

  2. 层级

  3. 简单

  4. 内容

  5. 可见性

  6. 属性

  7. 子元素

  8. 表单

  9. 表单对象属性

3.1.基本

  1. #id :通过id属性值获取元素

  2. Element :通过元素名获取元素 selector1,selector2 :获取列表中指定的所有元素 .

  3. class :获取使用class样式的所有元素

JQuery笔记(上)

3.2简单

  1. first :匹配第一个元素

  2. last :匹配最后一个元素

  3. even :匹配索引为偶数的元素

  4. odd :匹配索引为奇数的元素

  5. eq(index) :匹配索引为指定值的元素

  6. gt(index) :匹配索引大于指定值的元素

  7. lt(index) :匹配索引小于指定值的元素

  8. not(selector) :匹配除了指定选择器之外的所有元素

3.3层级

  1. ancetor descendant:匹配祖先元素下的后代元素

  2. parent > child :匹配父元素下的子元素

  3. prev + next :匹配上一个元素的后面的元素,必须是挨着的

  4. prev~siblings :匹配前一个元素的所有平辈元素,在prev元素后面才能匹配

3.4内容

  1. :contains(text):匹配内容中包含指定内容的元素

  2. :empty :匹配内容为空的元素

  3. :has(selector):匹配内容中包含指定选择器的元素

  4. :parent:匹配内容不为空的元素

3.5可见性

  1. hidden:匹配隐藏的元素

  2. visible:匹配显示的元素

3.6属性

  1. [attribute]:匹配具有指定属性的元素

  2. [attribute=value]:匹配属性值等于指定值的元素

  3. [attribute!=value]:匹配属性值不等于指定值的元素

  4. [attribute^=value]:匹配属性值以指定值的开始的元素

  5. [attribute$=value]:匹配属性值以指定值的结束的元素

  6. [attribute*=value]:匹配属性值中包含指定值的元素

  7. [selector1][selector2][selectorN]:同时满足所有条件,则匹配

JQuery笔记(上)

3.7子元素

  1. :nth-child(index/even/odd):匹配指定索引的元素,从1算起

  2. :first-child:匹配第一个子元素

  3. :last-child:匹配最后一个元素

  4. :only-child:如果子元素是父元素的唯一元素,则匹配

3.8表单

  1. :input:匹配所有表单元素

  2. :text:匹配文本框

  3. :password:匹配密码框

  4. :radio:匹配单选按钮

  5. :checkbox:匹配复选框

  6. :submit:匹配提交按钮

  7. :reset:匹配重置按钮

  8. :image:匹配图像按钮

  9. :button:匹配按钮

  10. :file:匹配文件框

  11. :hidden:匹配隐藏域

3.9表单对象属性

  1. :enabled:匹配状态可用的表单元素

  2. :disabled:匹配状态不可用的表单元素

  3. :checked:匹配被选中的元素 单选或复选

  4. :selected:匹配被选中的元素 匹配的是option

4.0 JQuery对象与dom对象

4.1什么是dom对象

JQuery笔记(上)

以上方式获取回来的是dom对象,dom对象可以调用dom属性和相关方法,dom对象不能调用JQuery方法。

4.2什么是JQuery对象

JQuery笔记(上)

以上方式获取回来的是JQuery对象,其实,jQuery对象本身就是一个数组,选择器匹配回来几个数组元素,jQuery对象(数组)长度就是元素个数。每个jQuery对象下的某个元素都是一个dom对象。

4.3dom对象与JQuery对象的相互转换

1)JQuery对象转dom对象

语法: JQuery[0]或JQuery.get(0)


JQuery笔记(上)

2)dom对象转JQuery对象

语法: $(dom)

JQuery笔记(上)


5、属性操作

5.1基本属性

  • attr(name):获取指定属性的值

  • attr(key,value):获取指定属性的值

  • attr(properties):一次设置多个属性的值,要求参数必须是json对象

  • attr(key,fn):通过一个函数的返回值设置指定属性的值

  • removeAttr(name):删除指定的属性

JQuery笔记(上)

5.2css

  • addClass(class):添加样式

  • removeClass(class):移除样式

  • toggleClass(class):切换样式

  • hasClass(class):判断是否使用了摸个样式,返回true:有,false:没有

JQuery笔记(上)


5.3html/文本/值

  • html()

  • html(val)

  • text()

  • text(val)

  • val()

  • val(val)

JQuery笔记(上)

6、css操作

6.1 基本css

css(name):获取指定样式的值
css(name,value):设置指定样式的值
css(properties):一次设置多个样式的值,要求参数的json对象

JQuery笔记(上)

6.2 位置

offset():获取元素的位置,返回json对象,包含left和top属性
offset(coordinates) :设置元素的位置,要求参数json对象,必须包含left和top

JQuery笔记(上)

6.3尺寸

width():获取宽度
width(value):设置宽度
height():获取高度
height(value):设置高度


JQuery笔记(上)

7、事件编程

7.1页面载入

js中

window.onload=function(){ //页面初始化}

JQuery中封装了方法用于页面加载

$(document).ready(function(){ //页面初始化});

7.2基本事件

change(fn):内容改变
click(fn):点击
dblclick(fn):双击
focus(fn):获取焦点
keydown(fn):键盘按下
keyup(fn):键盘抬起
keypress(fn):键盘点击
load(fn):页面加载
unload(fn):页面关闭
mousedown(fn):鼠标按下
mouseup(fn):鼠标抬起
mousemove(fn):鼠标移动
mouseover(fn):鼠标经过
mouseout(fn):鼠标离开
resize(fn):改变尺寸
scroll(fn):滚动条滚动
select(fn):选择内容
submit(fn):提交按钮

6.3事件切换

hover(over,out)
#over:鼠标经过时执行的事件处理程序
#out:鼠标离开时执行的事件处理程序
toggle(fn,fn)
#当鼠标点击时的事件绑定
#第一次点击时触发第一个事件处理程序
#第二次点击时触发第二个事件处理程序

JQuery笔记(上)

7.4事件处理

bind(type,[data],fn)
#绑定事件
type:事件名
[data]:事件发生时传递的参数
fn:事件处理程序

JQuery笔记(上)

bind({type:fn,type:fn})

JQuery笔记(上)

one(type,[data],fn)
绑定事件,只触发一次
type:事件名
[data]:事件发生时传递的参数
fn:事件处理程序

JQuery笔记(上)

unbind([type])

JQuery笔记(上)

7.5事件冒泡

什么是事件冒泡,之所以称之为冒泡,是因为事件会按照dom层次结构向水泡一样上升至最顶端

<body><div>

</div>

</body>

取消事件冒泡

function display(event){

JQuery笔记(上)

7.6默认行为

有些html元素会有自己的行为,如:点击按钮时提交表单

<form>

阻止默认行为

function display(event){

JQuery笔记(上)


8、效果

8.1基本

show():显示show(speed,[callback]):以动画效果显示
hide():隐藏hide(speed,[callback]):以动画效果隐藏
toggle():显示或隐藏(切换)
toggle(switch):显示或隐藏,要求的参数true或false
toggle(speed,[callback]):以动画效果显示或隐藏
以上函数speed参数支持一下值:
"slow":缓慢
"normal":正常
fast":快速

JQuery笔记(下)

8.2、滑动

slideDown(speed,[callback]):向下滑动(显示)
slideUp(speed,[callback]):向上滑动(隐藏)
slideToggle(speed,[callback]):滑动切换

JQuery笔记(下)

8.3、淡入淡出

fadeIn(speed,[callback]):淡入(显示)
fadeOut(speed,[callback]):淡出(隐藏)
fadeTo(speed,opacity,[callback]):淡入淡出到指定值

JQuery笔记(下)

9、文档处理

9.1插入

内部插入:<div>abcjQuerydef</div>

append(content):在元素的内部最后插入数据
appendTo(content):将匹配到的元素插入到指定内容的后面
prepend(content):在元素内部前面插入数据
prependTo(content):将匹配到的元素插入到指定内容的前面

JQuery笔记(下)

外部插入:abc<div>jQuery</div>def

after(content):在元素的后面插入数据
before(content):在元素的前面插入数据
insertAfter(content):将匹配元素插入到指定内容的后面
insertBefore(content):将匹配元素插入到指定内容的前面

JQuery笔记(下)

9.2删除

empty():清空元素内容,但元素本身保留
remove():删除元素,将元素本身删除

JQuery笔记(下)

9.3复制

clone():复制匹配的元素
clone():复制匹配的元素,同时也复制它的事件机制

JQuery笔记(下)

9.4替换

replaceWith():将匹配到的元素替换成指定的内容

JQuery笔记(下)

9.5包裹

<div>jQuery</div>

wrap():对匹配的元素使用指定的内容进行包裹
wrapAll():对匹配的的元素使用指定的内容进行包裹(仅包裹一次)
wrapInner():对匹配元素的内容进行包裹

JQuery笔记(下)

9.6查找

eq(index):匹配指定索引的元素
$('div').eq(3) 匹配索引为3的div
filter(expr):匹配过滤的元素
$('div').filter('.cls1') 匹配使用cls1的所有div
not(expr):匹配除了指定元素之外的所有元素
$('div').not('.cls1') 匹配除了使用cls1的所有的div
children([expr]):匹配所有子元素
$(‘product’).children(‘name’).text();

JQuery笔记(下)

10、插件机制

10.1插件机制语法

如:我们在使用jQuery时,有时常用的方法jQuery并没有封装,我们还需要反复使用这样的方法,如何解决这个问题?

语法:

通过jQuery.fn.extend方法对jQuery功能进行扩展,这个方法要求参数是一个json对象

对象的属性名是扩展方法名,属性值就是函数体。

JQuery笔记(下)

11、each语句

each(callback):循环执行callback
  • each方法的功能:

  • each方法用于遍历jQuery对象

  • jQuery对象有几个元素,那么each方法中指定的函数就会自动执行多少次

  • 每次遍历时,将当前元素的下标放在参数i中

  • 每次遍历时,将当前元素本身放在参数item中

JQuery笔记(下)


12、JQuery中的Ajax应用

12.1Ajax原生代码

var xhr=new XMLHttpRequest();
xhr.open(‘post’,’demo.php’);
xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);
xhr.onreadystatechange=function()
{ 
 if(xhr.readystate==4 && xhr.status==200)
 { //处理语句

12.2JQuery中的Ajax

JQuery中实现Ajax功能的方法主要用一下:

JQuery.ajax(option)
JQuery.get(url,[data],[callback])
JQuery.post(url,[data],[callback])

(1)jQuery中底层的ajax实现

  • async :是否异步 true:异步(默认) false:同步

  • cache :是否缓存

  • complete :当ajax对象的状态码为4时执行的函数

  • contentType :请求头

  • data :传递的参数,要求是一个字符串

  • dataType :期望得到的数据类型

  • success :ajax对象状态码为4并且http响应状态码为200时所执行的函数

  • type :请求类型 get post

  • url :请求地址

JQuery笔记(下)

jQuery中高级的ajax实现

jQuery.get(url,[data],[callback],[type])

JQuery笔记(下)

12.3解析xml数据

<users>
<user>
<username>wangcai</username><password>222222</password>
</user>
<user>
<username>xiaoqiang</username><password>111111</password>
</user>
</users>
var person=$(msg).find(“person”);
person.children(“name”).text();
person.children(“jian”).text();
person.children(“cheng”).text();

JQuery笔记(下)

12.4解析json数据

var count=msg.length;
for(var i=0;i<count;i++){

JQuery笔记(下)

13、跨域请求

13.1什么是跨域请求

跨域请求如突图

JQuery笔记(下)

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。JQuery笔记(下)

13.2解决跨域请求问题

(1)使用script标签向另一个域上的资源进行请求,传递参数fn,保存将来要执行的js函数名。

JQuery笔记(下)

(2)JSONP是一个非官方的协议,它允许在服务器端集成script tags返回至客户端,通过javascript callback的形式实现跨域访问。

JQuery笔记(下)

13.3jQuery解决跨域问题

$.ajax get 
$.get gets
$.getJSON get

JQuery笔记(下)


******************

学习JavaScript必知的一些基础知识

  1. 介绍js的基本数据类型如下:

Undefined、String、Boolean、Number、Null

2. js有哪些内置对象?

数据封装类对象:Object、Array、Boolean、Number 和 String

其他对象:Function、Arguments、Math、Date、RegExp、Error

3. this对象的理解

this总是指向函数的直接调用者(而非间接调用者);

如果有new关键字,this指向new出来的那个对象;

在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window。

4. eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行;

应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。

由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval('('+ str +')')。

5.call() 和 apply() 的区别和作用?

apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。

如:function.apply(this,[1,2,3]);

call()的第一个参数是上下文,后续是实例传入的参数序列。

例如:function.call(this,1,2,3);


6. null和undefined的区别体现在哪儿?

null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

undefined:

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数就等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)如果函数没有返回值时,就会默认返回undefined。

null:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

7. new操作符具体可以干什么呢?

(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。

(2)属性和方法被加入到 this 引用的对象中。

(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

8. JSON 的知识点

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

格式:采用键值对。例如:{'age':'12', 'name':'back'}

9. DOM怎样添加、移除、移动、复制、创建和查找节点

// 创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

// 添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

// 查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)

getElementById() //通过元素Id,唯一性

10. 如何获取UA?

function whatBrowser() {

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

}

  评论这张
 
阅读(47)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017