1.关于jQuery
什么是jQuery
jQuery 是一个快速,小巧,功能丰富的 JavaScript 库。 它通过易于使用的 API 在大
量浏览器中运行,使得 HTML 文档遍历和操作,事件处理,动画和 Ajax 变得更加简单。 通
过多功能性和可扩展性的结合,jQuery 改变了数百万人编写 JavaScript 的方式。
为什么使用jQuery
非常重要的理由就是:它能够兼容市面上主流的浏览器, IE 和 FireFox,Google 浏览器
处理 AJAX,创建异步对象是不同的,而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX
异步对象。
其他优点:
(1)写少代码,做多事情【write less do more】 (2)免费,开源且轻量级的 js 库,容量很小
(3)兼容市面上主流浏览器,例如 IE,Firefox,Chrome
(4)能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步 AJAX
功能
5)文档手册很全,很详细
(6)成熟的插件可供选择,多种 js 组件,例如日历组件(点击按钮显示下来日期)
(7)出错后,有一定的提示信息
(8)不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了
例如:使用 JavaScript 定位 DOM 对象常用的三种方式:
(1)通过 ID 属性:document.getElementById()
(2)通过 class 属性:getElementsByClassName()
(3)通过标签名:document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了,大小写的组合太多了,编写代码效率,容易出
错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法
2.jQuery里的对象
DOM对象
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展
标志语言的标准编程接口。通过 DOM 对 HTML 页面的解析,可以将页面元素解析为元素节点、属性节点和文本节点,这些解析出的节点对象,即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。
JavaScript 对象和 jQuery 对象
用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对
象的 API。 用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。
jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
JQuery 对象与 JavaScript 对象是可以互相转化的,一般地,由于 Jquery 用起来更加方便,
我们都是将 JavaScript 对象转化成 Jquery 对象
DOM 对象转换 jQuery 对象
使用$(DOM 对象) 方式,可以 DOM 对象转换为 jQuery 对象, 转换为 jQuery 对象才可以
使用 jQuery 中的提供的方法,操作 DOM 对象。一般情况下,在命名 jQuery 对象时,为了与 DOM 对象进行区分,习惯性的以$ 开头,这不是必须的。
例:
新建 html 页面文件 domTojQuery.html
1.页面加入按钮 button
<body>
<div align="center">
<input type="button" id="btn" value=" 我要成为jQuery对象”οnclick="btnClick()"/>
</div>
</body>
2.转换 DOM 对象
<script type="text/ javascript" src="js/jquery_ 3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//使用js方法获取DOM对象
var domBtn = document. getElementById("btn");
alert("1=" + domBtn. value )
//使用jQuery函数$() 把DOM对象转换jQuery对象
var $btn =
= $(domBtn);
//调用jQuery方法val()
alert("2=" + $btn.val());
}
</script>
jQuery 对象转为 DOM 对象
jQuery 对象本身为数组对象,该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM
对象。所以有两种方式可以获取到 DOM 对象:get(0) 方式与下标[0]
1.页面添加 text ,button
<body>
<div align="center">
<input type="button" id="btn" value="计算平方” οnclick="btnClick()"/>
<input type="text" id="txt" value="输入 整数"/>
</div>
</body>
- jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象
<script type="text/ javascript" src="js/jquery_ 3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//从jQuery对 象数组中,第0个对象为DOM对象
//var domObj 二$("#txt"). get(0);
var domObj = $("#txt")[0];
//使用DOM对象的属性value
var num =
domObj . value ;
dom0bj.value = num * num;
}
</script>
3.选择器
选择器: 就是定位条件;通知 jquery 函数定位满足条件的 DOM 对象
基本选择器
根据 ID,class 属性,标签类型名定位 HTML 元素,转为 jQuery 对象.
1.id 选择器
语法:$(“#id”)
2.class 选择器
语法:$(“.class 名称”)
3. 标签选择器
语法:$(“标签名”)
例:新建 selector.html
1.在页面 head 部分加入 css
<style type="text/css">
div{
background: gray;
width: 200px;
height:100px;
}
</style>
2.加入 jQuery 引用
<script type="text/javascript" src="js/jquery_ 3.4.1.js"></script>
3.body 部分定义 div
<body>
<div id="one" >我是id=one的div</div>
<br>
<div class="two">我 是class=two的div</div>
<br>
<div>我是没有id, class的div</div>
<br>
<span>我是一行数据</span>
<br>
操作按钮: <br>
<input type="button" value="选取id=one" onclick="fun1()" />
<input type="button" value="选取class=two" onclick="fun2()" />
<input type="button" value="选取div" onclick="fun3()" />
</body>
4.创建 js 函数
<script type="text/javascript">
function fun1(){
$("#one"). css("background", "blue");
}
function fun2(){
$(" . two").css("background" , "red")
function fun3(){
//所有的div, $("div") 是jQuery数组,对数组内全部成员统一处理
$("div"). css("background" , "orange");
}
</script>
所有选择器
语法$(“*”) 选取页面中所有 DOM 对象。
组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合 id,class,标签名等。
语法:$(“id,class,标签名”)
例:
1.上面的 selector.html 页面中加入按钮
<input type="button" value=" 所有DOM" onclick="fun4()" />
<input type="button" value=" 选取两个DOM对" onclick="fun5()" />
2.增加 js 函数
function fun4(){
//页面中全部
$("*").css("background", "yellow");
}
function fun5(){
//id是one,标签<span>
$("#one,span"). css("background","pink" )
}
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法
无论是否存在表单,均可做出相应选择。表单选择器是为了能更加容易地操作表单,
表单选择器是根据元素类型来定义的
<input type=“text”>
<input type=“password”>
<input type=“radio”>
<input type=“checkbox”>
<input type=“button”>
<input type=“file”>
<input type=“submit”>
<input type=“reset”>
$(":tr"): 不能用,tr 不是 input 标签
语法: $(":type 属性值")
例如:
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
例:
新建 form.html
页面定义元素
文本框: <input type="text" value="我是type=text"><br>
性别: <br>
<input type="radio" name="sex" value="man">男<br>
<input type="radio" name="sex" value="woman">女<br>
爱好: <br>
<input type="checkbox" value="bike">骑行<br>
<input type=" checkbox" value="football" >足球<br>
<input type=" checkbox" value="music" >音乐<br>
<br>
<p>功能按钮</p>
<input type="button" value="读取text值" onclick="fun1()"/>
<input type="button" value="读取radio值" onclick="fun2()"/>
<input type="button" value="读取checkbox" onclick="fun3()"/>
定义 js 函数
<script type= "text/javascript">
function fun1(){
var $obj = $(":text");
//获取第一一个DOM对象的值
alert( $obj.val() );
}
function fun2(){
var $obj = $(":radio");
for(var i=0;i<$obj.length;i++){
//jQuery对象转为DOM对象
var obj = $obj[i];
alert (obj.value);
}
}
function fun3(){
var $obj = $(":checkbox");
for(var i=0;i<$obj . length;i++){
//jQuery对象转为DOM对象
var obj = $obj[i];
alert(obj. value);
//jQuery对象的用法
//alert( $($obj[i]).val() );
}
}
</script>
4.过滤器
jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$(“div”) == [dom1,dom2,dom3]
过滤器就是过滤条件,对已经定位到数组中 DOM 对象进行过滤筛选,过滤条件不能独立
出现在 jquery 函数,如果使用只能出现在选择器后方。
基本过滤器
1.选择第一个 first, 保留数组中第一个 DOM 对象
语法:$(“选择器:first”)
2.选择最后个 last, 保留数组中最后 DOM 对象
语法:$(“选择器:last”)
3.选择数组中指定对象
语法:$(“选择器:eq(数组索引)”)
4.选择数组中小于指定索引的所有 DOM 对象
语法:$(“选择器:lt(数组索引)”)
5.选择数组中大于指定索引的所有 DOM 对象
语法:$(“选择器:gt(数组索引)”)
实例操作
1.定义样式
<style type="text/css ">
div {
background: gray;
}
</style>
2.页面加入 div
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>
我是第三个div-2
<div class="son">我是div-3</div>
<div class="son">我是div-4</div>
</div>
<div>我是div-5</div>
<br>
<span>我是span</span>
<br>
<p>功能按钮</p>
<input type="button" id="btn1" value="选择第一个div" /> <br>
<input type="button" id="btn2" value="选择最后一 个div" /><br>
<input type="button" id="btn3" value="选择索引等于3的div" /><br>
<input type="button" id="btn4" value="选择索引小于3的div" /><br>
<input type="button" id="btn5" value="选择索引大于3的div" /><br>
3.定义 js 函数
<script type="text/javascript">
$(function(){
//jQuery绑定事件
$("#btn1").click(function(){
$("div:first").css("background", "blue")
})
$( "#btn2").click(function(){
$("div: last") .css("background", "pink") ;
})
$(" #btn3"). click(function(){
$("div:eq(3)").css("background" , "orange");
})
$(”#btn4"). click(function(){
$("div:lt(3)"). css("background", "yellow");
})
$("#btn5").click(function(){
$("div:gt(3)").css("background" , "yellow");
})
})
</script>
表单对象属性过滤器
1 . 选择可用的文本框
$(“:text:enabled”)
2.选择不可用的文本框
$(“:text:disabled”)
3.复选框选中的元素
$(“:checkbox:checked”)
4.选择指定下拉列表的被选中元素
选择器>option:selected
例:
创建 filterForm.html
页面:
<p>文本框</p>
<input type="text" id="text1" value="text1" /> <br>
<input type="text" id="text2" value="text2" disabled /><br>
<input type="text" id="text3" value="text3" /><br>
<input type="text" id="text4" value="text4" disabled /><br>
<br>
<p>复选框</p>
<input type="checkbo" value="游泳" />游泳<br>
<input type="checkbox" value="健身" checked />健身<br>
<input type="checkbox" value="电子游戏" checked />电子 游戏<br>
<br>
<p>下拉框</p>
<select id="lang">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="sql">sql语言 </option>
</select>
<p>功能按钮</p>
<button id="btn1">所有可用的text设值hello</button> <br>
<button id="btn2"> 显示被选中的复选框的值</button><br>
<button id="btn3"> 显示下拉列表选中的值</button><br>
js 函数
<script type="text/javascript">
$(function(){
//jQuery绑定事件
$("#btn1").click(function(){
$(":text :enabled"). val("Hello")
})
$("#btn2").click(function(){
var $obj = $(" :checkbox: checked") ;
$obj.each( function(i,n){
alert("第"+i+"个成员,DOM值是:”
+n. value+" jQuery对象取值:"+ $(n).val());
})
})
$("#btn3").click(function(){
//有选中的第一-个select的option
var $obj = $("select > option:selected");
alert($obj.val() + " "+$obj.text());
//选择id=lang的select
//var $obj=$("#lang>option:selected");
//alert($obj.val()+" "+$obj.text());
})
})
</script>
5.函数
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 对象的属性设为新值
例:
创建 fun1.html
样式
<style type="text/css">
div {
background: blue;
}
</style>
页面:
<p>文本框val</p>
<input type="text" value="刘备"/><br>
<input type="text" value="关羽"/><br>
<input type="text" value="张飞"/><br>
<p>文本数据text</p>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<p>图片</p>
<img id=" img1" src="img/ex1.jpg" /><br>
<img id="img1" src=" img/ex2.jpg" /><br>
<p>功能按钮</p>
<button id="btn1">获取第一个文本框的值</button> <br>
<button id="btn2">设置所有 文本框为新值< /button><br>
<button id="btn3">获取div的所有文本</button><br>
<button id="btn4">获取第一个div的文本</button><br>
<button id="btn5">设置div新文本</button><br>
<button id="btn6">设 置img图片</button><br>
js 函数
<script type="text/javascript">
$(function(){
//jQuery绑定事件
$(" #btn1"). click(function(){
var txt = $(":text"). val();
alert("我是多个text的第一个: "+txt);
})
$(" #btn2").click(function(){
$(":text").val("王者荣耀还是三国志" )
})
$("#btn3") .click(function(){
alert($("div"). text());
})
$(" #btn4").click(function(){
alert( $("div:first"). text() )
})
$("#btn5").click(function(){
$("div"). text("我是小强")
})
$("#btn6"). click( function(){
alert($("img") .attr("src"))
$("img").attr("srC",”img/ex3.jpg" ) ;
})
})
</script>
1.hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
2.show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
3.remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
4.empty
$(选择器).empty():将数组中所有 DOM 对象的子对象删除
5.append
为数组中所有 DOM 对象添加子对象
$(选择器).append("<div>我动态添加的 div")
6.html
设置或返回被选元素的内容(innerHTML)。
$(选择器).html():无参数调用方法,获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的内容。
7.each
each 是对数组,json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1:$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2:jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
例:
新建 fun2.html
样式:
<style type= "text/css">
div {
background: blue;
}
</style>
页面
<p>show和hide</p>
<div id="one">我是one</div>
<div id="two">我是two</div>
<p>remove和empty</p>
<select>
<option>老虎</option>
<option>狮子</option>
<option>豹</option>
</select>
<br>
<select>
<option>大洋洲</option>
<option>欧洲</option>
<option>美洲</option>
</select>
<br>
<p>append</p>
<div id="father" style="background: red;">我是父div</div>
<br>
<p>html</p>
<span>mysql是一个<b>数据库</b></span><br>
<span>使用jdbc访问数据库</span><br>
<p>功能按钮</p>
<button id="btn1">隐藏所有 div</button> <br>
<button id="btn2"> 显示所有div</button><br>
<button id="btn3" >清除所有下拉列表中option子标签</button><br>
<button id="btn4">删除所有 下拉列表</button><br>
<button id="btn5" >添加元素</button><br>
<button id="btn6">获取第一个span文本内容</button><br>
<button id="btn7">设置span的内容</button><br>
<button id="btn8" >each循环< /button><br>
<option>欧洲</option>
<option>美洲</option>
</select>
<br>
<p>append</p>
<div id="father" style="background: red;">我是父div</div>
<br>
<p>html</p>
js 函数
$("#btn1"). click(function(){
$("div").hide();
})
$("#btn2"). click(function(){
$("div"). show();
})
$("#btn3"). click(function(){
$("select") . empty();
})
$(" #btn4"). click(function(){
$("select").remove();
})
$("#btn5").click(function(){
$(" #father").append("<input type= ' text' value= '我是动态添加的input'/>");
})
$("#btn6"). click(function(){
alert($("span").html());
})
$(”#btn7"). click(function(){
$(" span").html("我是span标签" );
})
$(" #btn8").click( function(){
$("span").each(function(i,n){
alert("索引:"+i+" "+ n. innerHTML )
})
})
each 用法
页面上加入 text
<p>文本框val</p>
<input type="text" value="刘备" /><br>
<input type="text" value="关羽" /><br>
<input type="text" value="张飞"/><br>
加入 三个按钮, 创建点击事件
$("#9"). click(function(){
//遍历数组
var arr=["a","b","c"];
$.each(arr , function(i,n){alert("数组下标: "+i+",成员是: "+n)})
})
$(" #btn10").click(function(){
//遍历json对象
var arr={name:"zhangsan" , age:20};
$ . each(arr, function(i,n){alert("key是: "+i+", value是 : "+n)})
})
$("#btn11").click(function(){
//遍历dom数组
$.each($(":text"),function(i,n){alert("下标是: "+i+", dom的value是 : "+n.value)})
})
或者
$("#btn11").click(function(){
//遍历dom数组
$(":text").each(function(i,n){alert("下标是: "+i+", dom的value是 : "+n.value)})
})
6.事件
为页面元素绑定事件,即对于指定页面元素,当某个事件发生后,执行指定动作
定义元素监听事件
语法:$(选择器).监听事件名称(处理函数);
说明:监听事件名称是 js 事件中去掉 on 后的内容, js 中的 onclick 的监听事件名称是 click
例如:
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$(“button”).click(fun1)
为页面中所有的 tr 标签绑定 onmouseover,并关联处理函数 fun2
$(“tr”).mouseover(fun2)
on() 绑定事件
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利,推荐使用该方法
语法:$(选择器).on(event,data,function)
event:事件一个或者多个,多个之间空格分开
data:可选。规定传递到函数的额外数据,json 格式
function: 可选。规定当事件发生时运行的函数。
例:
新建 event.html
样式:
<style type="text/css">
div {
background: gray;
width: 200px;
height: 80px;
}
</style>
页面:
<body>
<p>功能按钮</p>
<button id="btn1">动态添Button< /button>
<br><br>
<div id="mydiv">
</div>
<p>可以click me</p>
</body>
js 函数
$(function(){
$(" #btn1"). on("click" ,function(){
$(”#mydiv") . append(
"<button id= ' mybutton '>我是添加的NewButton< /button"
);
$(”#mybutton") . on("click", function(){
alert("NewButton被点了");
});
})
$("p") . on("click", { name :" zhangsan"}, function(event){
// event.data 获取传入的参数event是自定义名称
alert( event . data. name)
})
})
7.AJAX
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,您能够使用 HTTP Get
和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新
到 DOM 对象
$.ajax()
$.ajax() 是 jQuery 中 AJAX 请求的核心方法,所有的其他方法都是在内部使用此方法。
语法:
$.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):如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr):当请求成功时运行的函数,其中 result, status, xhr 是自定义的形参名
type:规定请求的类型(GET 或 POST 等),默认是 GET, get,post 不用区分大小写
url:规定发送请求的 URL。
以上是常用的参数。 error() , success()中的 xhr 是 XMLHttpRequest 对象。
$.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法:$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明:
data - 包含来自请求的结果数据
status - 包含请求的状态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地,jQuery 会智能判断。可能的
类型:
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应,并以对象返回
$.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法:$.post(URL,data,function(data,status,xhr),dataType)
参数同$g
搬运不易,点个赞再走呗,感谢感谢。转载自北京动力节点jQuery专题课