jQuery的前端框架

jQuery概述

JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。
核心理念是write less,do more(写得更少,做得更多)

当前流行的 JavaScript 库有：

jQuery 使用非常多 , EXTJS 功能比jQuery更多,但ext2.0收费,Prototype 一般用于做框架,YUI! (Yahoo! User Interface)
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

jQuery介绍

jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。
jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。由美国人John Resig在2006年1月发布,jQuery是免费、开源的。

jQuery分类：

WEB版本：我们主要学习研究 （jQuery-版本.js 、 jQuery-版本-min.js）
UI版本：集成了UI组件
mobile版本：针对移动端开发
qunit版本：用于js测试的
jquery官网 http://jquery.com/

常用版本介绍：

min版是上线版本，没有换行符等，节省存储空间。
1.4.* 旧版的稳定版本
1.8.* - 1.9.* 学习使用版本
1.11.* 最新的版本
2.1+* 2.0后的版本不再兼容低版本的IE浏览器

jQuery的封装

  • js只有一个全局代码区，声明变量的时候出现同名的概率比较高，也就是容易造成覆盖
  • 使用命名空间,将代码挂载到某个对象下，但是仍然存在对象被覆盖的风险
  • 工厂模式封装：将对象封存起来，让代码更加的具备完整性，但是依然存在被覆盖的风险
  • 不要函数名字，虽然解决了被覆盖的风险，但是无法进行调用了
  • 使用自己调用自己的方式可以实现函数的调用，但是只能调用一次，在页面加载的时候
  • 闭包原理：使用更大作用域变量或者大家同一认可的变量将执行一次就会消失的内容记录下来，实现重复调用

jQuery使用

jQuery的基本操作

jQuery同dom操作的原理相同,同样的获取元素对象,修改其样式、属性、文本等’，只是简化了代码.

  • 获取jQuery对象的三种方式

语法：$(选择器或者DOM对象)或jQuery(选择器或者DOM对象) ,$==jQuery,方式的区别是因为封装原理，包装对象所形成的语法特点。含义是相同的。

    // $() 语法，建议：如果是jQuery对象变量名使用$作为前缀
    var  $obj = $("#username");
    // jQuery() 语法. 
    var  $obj = jQuery("#username");
  • jQuery对象和DOM对象相互转换

注意:jQuery对象使用jquery的api（方法、函数）。DOM对象使用 dom 的函数、属性等。不能混淆使用。

    /*dom对象转化为jquery对象*/
    var obj = document.getElementById("div2");
    /*转化操作*/
    var $obj = $(obj);
    alert($obj.text() + "第二次");
    
    /*jQuery对象转化文dom对象*/
    var div2 = $("#div2");
    //先通过 $(...) 获得jQuery对象，底层使用数组进行维护的，可以存放多个对象。
        //然后通过get()可以从jquery对象转换成 dom对象。参数：数组的下标，可以省略。如果省略下标获得dom 数组。
    var obj2 = div2.get(0);
    alert(obj2.outerHTML + "第三次");
jQuery的选择器（重点）

jQuery的选择器的设计原理和CSS选择器的选择器设计理念相同。

  • 基本选择器的使用

// id选择器
// 标签演示 ：<标签  id="id值">
// 语法:
$("#id");

// 标签（元素）选择器
// 语法：
$("标签名");

// 类选择器
// 标签元素：<标签 class=”class名称”>
// 语法：

$(".class名称")

// 通配符选择器：
// 语法：$(“*”)   <!—选择所有的标签元素-->

// 多选择器选择;
// 语法：     $("选择器1，选择器2，....")表示的是同时满足两种选择器的元素。

