1 jQuery基础
1. jQuery的介绍
jQuery是一个免费、开源的JavaScript函数库
jQuery的作用和JavaScript一样,都是负责网页和用户的交互效果。
jQuery的优点就是兼容主流浏览器,代码编写更加简单。
2 jQuery的用法
2.1 jQuery的引入
http://code.jquery.com/
jQuery 1.x jQuery Core 1.12.4 - minified 版本
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
2. jQuery的入口函数
我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过给onload事件属性设置了一个函数来获取标签元素。
而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv);
};
$(document).ready(function(){
var $div = $("#div1");
alert($div)
});
$(function(){
var $div = $("#div1");
alert($div)
})
</script>
<div id="div01">这是一个div</div>
3 jQuery选择器
jQuery选择器的种类
标签选择器: $('li')
类选择器: $('#myId')
id选择器: $('.myClass')
层级选择器: $('#ul1 li span')
属性选择器: $('input[name=first]')
4 选择集过滤
选择集过滤的操作
has(选择器名称)方法,表示选取包含指定选择器的标签
eq(索引)方法,表示选取指定索引的标签
<script>
$(function(){
var $div = $("div").has("#mytext");
$div.css({"background":"red"});
});
var $div = $("div").eq(1);
$div.css({"background":"yellow"});
</script>
<div>
这是第一个div
<input type="text" id="mytext">
</div>
<div>
这是第二个div
<input type="text">
<input type="button">
</div>
5 选择集转移
$('#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 src="js/jquery-1.12.4.min.js"></script>
<!-- 选择集转移: 根据指定标签为参照物,选中其它标签,这种操作叫做选择集转移 -->
<script>
$(function(){
var $div = $("#box1")
$div.prev().css({"color": "red", "font-size": "25px"});
$div.prevAll().css({"text-indent": "50px"});
$div.next().css({"color": "green"});
$div.nextAll().css({"text-indent": "50px"})
$div.siblings().css({"text-decoration":"underline"});
$div.parent().css({"background": "gray"});
$div.children().css({"color": "red"});
$div.find(".sp1").css({"color": "green"})
})
</script>
小结
prev() 表示获取上一个同级元素
prevAll() 表示获取上面所有同级元素
next() 表示获取下一个同级元素
nextAll() 表示获取下面所有同级元素
parent() 表示获取父元素
children() 表示获取所有的子元素
siblings() 表示获取其它同级元素
find("选择器名称") 表示获取指定选择器的元素
6 获取和设置元素内容
jquery中的html方法可以获取和设置标签的html内容
给指定标签追加html内容使用append方法
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $("div");
alert($div.html());
$div.html("<a href='https://www.baidu.com'>百度</a>");
$div.append("<a href='https://www.baidu.com'>谷歌</a>")
});
</script>
7 获取和设置元素属性
prop方法的使用
之前使用css方法可以给标签设置样式属性,那么设置标签的其它属性可以使用prop方法了。
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $p = $("p");
var $text = $("#txt1");
var $px = $p.css("font-size");
alert($px);
$p.css({"font-size":"30px", "background":"green"});
var $name = $text.prop("name");
alert($name);
var $type = $text.prop("type");
alert($type);
$text.prop({"value":"张三", "class":"tname"});
alert($text.prop("value"));
alert($text.val())
$text.val("王五");
});
</script>
8 事件代理
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,
事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
<script>
$(function(){
var $div1 = $('#div1');
var $div2 = $('#div2');
$div1.click(function(){
alert($(this).html());
});
$div2.click(function(){
alert($(this).html());
});
});
</script>
<div id="div1" style="width:200px; height:200px; background: red;">
<div id="div2" style="width:100px; height:100px;background: yellow;">
哈哈
</div>
</div>
$(function(){
$list = $('#list');
$list.delegate('li,p', 'click', function() {
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<p>5</p>
</ul>
9 javascript 对象
创建自定义javascript对象有两种方式:
通过顶级Object类型来实例化一个对象
通过对象字面量创建一个对象
Object类创建对象的示例代码:
<script>
var person = new Object();
person.name = 'tom';
person.age = '25';
person.sayName = function(){
alert(this.name);
}
alert(person.age);
person.sayName();
</script>
对象字面量创建对象的示例代码:
<script>
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
alert(person2.age);
person2.sayName();
</script>
10 json
json有两种格式:
对象格式
数组格式
对象格式的json数据:
{
"name":"tom",
"age":18
}
数组格式的json数据:
["tom",18,"programmer"]
json数据转换成JavaScript对象
json本质上是字符串,如果在js中操作json数据,可以将json字符串转化为JavaScript对象。
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
alert(oPerson.name);
alert(oPerson.age);
11 ajax
1. ajax的介绍
ajax一个前后台配合的技术,可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,
ajax 最大的优点是实现局部刷新,当前端页面想和后台服务器进行数据交互就可以使用ajax了。
2. ajax的使用
jquery将它封装成了一个方法$.ajax(),我们可以直接用这个方法来执行ajax请求。
<script>
$.ajax({
url:'http://t.weather.sojson.com/api/weather/city/101010100',
type:'GET',
dataType:'JSON',
success:function (response) {
console.log(response);
},
error:function () {
alert("请求失败,请稍后再试!");
},
async:true
});
$.post("test.php", {"func": "getNameAndTime"}, function(data){
alert(data.name);
console.log(data.time);
}, "json").error(function(){
alert("网络异常");
});
$.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
console.log(dat);
console.log(status);
alert(dat);
}, "json").error(function(){
alert("网络异常");
});
</script>
ajax方法的参数说明:
url 请求地址
type 请求方式,默认是'GET',常用的还有'POST'
dataType 设置返回的数据格式,常用的是'json'格式
data 设置发送给服务器的数据,没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步,默认值是'true',表示异步,一般不用写
同步和异步说明
同步是一个ajax请求完成另外一个才可以请求,需要等待上一个ajax请求完成,好比线程同步。
异步是多个ajax同时请求,不需要等待其它ajax请求完成, 好比线程异步。