独家新闻日记

红山果,掠天记,overlord-第二视角新闻

一、什么是Jquery?

其实超级简略,不要把它想的太难了,Jquery便是一个js(javascript)类库。

1.1、什么是js类库?

[JavaScript库封装了许多预界说的方针和有用函数,来协助运用者树立有高难度交互客户端页面,并且兼容各大浏览器],看到这句话应该就知道了,浅显点讲,js类库便是他人将一些功用写好了封装成了函数,而咱们直接拿过来调用即可,这便是js类库。

1.2、什么是Jquery?

Jquery是js类库的一种,其长处有许多,百度一下根本上就知道了,这儿将搜集的一些大白话罗列出来,看看即可。

1、开源免费,供给许多插件

2、jQuery是继prototype之后又一个优异的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器[来自百度百科]

3、它的文档阐明很全,并且各种运用也说得很详细,一同还有许多老练的插件(aptana)可供挑选。jQuery能够使js代码和html内容别离(阐明文档的确很全很详细,下面就会带着一同读文档,进行操作。)

4、jQuery 标语:The Write Less, Do More

5、待自己去查询和发现吧~

二、运用Jquery

知道了什么是Jquery,那么接下来就要知道怎么运用它。

2.1、导入js库

jQuery有许多版别,介绍一下各种版别的运用环境

jquery-1.8.3.js:一切的源码,比较大。开发进程运用

jquery-1.8.3.min.js 紧缩的版别(不易于阅览)出产环境运用(导入项目中可能会报错,报错的话先删去,等在出产环境时在导入运用)

即将运用的jQuery版别的.js导入项目中,



2.2、Jquery的方针的获取

在导入了js库之后,就能够在页面中运用js库了,这儿也便是运用jQuery,获取jQuery的两种办法


//语法: jQuery 或 $
//#username:是获取一个id=username的结点(元素) 等价于 //document.getElementById("username"); 差异在于前者归于jQuery的办法获取,或许属//于运用原始dom的办法获取
// 办法1 jQuery,
//var $username = jQuery("#username");
// 办法2 $ 一般jQuery方针的变量名都会运用$最初进行命名,一种习气,不//有用也能够
var $username = $("#username");

alert($username.val());



获取jQuery的两种办法

2.3、dom和Jquery的转化

jQuery方针能够看作将dom方针(javascript的原始内容)进行的封装,然后运用jQuery方针就只能够调用jQuery界说的函数(办法)或特点了,而dom方针就只能够调用dom方针的特点和函数,不能混杂调用。 留意:一定要差异dom方针和jQuery方针的运用,不要混杂,运用jQuery的函数时,留意看回来值是dom方针仍是什么,比方get(0)回来的便是dom方针,流个小心眼。

//1 取得dom方针 (javascript 原始内容)
var username = document.getElementById("username");
// * 打印value值,调用特点
//alert(username.value);

//2 将dom方针,转成jQuery方针
// * 主张:jQuery变量名运用$最初
var $username = $(username);
//alert($username.val());//调用办法来获取特点值

//3 jQuery 方针 转化 dom方针
// 办法1:jQuery取得方针,内部是一个数组,假如只要一个方针时,能够经过下标0获取
var obj1 = $username[0];
//alert(obj1.value);
// 办法2:jQuery 供给函数 get 取得指定下标方针
var obj2 = $username.get(0);
alert(obj2.value);


//留意:jQuery方针 只能运用 jQuery的函数或特点
// dom方针 只能运用dom的函数和特点
// 互相不能彼此调用。例如: $username.value 过错的

2.4、查询jQuery文档来学习jQuery供给了哪些功用?

2.4.1、文档解说

咱们将学习该文档中的一切功用,其实也便是大约过一遍,知道哪块是什么意思就行,详细的用法该文档中都会有详细的运用规矩介绍,真的十分详细。我会带着咱们看几个,然后顺次类推,即可。

2.4.2、挑选器

分为九种,其根本功用便是为了选取页面html中的特定的元素。

[根本挑选器、层级挑选器、根本过滤、内容过滤、可见性过滤、特点过滤、子元素过滤、表单过滤、表单方针特点过滤]

2.4.2.1、根本挑选器

5种,超级简略,咱们来对着文档解析一个个看。

#id:依据给定的ID匹配一个元素。假如挑选器中包含特别字符,能够用两个斜杠转义。拜见示例。(详细把。比方都有,所以说不明白,不会用,不要紧,查文档)

element:依据给定的元素名(标签名)匹配一切元素

.class:经过class挑选,有必要.最初 。

。例如:$(".myClass");文档图略

*,匹配一切元素

s1,s2,s3...,将多个挑选器兼并,多个之间运用逗号分隔。 例如:$("#id,.myClass");

2.4.2.2、层级挑选器

便是在标签和标签之间中选取,比方选取父标签下的特定的标签。

A标签 B标签 , 表明A标签中一切子孙的B标签 (爷孙)

A标签>B标签,表明A标签一切子标签中的B标签(父子)

A标签+B标签,表明A标签的第一个兄弟标签(兄弟)

