1. jQuery的引入
<script src="js/jquery-1.12.4.min.js"></script>
2. jQuery的入口函数
js获取标签元素,需要页面加载完成以后再获取,通过onload
事件属性设置了一个函数来获取标签元素,而jquery提供了ready
函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快。
// 完整写法
$(document).ready(function(){
...
});
// 简化写法
$(function(){
...
});
3、jQuery选择器
(1)如何获取标签对象
1)标签选择器
// 1. 获取标签对象
var $p = $("p");
// 2. 通过jquery设置标签的样式
$p.css({"color": "red"});
2)类选择器
var $div = $(".div1");
3)id选择器
var $div1 = $("#box1");
4)层级选择器
var h1 = $("div h1");
5)属性选择器
var $input = $("input[type=text]");
完整代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 1. 获取标签对象
var $p = $("p");
// alert($p.length);
// 2. 通过jquery设置标签的样式
// 2.1 标签选择器
$p.css({"color": "red"});
// 2.2 类选择器
var $div = $(".div1");
// alert($div.length);
// 2.3 id选择器
var $div1 = $("#box1");
// alert($div1.length);
// 2.4 层级选择器
var h1 = $("div h1");
// alert(h1.length);
// 2.5 属性选择器,先根据标签选择html标签,然后再根据属性值进行过滤标签
var $input = $("input[type=text]");
alert($input.length)
// 结论: jquery选择器获取标签,和css选择器匹配标签的方式一样
});
</script>
<p>hello</p>
<p>hello</p>
<div class="div1">哈哈</div>
<div id="box1">嘻嘻</div>
<div>
<h1>哈哈</h1>
</div>
<input type="text">
<input type="button">
(2)选择集过滤:选择标签的集合里面过滤自己需要的标签
1)has(选择器名称)方法,表示选取包含指定选择器的标签
$divs.has(".pname").css({"background":"red"});
2)eq(索引)方法,表示选取指定索引的标签
$divs.eq(1).css({"background":"blue"});
完整代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 通过jquery选择器获取html的标签
var $divs = $("div");
// 获取包含有指定选择器的父标签
$divs.has(".pname").css({"background":"red"});
// 根据下标选择指定的标签
$divs.eq(1).css({"background":"blue"});
// 选择集过滤就是在选中的集合标签里面,根据需要过滤出来自己想要的标签
});
</script>
<div>
<p class="pname">哈哈</p>
</div>
<div>
<input type="button" value="按钮">
</div>
(3)选择集转移:指定一个标签作为参照物,选择获取它的周围的标签
- $(’#box’).prev(); 表示选择id是box元素的上一个的同级元素
- $(’#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
- $(’#box’).next(); 表示选择id是box元素的下一个的同级元素
- $(’#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
- $(’#box’).parent(); 表示选择id是box元素的父元素
- $(’#box’).children(); 表示选择id是box元素的所有子元素
- $(’#box’).siblings(); 表示选择id是box元素的其它同级元素
- $(’#box’).find(’.myClass’); 表示选择id是box元素的class等于myClass的元素
<script>
$(function(){
var $div = $('#div01');
$div.prev().css({'color':'red'});
$div.prevAll().css({'text-indent':50});
$div.next().css({'color':'blue'});
$div.nextAll().css({'text-indent':80});
$div.siblings().css({'text-decoration':'underline'})
$div.parent().css({'background':'gray'});
$div.children().css({'color':'red'});
$div.find('.sp02').css({'font-size':30});
});
</script>
<div>
<h2>这是第一个h2标签</h2>
<p>这是第一个段落</p>
<div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
<h2>这是第二个h2标签</h2>
<p>这是第二个段落</p>
</div>
4、获取和设置元素内容html方法
步骤:
- 获取标签:
var $标签对象 = $(获取标签)
- 获取标签内容:
$标签对象.html()
- 设置标签内容
1)清除之前的标签内容:$标签对象.html(新标签内容)
2)保留之前的 标签内容,追加内容:$标签对象.append(追加标签内容)
<script>
$(function(){
// 获取标签
var $div = $("#div1");
// 获取标签的html内容
var result = $div.html();
alert(result);
// 设置标签的html内容,之前的内容会清除
$div.html("<span style='color:red'>你好</span>");
// 追加html内容
$div.append("<span style='color:red'>你好</span>");
});
</script>
<div id="div1">
<p>hello</p>
</div>
5、获取和设置元素属性的元素
(1)css方法设置标签样式属性
步骤:
- 获取标签:
var $标签对象 = $(获取标签)
- 获取样式属性:
$标签对象("样式属性")
- 设置样式属性:
$标签对象.css({"样式属性1":"样式1","样式属性2":"样式2"})
(2)prop方法设置标签的其它属性
步骤:
- 获取标签:
var $标签对象 = $(获取标签)
- 获取属性:
$标签对象("属性")
- 设置属性:
$标签对象.prop({"属性1":"属性值1","属性2":"属性值2"})
<style>
.a01{
color:red;
}
</style>
<script>
$(function(){
var $a = $("#link01");
var $input = $('#input01')
// 获取元素属性
var sId = $a.prop("id");
alert(sId);
// 设置元素属性
$a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});
// 获取value属性
// var sValue = $input.prop("value");
// alert(sValue);
// 获取value属性使用val()方法的简写方式
var sValue = $input.val();
alert(sValue);
// 设置value值
$input.val("222222");
})
</script>
<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">
6、jQuery常用事件
说明:
- this指的是当前发生事件的对象,但是它是一个原生js对象
- $(this) 指的是当前发生事件的jquery对象
(1)click() 鼠标单击
获取标签:var $标签对象 = $(获取标签)
添加事件:
$标签对象.click(function){
$(this).事件变化
}
例:
<script>
$(function(){
1.获取标签
var $lis = $("ul li");
2.添加点击事件
$lis.click(function(){
// 获取当前点击的标签对象
// 原生js的写法
// this.style.color = 'red';
// jquery的写法
$(this).css({"color":"red"});
// 获取点击标签的索引
alert($(this).index())
});
</script>
<div>
<ul>
<li>苹果</li>
<li>鸭梨</li>
<li>香蕉</li>
</ul>
</div>
(2)focus() 元素获得焦点(一般配合按钮)
获取标签:var $标签对象 = $(获取标签)
添加事件:
$标签对象.focus() (function){
$(this).事件变化
}
(3)blur() 元素失去焦点
获取标签:var $标签对象 = $(获取标签)
添加事件:
$标签对象.blur(function){
$(this).事件变化
}
(4)mouseover() 鼠标进入(进入子元素也触发)
获取标签:var $标签对象 = $(获取标签)
添加事件:
$标签对象.mouseover() (function){
$(this).事件变化
}
(5)mouseout() 鼠标离开(离开子元素也触发)
获取标签:var $标签对象 = $(获取标签)
添加事件:
$标签对象.mouseout() (function){
$(this).事件变化
}
(6)ready() DOM加载完成
获取标签:var $标签对象 = $(获取标签)
添加事件:
$标签对象.ready() (function){
$(this).事件变化
}
实例:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 等页面加载完成以后获取标签元素
// $(document).ready(function(){
// });
$(function(){
// 获取ul里面的所有li标签
var $lis = $("ul li");
// 获取button标签
var $btn = $("#btn1");
// 获取text标签
var $text = $("#txt1");
// 获取div标签
var $div = $("div");
// 添加点击事件
$lis.click(function(){
// 获取当前点击的标签对象
// 原生js的写法
// this.style.color = 'red';
// jquery的写法
$(this).css({"color":"red"});
// 获取点击标签的索引
alert($(this).index())
});
$btn.click(function(){
// 获取文本框的内容
alert($text.val());
});
// 给text文本框添加获取焦点事件
$text.focus(function(){
// 获取得到焦点的文本框,然后设置样式属性
$(this).css({"background":"red"});
});
// 给text文本框添加失去焦点事件
$text.blur(function(){
$(this).css({"background":"white"});
})
// 给div设置鼠标悬停(进入)事件
$div.mouseover(function(){
$(this).css({"background":"green"});
});
// 给div设置鼠标离开事件
$div.mouseout(function(){
$(this).css({"background":"white"});
})
});
</script>
<div>
<ul>
<li>苹果</li>
<li>鸭梨</li>
<li>香蕉</li>
</ul>
<input type="text" id="txt1">
<input type="button" id="btn1" value="你点我">
</div>
6、事件代理delegate方法
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),
把 事件加到父级上,通过判断事件来源,执行相应的子元素的操作
,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
delegate(childSelector,event,function)
delegate(子元素的选择器(多个选择器,使用逗号隔开),事件名称,事件处罚执行的函数)
// 通过事件代理,让父控件代理子控件的事件,然后执行子控件的相关操作
<script>
var $ul = $("div ul");
$ul.delegate("li", "click", function(){
$(this).css({"color": "red"});
});
</script>
<div>
<ul>
<li>哈哈</li>
<li>嘻嘻</li>
<li>美滋滋</li>
<li>啦啦</li>
</ul>
</div>
7、创建自定义javascript对象有两种方式:
- 通过顶级Object类型来实例化一个对象
(1)创建空对象:var 对象名 = new Object()
;
(2)添加属性:对象名.属性 = 属性值
;
(3)添加方法 :对象名.方法 = function(){ }
;
(4)调用属性或方法:对象名.属性/方法
;
实例:
<script>
var person = new Object();
// 添加属性:
person.name = 'tom';
person.age = '25';
// 添加方法:
person.sayName = function(){
alert(this.name);
}
// 调用属性和方法:
alert(person.age);
person.sayName();
</script>
- 通过对象字面量创建一个对象
(1)创建对象:
var 对象名 = {
属性:属性值
方法:function(){ };
}
(2)调用属性或方法:对象名.属性/方法
;
实例:
<script>
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 调用属性和方法:
alert(person2.age);
person2.sayName();
</script>
8、json:一种数据格式,类似于javascript对象的字符串
(1)数据格式:
1)对象格式:最外层的表现形式是一对大括号,key名和字符串数据都要使用双引号
- 创建一个json数据:
var json对象名 ='{"属性1":"属性值1","属性2":"属性值2"}'
- 把json数据转成JavaScript对象:
var 对象 = JSON.parse(json对象名)
- 获取属性数据:
对象.属性
<script>
// 对象格式的json数据
var sJson1 = '{"name":"李四", "age":20}';
// 把json数据转成JavaScript对象
var oPerson = JSON.parse(sJson1);
// 获取属性数据
console.log(oPerson.name + oPerson.age);
</script>
2)数组格式:最外层的表现形式是一对中括号,每项数据之间使用逗号进行分隔
- 创建一个json数据:
var json对象名 ='{"属性1":"属性值1","属性2":"属性值2"}'
- 把json数据转成数组格式:
var 数组名 = JSON.parse(json对象名)
- 获取属性数据:
通过下标获取指定js对象
var 对象 = 数组名[属性下标];
通过js对象获取name属性
对象.属性
<script>
// 对象格式的json数据
var sJson2 = '[{"name":"李四", "age":20}, {"name":"李三", "age":21}]';
// 把json数据转成数组格式
var aArray = JSON.parse(sJson2);
// 通过下标获取指定js对象,然后通过js对象获取name属性
var oPerson = aArray[1];
console.log(oPerson.name);
</script>
9、ajax:前后台配合技术
ajax 是 Asynchronous JavaScript and XML的简写,ajax一个前后台配合的技术,它可以让
javascript 发送异步的 http 请求,与后台通信进行数据的获取,ajax
最大的优点是实现局部刷新,ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax
了。这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。
ajax的使用:jquery将它封装成了一个方法$.ajax(),我们可以直接用这个方法来执行ajax请求。
ajax方法的参数说明:
- url 请求地址
- type 请求方式,默认是’GET’,常用的还有’POST’
- dataType 设置返回的数据格式,常用的是’json’格式
- data 设置发送给服务器的数据,没有参数不需要设置
- success 设置请求成功后的回调函数
- error 设置请求失败后的回调函数
- async 设置是否异步,默认值是’true’,表示异步,一般不用写
同步和异步说明
1)同步是一个ajax请求完成另外一个才可以请求,需要等待上一个ajax请求完成,好比线程同步。
2)异步是多个ajax同时请求,不需要等待其它ajax请求完成, 好比线程异步。
<script>
// 向web服务器发送ajax请求,本质上是一个http协议的请求
$.ajax({
// 请求的资源地址, 不指定ip地址和端口号表示请求的是自己的服务器资源数据
url: "data.json",
// 请求方式: GET,POST
type: "GET",
// 指定对服务器数据的解析格式
dataType: "JSON",
// data: 表示发送给web服务器的参数
data:{"name":"ls"},
// 请求成功执行的函数
success:function(data){
console.log(data.name);
// 数据请求回来以后可以绑定给html中的某个标签控件,实现局部刷新
},
// 请求失败执行的函数
error:function(){
alert("网络异常");
},
// 是否使用异步,默认不指定表示是异步请求
async: true
});
</script>
ajax的简写方式:$.ajax按照请求方式可以简写成$.get或者$.post方式
1)$.get(url,data,success(data, status, xhr),dataType).error(func)
2)$.post(url,data,success(data, status, xhr),dataType).error(func)
get和$.post方法的参数说明:
- url 请求地址
- data 设置发送给服务器的数据,没有参数不需要设置
- success 设置请求成功后的回调函数
data 请求的结果数据
status 请求的状态信息, 比如: “success”
xhr 底层发送http请求XMLHttpRequest对象- dataType 设置返回的数据格式
“xml”
“html”
“text”
“json”- error 表示错误异常处理
- func 错误异常回调函数
<script>
// 发送get方式的ajax请求的简写方式
// 1. 请求的地址
// 2. 请求传给web服务器的参数
// 3. 请求成功的回调函数
// 4. 返回数据的解析方式
// 5. error 失败执行的回调函数
$.get("data.json",{"name":"ls"},function(data){
// 如果按照json格式进行数据,js这块能得到一个JavaScript
alert(data.name);
}, "JSON").error(function(){
alert("网络异常,请求失败");
});
</script>
<script>
$.post("data.json",{"name":"ls"},function(data){
// 如果按照json格式进行数据,js这块能得到一个JavaScript
alert(data.name);
}, "JSON").error(function(){
alert("网络异常,请求失败");
</script>