jQuery

jQuery

jQuery是一个js函数库
作用和js一样,负责页面和用户之间的交互
优点是对js进行封装,兼容主流浏览器,代码编写也更简单

jQuery用法

jQuery的引入

js有三种使用方法:
	行内式(标签内)
	内嵌式(html内)
	外链式(单独的js文件)
	
jQuery的引入方式:
	<script src="js/jquery-1.12.4.min.js"></script>

jQuery的入口函数

原生的js函数:(因为代码从上往下执行,在写js代码的时候,要么将js写到页面最下边,要么设置页面加载完成后执行)
	<script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
        }
       </script>
       
封装过后的jQuery函数:
	$(document).ready(function(){
       ...
  	});
  	
  	或者:(简写)
  	$(function(){
       ...
  	});

所以在jQuery中操作标签元素,需要:
	引入jQuery
	书写jQuery的入口函数

jQuery选择器

作用:
	快速选择标签元素

种类:
	标签选择器 $('#myId')  // 选择id为myId的标签
	类选择器 $('.myClass')  // 选择class为myClass的标签
	id选择器 $('li')  // 选择所有的li标签
	层级选择器 $('#ul1 li span')  // 选择id为ul1标签下所有li标签下的所有span标签
	属性选择器 $('input[name=first]')  // 选择name属性等于first的input标签

选择集过滤

就是在选择标签的集合中过滤自己需要的标签

has:表示选取包含指定选择器的标签
eq:表示选取指定索引的标签

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});
    });
</script>

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div = $("div").eq(1);
        //  设置样式
        $div.css({"background":"yellow"});
    });
</script>

选择集转移

就是以选择的标签为参考,获取转移后的标签

选择集转移操作

$('#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的元素

获取和设置元素内容

html方法:(可以获取和设置标签的html内容)
	<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>

获取和设置元素属性

# 获取元素属性
prop()

# 获取value属性
val()

jQuery事件

click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
ready() DOM加载完成

this 指的是当前发生事件的对象,但是是一个原生的js对象
$(this)指的是当前发生事件的jQuery对象

事件代理

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

js对象

js对象创建两种方式:
	通过顶级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>

json

一种数据格式

json本质上是字符串,在js中操作json数据,可以将json字符串转化为js对象

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);

// 操作属性
alert(oPerson.name);
alert(oPerson.age);

ajax

ajax是一个前后台配合的技术,可以让js发送异步http请求,与后台通信进行数据的获取

jQuery将ajax封装成$.ajax()
简写方式:
	$.get或者$.post

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置
​
    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>