//JSRUN引擎2.0，支持多达30种语言在线运行，全仿真在线交互输入输出。
/*
1 jQuery介绍：是对JavaScript的封装，极大地简化JavaScript编程
2 作用：jQuery和JavaScript的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的只不过jQuery简化了JavaScript编程，实现交互效果更简单
3 优点：
兼容主流的浏览器，增加程序员的开发效率
简化了JavaScript编程，实现交互效果更简单
4 用法：
<script src="js/jquery-1.12.4.min.js"></script>
5 jQuery的入口函数：ready函数，保证获取标签元素没问题，它的速度比原先的window.onload更快，不会等待资源数据加载完成
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var $div = $('#div01');
alert('jQuery获取的div：'+ $div);
});
</script>
<div id="#div01">这是一个div </div>
6 jQuery选择器
6.1 jquery选择器是快速选择标签元素，获取标签的，选择器规则和css样式一样
6.2 种类
①标签选择器
②类选择器
③id选择器
④层级选择器
⑤属性选择器
var $input = $("input[type=text]");
可以使用length属性来判断标签是否选择成功，如果length大于0表示选择成功，否则选择失败
$('#.myClass') //选择class为myClass的标签
$(function(){
result = $("div").length;
alert(result);
//通过jquery设置标签样式
$p.css({"color":"red"});
});
7 选择集过滤：在选择标签的集合里面过滤自己需要的标签
7.1 操作
has(选择器名称)方法，表示选取包含指定选择器的标签
<script>
$(function(){
var $div = $("div").has("#mytext");
$div.css({"background":"red"});
});
</script>
<div>
第一个div
<input type="text" id="mytext">
</div>
<div>
第二个div
<input type="text" >
<input type="button">
</div>
eq(索引)方法，表示选取指定索引的标签
<script>
$(function(){
var $div = $("div").eq(1);
$div.css({"background":"red"});
});
</script>
<div>
第一个div
<input type="text" id="mytext">
</div>
<div>
第二个div
<input type="text" >
<input type="button">
</div>
8 选择集转移：以选择的标签为参照，然后获取转移后的标签
8.1 操作
$('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":50px});
});
</script>
<div>
<h3>oooooooo</h3>
<p>hshshshhhshsh</p>
<div id="div01">jkkkkkkk</div>
<div>jjjjjjjj</div>
</div>
9 获取和设置元素内容：jquery中的html方法可以获取和设置html内容
<script>
$(function{
var $div = $("#div1");
var result = $div.html();
alert(result);
$div.html("<span style='color:red')>hhhh</span>");
$div.append("<span style='color:red')>hhhh</span>");
})；
</script>
<div id="div1">
<p>jjdjjdjdjj</p>
</div>
9.1 prop方法使用：使用prop方法也可以给标签设置样式属性
<style>
.a01{
color:red;
}
</style>
<script>
$(function(){
var $a = $("#link01");
var $input = $("#input");
var sId = $a.prop("id");
alert(sid);
$a.prop({"href":"http://www.baidu.com","title":"这是百度的链接","class":"a01"});
var sValue = $input.prop("value");
alert(sValue);
var sValue1 = $input.val();
alert(sValue1);
$input.val("99999");
});
</script>
<a id="link01">这是连接</a>
<input type="text" id="input01" value="11111">
10 事件
click()鼠标单击
blur()：元素是去焦点
focus()：元素获得焦点
mouseover()：鼠标进入（进入子元素也触发）
mouseout()：鼠标离开（离开子元素也触发）
read()：DOM加载完成
<script>
$(function(){
var $lis = $("ul li");
$lis.click(function(){
$(this).css({"color":"red"});
alert($(this).index())
})
});
</script>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
11 事件代理：利用事件冒泡的原理（事件冒泡就是事件会向它的父级一级一级传递），把事件加到父级上，通过判断事件来源，执行相应的子元素的此操作，事件代理首先可以极大减少事件绑定次数，提供性能；其次可以让新加入的子元素也可以拥有相同的操作
<script>
$(function(){
var $btn = $("btn1");
var $div = $("div");
$btn.click(funvtion(){
alert("button");
return false;
});
$div.click(function(){
alert("div");
});
})
</script>
<div>
<p id="p1">kkkkk</p>
<input type="button" value="按钮" id="btn1">
</div>
11.1 事件代理的使用
语法：$(selector).delegate(childSelector,event,data,function)
参数说明：
childSelector：必需。规定要添加事件处理程序的一个或多个子元素。
event：必需。规定添加到元素的一个或多个事件。由逗号分隔多个事件值。必须是有效的事件。
data:可选。规定传递到函数的额外数据。
function:必需。规定当事件发生时运行的函数。
<script>
$(function(){
$list = $('#list');
//父元素ul 来代理子元素li的点击事件
$list.delegate('li','click',function(){
//$(this)表示当前点击的子元素对象
$(this).css({background:'red});
});
});
</script>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
12 JavaScript对象：所有的事物都是对象；字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript允许自定义对象，对象可以拥有属性和方法
12.1 创建对象操作，两种方法
①通过顶级Object类型来实例化一个对象
<script>
var person = newObject();
person.name = "tom";
person.age = 25;
person.sayName = function(){
alert(this.name);
}
alert(person.age);
alert(person.name);
person.sayName();
</script>
②通过对象字面量创建一个对象
<script>
var person2 = {
name:"Tom";
age:24;
show:function(){
alert("llllllllll")
}
}
alert(person2.age);
alert(person2.name);
person2.show();
</script>
13 json:是JavaScript Object Notaation的首个字母缩写，翻译过来就是javascript对象表示方法，这里说的json就是类似于javascript对象的字符串，它同时时一种数据格式，目前这种数据格式比较流行，逐渐替换掉传统的xml数据格式
13.1 json两种格式
①对象格式：使用一对大括号，大括号里面放入key:value形式的键值对，多个键值对使用逗号分割
{
"name":"Tom",
"age":20
}
其中属性名和字符串值需要用双引号引起，用单引号或者不用引号导致读取数据错误
②数组格式：使用一对中括号，中括号里面的数据使用逗号分隔
["tom",20]
13.2 json数据转换成JavaScript对象：json本质上时字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象
var sJson = '{"name":"Tom","age":18}';
var person = JSON.parse(sJson);
alert(person.name);
alert(person.age);
//浏览器控制台输出
console.log(person);
//获取属性数据
console(person.name+person.age)
14 ajax：是Asynchoronous JavaScript and XML的简写，是一个前后台配合的技术，它可以让javascript发送异步的http请求，与后台通信进行数据的获取，ajax最大的优点是实现局部刷新，可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，即当前端页面想和后台服务器进行数据交互就可以使用ajax
在html页面使用ajax需要在web服务器环境下运行，一般向自己的web服务器发送ajax请求。
14.1 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
});
$.get("data.json",{"name":"ls"},function(data){
alert(data.name);
},"JSON").error(function({
alert("请求失败")
});
</script>
ajax方法的参数说明
url：请求地址
type：请求方式，默认是GET，常用的还有POST
dataType：设置返回的数据格式，常用的是json格式
data：设置发送给服务器的数据，没有参数不需要设置
success：设置请求成功后的回调函数
error：设置请求失败后的回调函数
async设置是否异步，默认值是"true"，表示异步，一般不写
同步和异步说明：
同步时一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步
异步是多个ajax同时请求，不需要等待其他ajax请求完成，好比线程异步
14.2 简写方式
$.ajax按照请求方式可以简写成$.get或者$.post方式
$.get("data.json",{"name":"ls"},function(data){
alert(data.name);
},"JSON").error(function({
alert("请求失败")
});
14.3 ajax的post请求
$.post("data.json",{"name":"ls"},function(data){
alert(data.name);
},"JSON").error(function({
alert("请求失败")
});
*/