今天简单的说一下jQuery,说的不好还请指正,感谢.
想要使用jQuery,我们需要先下载
官网:jquery.com/
下载之后,只需在页面中导入即可
<script src="js/jquery.js" type="text/javascript" ></script>
1.DOM对象和Jquery包装集对象
在说jquery之前我们应该先明确DOM对象和jQuery包装集的概念,这将会极大加快我们的学习速度.原始的DOM对象只有DOM接口提供的方法和属性,通过js代码获取的对象都是DOM对象;而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能使用jQuery提供的方法.
1.DOM对象
通过原生js获取的DOM对象.
js中获取DOM对象,DOM对象只有有限的属性和方法.
例:
var div=document.getElementById("divid");
var divs=document.getElementsByTagName("div");
2.jQuery包装集|对象
通过jQuery方式获取jQuery包装集对象
可以说jQuery包装集对象是DOM对象的扩充.在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:
var jQueryObject = $("#testDiv");
只有jQuery对象才能调用jQuery方法
3.相互转换
jQuery包装集对象转DOM对象只需加上包装集的下标即可,即
var domdivs=jQueryObject[0];
DOM对象转jQuery对象:
var jQueryObject=$(domdivs);
4.jQuery核心
"$"符号在 jQuery 中代表对jQuery 对象的引用, "jQuery"是核心对象，通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法
$ <==> jQuery
2.Jquery选择器
和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。
1.基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| id选择器 | #id属性值 | $("#testdiv") 将选取id值为testdiv的元素 |
| 元素名称选择器 | 标签名 | $("div") 将选取所有的div元素 |
| 类选择器 | .class属性值 | $(".blue") 将选取所有class=blue的元素 |
| 选择所有元素 | * | $("*")将选取页面中所有元素 |
| 组合选择器 | 选择器1,选择器2,选择器3 | $("#testdiv,span,.blue")同时选中多个选择器匹配的元素,且有去重功能 |
2.常用表单选择器
| Forms | 名称 | 举例 |
|---|---|---|
| 表单选择器 | :input | 查找所有的input元素：$(":input")；注意：会匹配所有的input、textarea、select和button元素 |
| 文本框选择器 | :text | 查找所有文本框：$(":text") |
| 密码框选择器 | password | 查找所有密码框：$(":password") |
| 单选按钮选择器 | :radio | 查找所有单选按钮：$(":radio") |
| 复选按钮选择器 | checkbox | 查找所有复选框：$(":checkbox") |
| 提交按钮选择器 | submit | 查找所有提交按钮：$(":submit") |
3.过滤选择器
| 名称 | 功能 |
|---|---|
| :checked | 选择素有被选中的元素(单选框,复选框,下拉框) |
| :selected | 获取所有被选中的元素(下拉框) |
| eq(index) | 匹配下标为指定值的元素 |
| gt(index) | 匹配下标大于指定值的元素 |
| even | 匹配下标时偶数的元素 |
| odd | 匹配下标是技术的元素 |
3.Jquery Dom操作
1.操作元素的属性
操作元素的属性有attr()方法和prop()方法
1.获取元素的属性
| 方法 | 说明 |
|---|---|
| attr(属性名称) | 获取指定的属性值,当操作checkbox时,选中返回checked,未选中返回undefined |
| prop(属性名称) | 获取具有true和false两个属性的属性值 |
建议,如果属性的返回值是true或false，使用prop()方法；其他属性使用attr()
2.设置元素的属性
| 方法 | 说明 |
|---|---|
| attr("属性名","属性值") | 为属性赋值,可以是固有属性和自定义属性 |
| prop("属性名","属性值") | 为属性赋值,建议属性为返回值为true和false的 |
3.移除元素的属性
| 方法 | 说明 |
|---|---|
| removeAttr("属性名") | 移除指定属性名 |
2.操作元素的样式
| 方法 | 说明 |
|---|---|
| attr("class") | 获取class样式名 |
| attr("class","样式名") | 设置class样式名 （会将原本的样式移除，设置新的样式） |
| addClass("样式名") | 添加样式名 （会保留的原有的样式；如果出现相同属性的样式，则以在style标签中后定义的样式名为准） |
| css("具体样式名","样式值") | 添加一个具体的样式 （相当于写在style属性中的样式）--建议使用 |
| css({"具体样式名":"样式值","具体样式名":"样值"}) | 添加多个具体的样式 |
3.操作元素的内容
| 方法 | 说明 |
|---|---|
| html() | 操作非表单元素的内容(包含元素中的html标签) |
| text() | 操作非表单元素的纯文本内容(不包含元素中的html标签) |
| val() | 获取表单元素的值,即value |
上述三个方法无参数就是取值,有参数就是赋值
4.创建元素
创建语法:
$("要创建的元素")
5.添加元素
| 方法 | 说明 |
|---|---|
| append(content) | 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 |
| prepend(content) | 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 |
6.删除元素
| 方法 | 说明 |
|---|---|
| remove() | 删除所选元素或指定的子元素，包括整个标签和内容一起删 |
| empty() | 清空所选元素的内容 |
7.遍历元素
使用普通for循环也可以
也可以使用each()方法
用法:
$(selector).each(function(index,element){
console.log("index：" + index);
console.log(element);
})
参数function为遍历时的回调函数
index为遍历元素的序列号,从0开始
element是当前元素,此时是dom元素
function中可以不用放参数
$(selector).each(function(){
console.log(this);
console.log($(this));
});
4.Jquery事件
1.ready()加载事件
ready()加载事件类似于onload事件
语法:
$(document).ready(function(){});
简写版:
$(function(){});
ready()方法可以写多个,按顺序执行 ready事件与onload事件的异同:
- 两个方法都是预加载事件,等页面加载完毕执行的方法
- ready事件当页面的DOM结构加载完毕后执行
- onload事件当页面的DOM结构以及页面资源加载完毕后执行
2.元素绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
绑定语法:
$(selector).bind( eventType [, eventData], handler(eventObject))
eventType:是一个字符串类型的事件类型,也就是多需要绑定的事件.
类型包括:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error.
[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执行的函数
例:
$("#btnid").bind("click",function(){})
也可以写成:
$("#btnid").click(function(){})
当给元素绑定多个事件且执行不同的函数时:
$("#btnid").bind("click",function1(){}).bind("mouseout",function2(){})
可以写成:
$("#btnid").bind(){
"click":function1(){},
"mouseout":function2(){}
}
还可以写成:
$("#btnid").click(function1(){}).mouseout(function2(){})