$(“#id,.class”)
  • 层级选择器

定义: 即Ancestor（祖先）和descendant（后代）之间的关系，返回值是集合的形式Array(Elements)。


// 所有子孙元素
// 关系: Ancestor descendant    //给定祖先下的匹配所有的后代元素
/* 语法：*/  $("A  B")  -->     //A标签中 所有的B标签

// 所有孩子元素
// 关系：parent > child         //给定父元素下的匹配所有的子元素
/*语法：*/   $("A > B")  -->    //A标签中 所有的子标签中B标签

// 后面第一个兄弟
// 关系：prev + next            //匹配所有紧接在prev后的next元素
/*语法：*/   $("A + B")  -->    //A标签后面的第一个兄弟元素

//后面的所有兄弟
//关系：     prev ~ siblings   //匹配prev之后的所有siblings元素
/*语法：*/   $("A ~ B")  -->    //A标签后面的所有兄元素
  • 过滤器的使用

基本过滤选择器

语法规则1： $("A：过滤类型")  -> A标签（或元素）元素经过过滤后的所有元素
注意：常见的过滤器有节点顺序的属性，表单元素过滤的属性(当过滤类型唯一也可以：  $(“:过滤器”))，内容过滤属性，可见性过滤，子元素过滤

属性过滤器

语法规则： $("A[attr=’attrValue’]")  --> A标签(或元素)元素经过属性值过滤后的元素
jQuery操作样式属性（重点）

操作样式就是操作：属性,类class,html代码/文本/值,css,位置,尺寸
语法规则：css(参数个数)，text(参数个数)，attr(参数个数)，html(参数个数)
参数个数：一个参数表示获取当前选择的值（也可以是传入JOSN格式批量设置属性）， 两个参数表示设置指定属性的值

  • 操作CSS样式

//直接设置样式的值      
$div.css("border", "1px solid red");
//获取指定样式的值
alert($div.css("border"))
//通过JOSN的方式设置样式的值
$div.css({
    "width":"100px",
    "height":"100px",
    "background-color":"#ff0"
});
  • 操作class属性操作样式

//操作的是标签的class属性 <标签  class="class名称">
addClass(class名称)     // 追加一个class值
removeClass("class")    // class移除
toggleClass("class")    // 添加和移除切换。如果没有就添加，如果有就移除。
  • jQuery操作标签属性文本
<!-- attr()方法使用 -->
<!-- attr(name)  通过属性名获得属性值。<标签  属性名=“属性值”> -->
<!-- attr(key,val)  给指定的属性设置值。（设置一个） -->
<!-- attr(pro)  给jQuery对象设置一组值。使用JSON格式。 -->
<!-- Pro ->  {key:value , key : value , .....}  key必须使用双引号，value如果字符串也必须使用双引号。使用单引号，属于畸形格式json -->
<!-- removeAttr(name) 将执行属性移除 -->



//使用示例：
//标签: <input type=’text’name=’value’>
//语法：

$(“:text”).attr(“name”)  //获取name的属性值
$(“:text”).attr(“name”，“value”)  //设置name的属性值
$(“:text”).removeAttr(“name”)  //删除name的属性值
$(“:text”).attr(｛
       “name1”：“value1”,
“name2”：“value2”,
｝)  //通过JOSN的方式设置一组属性值.

//注意：低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.

html(),val(),text()方法使用

操作的是标签的value属性或者标签体

val() 获得 value属性的值。<标签 value="">
val(值) 设置值

html() 获得标签体内容，以标签方式
html(值) 设置内容

text() 获得标签体内容，以文本方式
text(值) 以文本方式设置内容

注意：text和html的区别，当添加的是标签元素时text会把标签当作文本，html会当作标签。

其他方法的使用

  • 位置

offset() 获得位置，返回json数据。格式：{"top": xx , "left" : yy}
offset(坐标) 设置位置
position() 获得相对父元素偏移
scrollTop([val]) 获得 或 设置 垂直滚动条的位置
scrollLeft([val]) 获得 或 设置 水平滚动条的位置

  • 尺寸

height([val]) 获得 或 设置 高度
width([val]) 获得 或 设置 宽度

jQuery操作文档（重点）
  • 操作结构的方法
  • 内部插入,外部插入,复制,替换,删除,包裹

A.append(B) ，将B插入到A内部的后面。（追加到后面）
A.prepend(B) ，将B插入到A内部的前面。（追加到前面)

A.appendTo(B) , 将A插入到B内部的后面。（追加到后面）
A.prependTo(B) 将A插入到B内部的前面。（追加到前面）

  • 外部插入
    A.after(B)，将B插入到A后面
    A.before(B) ，将B插入到A前面

A.insertBefore(B) ，将A插入到B前面
A.insertAfter(B) ，将A插入到B后面

  • 复制
    clone(event [,deepEven])
    参数1：表示是否克隆事件
    参数2：子元素中绑定数据是否被克隆。

  • 替换
    A.replaceWith(B) 使用B替换掉A
    A.replaceAll(B) 使用A替换掉所有的B

  • 删除
    empty() 清空标签体内容，删除所有子元素
    remove() 将指定对象移除，返回值为移除对象。但此对象将绑定事件，绑定数据都一并移除。
    detach()将指定对象移除，返回值为移除对象。但此对象保留 绑定事件，绑定数据 等。

  • 包裹
    wrap(...) ： 每一个匹配元素使用指定的内容包裹。
    wrapAll(...)：所有的元素使用一个指定的内容包裹
    wrapInner(...)：子节点使用指定的内容包裹。
    unwrap(): 移出该元素的父元素。