A标签~B标签,表明A标签之后的一切兄弟标签(兄弟)

2.4.2.3、根本过滤

略,检查文档就懂了

2.4.2.4、内容过滤

略,检查文档就懂了

2.4.2.5、可见性过滤

略,检查文档就懂了

2.4.2.6、特点过滤

略,检查文档就懂了

2.4.2.7、子元素过滤

略,检查文档就懂了

2.4.2.8、表单过滤

略,检查文档就懂了

2.4.2.9、表单方针特点过滤

略,检查文档就懂了

2.4.3、特点

这个略微解说一下,上面选取到了某个特定的元素(标签)或许几个元素,

特点的函数来对其内容进行检查或许修正,

css类的话,能够修正(移除,增加)class款式,toggleClass是经过判别一个boolean值来取决运用什么款式。

HTML代码/文本/值这个比较有意思

val:表明获取特点的值,比方获取input标签中的value值,val(xxx)有参数 则给value特点赋值为xxx。

text:表明获取某个标签的文本内容,也便是

xxx

获取xxx的内容,text(xxx),给某个标签的文本赋值。假如增加标签,直接显现

html:跟text功用差不多,可是能够设置css款式,假如增加标签,浏览器需求解析

详细检查文档。

2.4.4、CSS

检查文档,方位和款式的处理

2.4.4、文档处理

上面了解的,都是怎么选取特定的元素,然后怎么修正款式或许内容。文档处理做的便是增加删去修正仿制元素等等的操作,比方,在A标签之后增加一个B标签,相似这种,详细检查文档。

2.4.5、挑选

挑选跟挑选器中的过滤是差不多的,差异就在于,挑选供给函数,而过滤的不是。一般过滤都是从jQuery方针中有许多个元素(也便是数组中有多个元素),需求从中获取到咱们想要的jQuery方针,进一步过滤,可是不能运用get()或许array[0],由于此种办法获取到的是dom方针,而不是jQuery方针,所以需求运用挑选或许挑选器中的过滤,来到达意图。详细检查文档把。

2.4.6、事情

事情,解说几个常用和重要的,其他看文档。

这个应该比较有意思。也比较重要。

1、页面载入:ready(fn):这个便是讲javascript代码写在页面最上面所需求用的函数,作用便是等页面悉数加载完,然后在来加载js代码。有两种办法,代码如下

//办法1
$(document).ready(function(){ // $ == jQuery
....
});
* 变种
jQuery(document).ready(function(){ // $ == jQuery
....
});

//办法2
$(function(){
.....
});

2、focus和focusin比照

focus:两种用法,focus():使方针取得焦点,focus(fn):取得焦点触发事情,子元素[不触发]父元素事情[]

fosusin(fn):取得焦点触发事情,子元素[触发]父元素事情

1、2都是对父元素进行焦点动身事情,所以就能够进行比照。


$(document).ready(function(){
//1 js focus 子元素[不触发]父元素事情
/*
$("#outerDiv").focus(function(){
alert("focus");
});
*/
//2 js focusin 子元素[触发]父元素事情
/*
*/
$("#outerDiv").focusin(function(){
alert("focusin");
});
});



//省掉html的代码。html的代码展现图便是上面的图。

3、blur 和 focusout 失掉焦点

4、mouseover 和 mouseenter 移进某个区域触发事情

mouseover , 假如鼠标指针穿过任何子元素,同样会触发 mouseover 事情

5、mouseout 和 mouseleave 移出

事情处理:

1、on:对元素进行事情的绑定。

2、off:对元素上的事情进行解绑

3、bind:绑定事情,一向运用,直到解绑

例如:$username.bind("click",function(){}) 等价于 $username.click(function(){});

4、unbind 解绑事情

绑定是能够指定别号 ,格局: 事情.别号

bind("click.xxx",fn)

unbind("click.xxx")

5、触发:在每一个匹配的元素上触发某类事情。

trigger() 触发一切的事情(包含浏览器默许的)

triggerHandler() 触发一切的事情(不包含浏览器默许的)

事情派遣

1、live jQuery 给一切匹配的元素附加一个事情处理函数,即便这个元素是今后再增加进来的也有用

给A标签增加事情,之后再追加a标签都具有相同的事情

2、die 解绑

2.4.7、作用

这个便是对元素进行躲藏啊,动态显现进行设置

2.4.8、AJAX

藏着下一节解说把~

三、总结

经过这一章节,

3.1、知道了什么是jQuery?

3.2、jQuery的运用办法和怎么经过文档进行学习?仍是那句话,不会的查文档,查文档

明日:解说一下jQuery对Ajax的的运用。和对jQuery进行沉积(几个小的demo)。这一章是学会怎么运用jQuery,下一节算是小实战把。哈哈~ 加油。

======本文转载于博客园续杯凉茶的个人博客=====

82475232970//p1.pstatp.com/large/593c0000f2fa1a82d2c5[{"name":"jQuery"},{"name":"JavaScript"},{"name":"百度"},{"name":"浏览器"},{"name":"HTML"}]1561334460

相关文章