JQuery学习笔记
1.JQuery是js库
库:相当于java的工具类,库是存放东西的,JQuery是存放js代码的地方,放的用js代码写的function
JQuery是一款主流浏览器的JavaScript库,封装了JavaScript相关方法调用,简化JavaScript对HTML DOM操作。
JQuery作用:可以操作dom对象,时间处理,动画,ajax。
JQuery优点:
1.写少代码,做多事情
2.免费,开源并且轻量级的js库,容量很小
3.兼容市面上主流浏览器
4.能处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步AJAX功能
5.文档手册很全,很详细
6.成熟的插件可供选择,多种js组件
7.出错的话有一定的提示信息
8.不用再在html里面通过<script>标签插入一大堆js来调用命令了。
第一个JQuery例子
$(document).ready()与$()、JQuery()、windo.JQuery()是等价的。
2.dom对象和JQuery对象
dom对象:使用JavaScript的语法创建的对象叫做dom对象,也就是js对象
var obj=document.getElementById("txt1"); //其中obj就是dom对象,也叫作js对象
JQuery对象:使用JQuery语法表示对象叫做JQuery对象,JQuery表示的对象都是数组
var obj=$("#txt1"); //obj就是使用JQuery语法表示的对象,也就是JQuery。他是一个数组,只是当前数组中只有一个值。
dom对象和JQuery对象相互转换:
dom对象可以转换为JQuery,语法格式为: ${dom对象}
JQuery对象转换为dom对象的语法格式:从数组中获取第一个对象,第一个对象就是dom对象,是用[0]或者get[0]
选择器
选择器:是一个字符串,用来定位dom对象,定位了dom对象,就可以通过JQuery函数操作dom
基本选择器
根据 ID,class 属性,标签类型名定位 HTML 元素,转为 jQuery 对象.
1.id 选择器:$("#dom对象的id值")
语法:$(“#id”)
2.class 选择器
语法:$(“.class 名称”)
3.标签选择器
语法:$(“标签名”)
表单选择器
表单选择器:使用<input>便签的type属性值,定位dom对象的方式。该方法无论是否存在表单<form>,均可以用。与是否存在form无关。并且${":tr"}不可以用,因为tr不是input标签。
语法:${":type属性值"}
例如:${":text"},选择的是所有的单行文本框
${":button"},选择的是所有的按钮
过滤器
基本过滤器
在定位了dom对象后,根据一些条件筛选dom对象,过滤器又是一个字符串,用来筛选dom对象的,并且过滤器不能单独使用,必须和选择器一块使用。
jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
过滤器就是过滤条件,对已经定位到数组中 DOM 对象进行过滤筛选,过滤条件不能独立
出现在 jquery 函数,如果使用只能出现在选择器后方。
2.3.1 基本过滤器
1.选择第一个 first, 保留数组中第一个 DOM 对象
语法:$(“选择器:first”)
2.选择最后个 last, 保留数组中最后 DOM 对象
语法:$("选择器:last")
3.选择数组中指定对象
语法:$(“选择器:eq(数组索引)”)
4.选择数组中小于指定索引的所有 DOM 对象
语法:$(“选择器:lt(数组索引)”)
5.选择数组中大于指定索引的所有 DOM 对象
语法:$(“选择器:gt(数组索引)”)
表单过滤器
表单属性过滤器:根据表单中dom对象的状态情况,定位dom对象。
1.选择可用的文本框
启用状态:enabled
语法格式:$(":text:enabled")
2.选择不可用的文本框
不可用状态:disabled
语法格式:$(":text:disabled")
3.复选框选中的元素
选择状态:checked,例如radio,checkbox
语法格式:$(":checkbox:checked")
4.获取指定下拉列表的被选中元素
语法规则:$("选择器>option:selected")
事件
JQuery中给dom对象绑定事件
1)$(选择器).事件名称(事件的处理函数)
$(选择器):定位dom对象,dom对象可以有多个,这些dom对象都绑定事件了。
事件名称:就是js中的事件去掉on部分,
例如:js中的单击事件onclick(),在JQuery中的事件名称就是click。
事件处理函数:就是一个function,当事件发生时,执行这个函数的内容。
例如:
//给id是btn的按钮绑定单击事件
$("btn").click(function(){
alert("btn按钮单击了")
})
函数
第一组
1.val
操作数组中DOM对象的value属性
${选择器}.val():无参数调用形式,读取数组中第一个DOM对象的value属性值
${选择器}.val(值):有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值。
2.text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用,读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接 为一个字符串返回
$(选择器).text(值):有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值
3.attr
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
第二组
1.hide
$(选择器).hide():将数组中所有DOM对象隐藏起来
2.show
$(选择器).show():将数组中所有DOM对象在浏览器中显示起来
3.remove
$(选择器).remove():将数组中所欲的DOM对象以及其子对象一并删除
4.empty
$(选择器).empty():将数组中所有DOM对象的子对象删除
5.append
为数组中所有DOM对象添加子对象
语法格式:$(选择器).append("<div>我动态添加的div</div>")
6.html
设置或返回被选元素的内容(innerHTML).
$(选择器).html():无参数调用方法,获取DOM数组第一个元素的内容
$(选择器).html(值):有参数调用,用于设置DOM数组中所有元素的内容
7.each
each是对数组,json和dom数组等的遍历,对每个元素调用一次函数
语法1:$.each(要遍历的对象,function(index,element){处理程序})
$:相当于是java的一个类名
each:就是类中的静态方法
处理函数:function(index,element):
index,element都是自定义的形参,名称自定义
index:循环的索引
element:数组中的成员。
语法2:JQuery对象.each(function(index,element){处理程序})
index:数组的下标
element:数组的对象
事件
on()绑定事件
on()方法在被选元素上添加事件处理程序,该方法给API带来很多遍历。
语法格式:$(选择器).on(event,function)
event:事件一个或者多个,多个之间空格分开
function:可选,规定当事件发生时运行的函数。
使用JQuery的函数,实现ajax请求的处理
没有JQuery之前,使用XMLHttpRequest做ajax,需要四个步骤,JQuery的出现,简化了ajax请求的处理,使用三个函数可以实现ajax请求的处理。
1)$.ajax() :JQuery中实现ajax的核心函数。
2)$.post() :使用post方式做ajax请求
3)$.get() :使用get方式发送ajax请求
$.post()和$.get() 他们在内部都是调用的$.ajax()
$.ajax函数的使用,函数的参数表示请求的url,请求的方式,参数值等信息。
json结构的参数说明
$.ajax( { name:value, name:value, ... } )
说明:参数是 json 的数据,包含请求方式,数据,回调方法等
async : 布尔值,表示请求是否异步处理。默认是 true
contentType :发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。
data:规定要发送到服务器的数据,表示请求的参数或者参数值,可以是:string, 数组,多数是 json
dataType:期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能的类型
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应,并以对象返回
error(xhr,status,error):一个function,如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr):一个function,当请求成功时运行的函数,其中 result, status, xhr 是自定义的形参名
type:规定请求的类型(GET 或 POST 等),默认是 GET, get,post 不用区分大小写
url:规定发送请求的 URL。
以上是常用的参数。
error() , success()中的 xhr 是 XMLHttpRequest 对象。