each()遍历方法

用法
第一种用法
/*第一种方式*/
$("#b1").click(function(){
    $("input:hidden").each(function(index,dom){
        alert("dom.value" + "===========" + dom.value);             
    })  
})
<input type="button" value=" 选取" id="b2"/>
/*第二种方式*/
$("#b2").click(function(){
    $.each($("input:hidden"),function(){
         alert("$(this).val()" + "===========" + $(this).val());            
    })
})

第二种用法
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
arr[1] = new Array("长春市","吉林市","四平市","通化市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
var $cities = $(arr[$pro]);
$cities.each(function(){
     $city.append("<option>" + this + "</option>");
})
文档的元素筛选的方法

筛选与之前的选择器雷同,筛选提供的都是函数.

  • 过滤

eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始.
first():第一个
last():最后一个
hasClass(...):判断元素是否含有特定的样式
filter(...):筛选出与指定表达式匹配的元素集合
is(...):判断元素是否符合指定的选择器
has(...):含有特定后代的元素
not(...):删除与指定表达式匹配的元素
slice(start,end):从给定的数组中，按照范围截取元素。 [start,end)
map(fn):将一组元素转换成其他数组

  • 查找

children([...]):获取他的所有孩子
closest(...):从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
find(...):查找后代
next():下一个兄弟
nextAll():后面所有的兄弟
nextUntil(...):从下一个兄弟开始,直到指定元素结束
parent():获取父元素
parents():匹配元素的祖先元素的元素(不包含根元素)
prev():上一个兄弟
prevAll():前面的所有兄弟
prevUntil():从上一个兄弟开始,直至指定元素结束
siblings():所有的兄弟

closest和parents的主要区别是：

  1. 前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
  2. 前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
  3. 前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
  • 串联
A.add(B)  将A和B拼凑在一起，等效 $(A,B)
A.children().andSelf()   所有孩子，再添加自己
A.children().end()...  使用end后将返回A位置
contents() 获得所有节点（子元素、文本）  <div>abc<a></a> xxx</div>
jQuery的事件绑定
  • 常见事件概述

focus和focusin 得到焦点
focus 获得焦点
foucsin 获得焦点。可以在父元素上检测子元素获取焦点的情况
blur和focusout 失去焦点
mouseover 和 mouseenter 移进
mouseover , 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件
mouseenter ,如果鼠标指针穿过任何子元素，不会触发 mouseenter 事件
mouseout和mouseleave 移除 同上

  • 页面的载入事件

注意点：页面加载事件可以向下叠加；在一个页面中可以使用多次
原生JS事件也可以同时绑定，但是最后加载。

绑定语法：


//常用格式1:
$(document).ready(function(){
//....
})

//常用格式2: 格式1的简化版
$(function(){
//......
});

//常用格式3:完整版
jQuery(document).ready(function(){
//......
});
  • 事件的处理和委派

处理

on:绑定多个事件
one: 绑定一次事件
bind和unbind
bind:绑定事件,一直使用,直到解绑

例如:$btn1.bind(“click”,function(){}); ===$btn1.click(function(){});

unbind:解绑事件
绑定的时候可以指定别名,格式: 事件.别名

例如: 
bind(“click.c1”,fn);
unbind(“click.c1”);
trigger和triggerHandler
trigger() 触发所有的事件（包括浏览器默认的）
triggerHandler() 触发所有的事件（不包括浏览器默认的）

委派

live jQuery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效,例如给A标签添加事件，之后再追加a标签都具有相同的事件。

事件切换

hover 在mouseover和mouseout之间进行切换
toggle 点击事件切换，点击第一次执行 fn，点击第二次执行fn2.....

jQuery的效果


基本：改变高和宽

show(速度，[fn]) 显示 当显示成功后触发fn
hide() 隐藏
toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。

滑动：改变高度

slideDown ，显示（从上往下）
slideUp，隐藏（从下往上）
slideToggle() 切换

淡入淡出：改变透明度

fadeIn 显示
fadeOut 隐藏
fadeToggle 切换
fadeTo 指定对象透明度

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,468评论 5赞 473
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,620评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,427评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,160评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,197评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,334评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,775评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,444评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,628评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,210评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,767评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2赞 341

推荐阅读更多精彩内容