jq1

Jquery(javascript库(工具))

一、Jquery简介

1、什么是jquery？

jQuery是一个快速、简洁的JavaScript库。

简单的说就是封装JavaScript常用的功能代码,更方便我们操作html文档,丰富DOM操作。

 

如：获取页面上面的一个id为box的元素：

js原生：var box = document.getElementById(‘box’);

jquery方式 var box = $(“#box”);

 

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

 

2、下载jquery

第三方网站下载地址:

  http://www.jq22.com/jquery-info122 

 

 

jquery官方网站下载地址:

     http://jquery.com/download/ 

 

 

下载后一般有以下两个文件，其中带min的压缩过的，网络间传输更省流量。

 

 

 

 

 

建议大家使用1.8.3版本的，因为稳定。

在控制台输入$.fn.jquery可以查看出当前网站使用jquery的版本号：

 

 

 

与jquery类似的库：zepto.js http://www.css88.com/doc/zeptojs_api/ 

 

 

 

 

3、引入jquery

 

 

查看是否引入成功：

 

 

 

 

 

 

 

 

 

 

4、快速入门

①使用原生的js代码来实现点击按钮显示或者隐藏div

 

 

 

 

 

②使用jQuery代码来实现点击按钮显示或者隐藏div

 

 

效果：

 

 

 

 

 

 

 

 

 

 

二、jquery选择器

1、什么是选择器？

就是选择页面上元素的一种工具。

类似于js中获取指定id元素，document.getElementById();

类似于js中获取指定class元素,document.getElementsByClassName();

类似于js中获取指定标签元素,document.getElementsByTagName();

上面是js元素的选择器，换成jquery方式如下：

$(“#id”) , $(“.class”) , $(“标签”)

 

在jQuery中选择器可以分为九大选择器，分别为：基本、层级、简单、内容、可见性、属性、子元素、表单、表单对象属性。详情查jQuery手册：

 

 

 

 

 

 

 

2、基本选择器的使用

使用语法:

$(“选择器”)

 

 

说明:

l #id:通过标签的id属性值获取元素(开发使用最多)

l element:通过标签的名字获取元素

l .class:通过标签class类名获取元素(开发使用最多)

l selector1,selector2:通过逗号隔开获取指定选择器的元素

 

 

 

实例代码：

 

 

结果：

 

 

 

 

 

注意：获取匹配到元素的个数可以使用jquery对象调用属性length或者size()方法：

 

 

 

 

 

3、层级选择器的使用

 

 

 

说明:

l ancestor  descendant :后代选择器, 获取祖先下面的子孙元素

l parent>child : 子元素选择器,匹配父元素下面的指定的子元素

l  prev + next : 相邻元素选择器 匹配当前元素的下一个兄弟元素 要求这两个元素必须是相邻的

l prev~siblings : 兄弟元素选择器  匹配当前元素下面的所有的指定的兄弟

 

实例代码:

 

 

 

 

 

 

 

 

 

注意：如果使用选择器匹配到了多个元素，在使用html方法获取内容时，只会获取匹配到第一个元素中的内容

 

 

 

4、简单选择器的使用

 

 

说明:

l :first  匹配第一个元素

l :last 匹配最后一个元素

l :even 匹配下标值为偶数的所有元素

l :odd  匹配下标值为奇数的所有元素 

l :eq(index) 匹配下标为指定值的元素

l :gt(index) 匹配下标大于指定值的所有元素

l :lt(index) 匹配下标小于指定值的所有元素

l :not(selector) 匹配除了指定选择器以外所有元素

 

实例代码:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5、属性选择器的使用

 

 

说明:

l l[attribute]   匹配指定属性的元素

l l[attribute=value] 匹配属性等于指定值的元素   input[name=username]

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

l l[attribute^=value]  匹配属性以指定值开头的元素

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

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

l l[selector1][selector2][selectorN]   任意多个属性选择器

 

实例代码：

 

 

 

 

 

 

 

 

 

 

6、表单选择器的使用

 

 

 

说明:

l l:input 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)

l l:text 匹配单行文本框  <input type=”text”

l l:password 匹配单行密码框  <input type=”password”

l l:radio   匹配单选按钮

l l:checkbox 匹配多选按钮    :submit 匹配提交按钮$(":submit")

l 

l l:reset 匹配重置按钮

l l:image  匹配图片按钮

l l:button 匹配普通按钮

l l:file   匹配文件上传

l l:hidden 匹配隐藏域  如果要匹配表单隐藏域一定要加上input标签 如：$(“input:hidden”)    

 

实例代码：

 

 

 

 

 

 

 

 

 

7、表单属性选择器的使用

 

 

 

说明:

l l:enabled 匹配表单控件可用的

l l:disabled 匹配表单控件不可用的

l l:checked 匹配被选中的  单选按钮和多选按钮

l l:selected 匹配被选中的  下拉列表

 

实例代码：

 

 

jq代码：

 

 

 

 

重点掌握以下几个选择器的用法：

id和class选择器

标签配合属性一起使用的选择器

表单属性选择器

 

 

 

三、[重点]DOM对象和jquery对象

1、什么是DOM对象

就是通过原生的js中的方法来获取到的对象，如下： 

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName ()

称之为DOM对象

2、什么是jquery对象

就是通过jquery选择器$(“选择器”)获取到的对象称之为jquery对象.

 

 

3、DOM对象和jquery对象的关系

①jquery对象结结构图:②DOM对象结结构图:

 

效果：

 

 

 

 

 

 

jQuery对象中包含了DOM对象，DOM对象它是以数组元素的方式添加在jQuery对象中！

 

问：jQuery对象与DOM对象的方法是否能够相互的使用！

jQuery对象是否能够使用DOM对象的方法、属性、事件！

DOM对象能否使用jQuery对象的方法！

答案:都是可以的,如果要调用对方的方法 那么就需要将该对象进行相互的转换！

 

 

4、DOM对象和jquery对象互相转换

 

①jquery对象转化为DOM对象

方式一（建议使用）:

jquery对象[下标值] 转化为对应下标的DOM对象

 

 

 

方式二:

jquery对象.get(下标值)                  转化为对应下标的DOM对象

 

 

 

 

 

 

②DOM对象转化为jquery对象

$(DOM对象)     将DOM对象转换为jQuery对象

 

 

 

注意：

l jQuery对象它本身只能调用jQuery对象的方法 和属性

l DOM对象它本身也只能调用DOM对象的属性、事件、方法

l 如果需要调用对方的方法需要转换成对应的对象才可以调用

 

函数内的this问题？DOM对象还是jquery对象？

this是DOM对象，

$(this)是jquery对象

$就是jQuery库提供的一个函数  $==jQuery

 

 

 

 

 

 

 

 

 

 

四、事件

1、页面载入事件

 

jq语法:
页面加载DOM结构树(不包含资源)加载完毕执行

方法一:

$(document).ready(function(){

//do something

});

方法二(简写方式):建议此方法

$(function(){

//do something

});

js语法:

等待页面DOM树结构并且资源(外部js、img、css)加载完毕后执行

window.onload=funtion(){

//do something

}

 

$(document).ready(function(){ })或$(function(){ });的方法速度快于window.onload=function(){},因为不需要加载外部的资源，建议使用$(function(){ });

 

代码如下:

 

 

 

 

 

 

 

 

2、jQuery事件绑定

注意：在jquery中事件都是不要加on前缀，原生需要加on

（1）通过事件名直接绑定

语法：事件名( function(){} )

 如：click( function(){} )

 mouseover( function(){} )

 (2)在jq中可以使用bind方法进行事件的绑定：

l bind(type,fn) ：对事件进行绑定 只能绑定一个事件

参数说明：

type：指事件名  但是这里的事件名不带on前缀

fn：匿名函数  事件的处理程序

l bind({type:fn,type:fn})：对事件进行绑定  可以绑定多个事件

参数说明：

要求是一个JSON对象

type：指事件名  但是这里的事件名不带on前缀

fn：匿名函数  事件的处理程序

l unbind([type]) ：对事件进行解绑  

参数说明：

type：可缺省    type指的事件名  如果没有写指定的事件名 则表示将所有的事件都解绑！如果有写指定的事件  那么就表示解绑指定的事件

(3)在jq中可以使用on方法进行事件的绑定：

说明：on方法不仅可以对节点绑定事件，还可以对属于某一块区域内的节点进行事件绑定。

特别的功能：on方法对后面动态的增加的节点也会有事件绑定。

l on( type,[selector],fn)：对事件进行绑定

参数说明：

 type：指事件名  但是这里的事件名不带on前缀

 selector：选择器，对匹配到的元素进行事件绑定

fn：匿名函数  事件的处理程序

 

 

事件名和bind方式绑定：

 

 

 

注意：以上通过事件名和bind方式绑定只能对页面上面的已存在的元素绑定事件，后面新增的元素无法绑定事件，可以采用on绑定事件的方法来解决这个问题。

 

 

on事件绑定：

注意：on方法对后面动态的增加的节点也会有事件绑定

 

 

 

 

 

 

 

3、一次性事件

l one(type,fn)：绑定一个一次性的事件处理函数

参数说明：

type：指事件名  但是这里的事件名不带on前缀

fn：匿名函数  事件的处理程序

 

 

 

事件对象阻止默认行为和冒泡发送：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4、基本事件

注意一点：jQuery它把原生的JavaScript中的事件封装成对应的事件方法  并且去掉了on前缀 。

除了以上使用bind方法绑定一个事件，可以直接通过以下的事件名称来绑定：

如:onclick===>click

 

l blur(fn) 当失去焦点时

l change(fn) 当内容发生改变时

l click(fn)  当鼠标单击时

l dblclick   当鼠标双击时

l focus(fn)  当获取焦点时

l keydown(fn)  当键盘按下时

l keyup(fn)  当键盘按下并抬起时

l mousedown 鼠标按下触发（按住不放只会触发一次）

l mouseup鼠标按下并抬起时触发

l mouseover(fn) 当鼠标经过时

l mouseout(fn) 当鼠标离开时 

l submit(fn) 当表单提交时

 

 

 

 

 

 

5、事件切换

l hover(over,out)

作用：hover它是专用于实现鼠标经过与鼠标离开   

参数说明：

要求这两个参数必须是匿名函数

over：表示鼠标经过

  out：表示鼠标离开

 

l toggle(fn1,fn2……)：鼠标第一次单击的时候触发第一个fn函数，鼠标第二次单击的时候触发第二个fn函数，如果没有传递参数，默认在显示和隐藏之间进行切换。

 

①hover事件代码如下：

 

 

 

 

②toggle单击开关事件代码如下：

 

 

 

 

 

 

 

 

 

 

 

 

五、jquery中的常用方法

1、attr属性操作

具体用法:

attr(key) : 获取属性key的值

attr(key,value) : 设置一个属性值

attr( {key1:value1,key2:value2} ) : 设置多个属性值,传入的参数是一个json对象{}

removeAttr(key) : 删除对象的key的属性

 

实例代码：

 

 

 

 

 

 

 

 

 

 

 

2、class类名操作

具体用法:

addClass(“key”) : 添加一个class类名为key,添加多个用逗号隔开

removeClass(“key”) : 删除class类名为key

toggleClass(“key”) : 切换class类名为key,无则添加,否则删除

 

实例代码：

 

 

 

 

 

 

3、css样式操作

基本用法:

css(“color”) : 获取color样式

css(“color”,”red”) : 设置color样式为red值,设置多个传递一个json值{}

css({});

 

实例代码：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4、文本和值的操作

基本用法:

html() : 获取非表单元素(span,div,li,h1)中的内容(内容包括标签)

html(text) : 设置非表单元素(span,div,li,)中的内容(内容包括标签)

text() : 获取非表单元素中的内容，不包括标签

val() : 获取表单元素(input,select,radio)中的value属性中的值

val(val) : 设置表单元素(input,select,radio)中的value属性中的值

 

实例代码：

 

html:

 

 

jq代码：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5、尺寸的操作（了解）

 

 

实例代码：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

六、案例-表格隔行换色

1、用原生js代码实现：

 

 

 

 

 

 

 

2、用jq代码实现

 

 

 

 

七、显示和隐藏密码

 

js:

 

 

jq: