jQuery

JavaScript库

• 为了简化JavaScript开发,第三方厂商开发了JavaScript库
• 主流JavaScript库
  • jQuery
  • Vue.js
  • AngularJS
  • React

jQuery介绍

• jQuery是一个轻量级JS库, 使用十分简单
• jQuery的核心是选择器，用于获取页面元素
• jQuery提供了大量高效方法,开发速度大幅提升

下载与安装

• jQuery官网: jquery.com
• jQuery采用独立JS文件发布: jquery-3..3.1.js
• IDE: Eclipse、 IDEA、 Hbuilder、 sublime 、webstorm
• 代码示例

<script type="text/javascript">
    /*
        id选择器使用"#id值"进行选择
        css选择器使用".css类名"进行选择
        $(".myclass").addClass("highlight");
    */

    document.getElementById("btnSelect").onclick = function(){
        var selector = document.getElementById("txtSelector").value;
        //jquery的选择器方法
        //选择器
        alert(selector);
        //$("*").removeClass("highlight");
        $(selector).addClass("highlight");
    }
</script>

jQuery选择器

• jQuery选择器用于选中需要操作的页面元素
• 语法1: jQuery(选择器表达式)
• 语法2: $(选择器表达式)
• jQuery=$

基本选择器

id选择器使用"#id值"进行选择
$("#marital_status").addClass("highlight");
css选择器使用".css类名"进行选择
$(".myclass").addClass("highlight");

层叠选择器

• 层叠选择器是根据元素的位置关系来获取元素的选择器表达式

属性选择器

• 属性选择器是根据元素的属性值来选择元素的选择器表达式

位置选择器

• 位置选择器是指通过位置获取指定的元素，例如“获取第3个元素"

表单选择器

• 表单选择器是获取表单元素的简化形式，例如:获取所有文本框

$(:text)

操作元素属性

• attr(name|properties|key) -获取或设置元素属性

//一个属性为获取元素
var href_sttr = $("a[href*='163']").attr("href");
//两个属性为修改元素
$("a[href*='163']").attr("href", "https://afterglow.fun");
//选择多个属性是只会获取第一个选中的值，修改值的时候会将所有选中的值进行修改

• removeAttr(name) -移除元素属性
  $("a").removeAttr("href");

操作元素的CSS样式

• css() -获取或设置匹配元素的样式属性

//设置属性
$("a").css("color","red");
//设置多个属性
$("a").css({"clolr":"blue","font-weight":"1000"});
//获取指定的css属性值
var color = $("a").css("color");

• addClass() -为每个匹配的元素添加指定的类名

//为每个匹配的元素添加指定的类名
$("li").addClass("highlight");
//添加多个
$("li").addClass("highlight myclass");

• removeClass() -从所有匹配的元素中删除全部或者指定的类

//移除
$("p").removeClass("myclass");

设置元素内容

• val() -获取或设置输入项的值

//设置
$("input[name='uname']").val("adminittrator");
//获取
var v = $("input[name='uname']").val();

• text() -获取或设置元素的纯文本

//设置
$("span.myclass").text("锄禾日当午，汗滴禾下土。");
//获取
$("span.myclass").text();

• html() -获取或设置元素内部的HTML

//设置
$("span.myclass").html("<b>锄禾日当午，汗滴禾下土。</b>");
//获取
$("span.myclass").html();

text与html方法最大的区别在于对于文本中的html标签是否进行转译

jQuery事件处理方法

• on(" click" , function) -为选中的页面元素绑定单击事件
• click(function) -是绑定事件的简写形式
• 处理方法中提供了event参数包含了事件的相关信息

jQuery常用事件

$("p.myclass").on("click",function () {
    //$(this)是指当前事件产生的对象
    $(this).css("background-color","yellow");
})
$("span.myclass").click(function () {
    $(this).css("background-color","red");
})
$("input[name='uname']").keypress(function (event) {
    console.log(event)
    if (event.keyCode==32){
        $(this).css("color","red");
    }
})

Ajax

• Asynchronous JavaScript And XML(异步的JavaScript和XML)
• Ajax可以在不刷新页面的前提下，进行页面局部更新
• Ajax不是新的技术，Ajax并不是W3C的标准

Ajax的使用流程

• 创建XmlHttpRequest对象
  • XMLHttpRequest用于在后台与服务器交换数据，是AJAX的核心
  • XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同

var xmlhttp;
if (window.XMLHttpRequest)
// IE7+, Firefox* Chrome, Opera, Safari浏览器执行代码
xmlhttp=new XMLHttpRequest);
}
else
{
// IE6, IE5浏览器执行代码
xmlhttp=new ActiveXObject(" Microsof.XMLHTTP");

• 发送Ajax请求
  • xmlhttp.open()用于创建请求
  • xmIhttp.send()用于发送请求

//创建请求
xmIhttp.open(" GET","http://localhost/test?name= admin' ,true);
//发送到服务器
xmlhttp.send();

• 处理服务器响应
  • xmIhttp.onreadystatechange()事件用于监听AJAX的执行过程
  • xmIhttp.readyState属性说明XMLHttpRequest当前状态
  • xmIhttp.status属性服务器响应状态码,200:成功404:未找到...

xmIhttp.onreadystatechange= function()
{
//响应已被接收且服务器处理成功时才执行
if (xmIhttp.readyState= =4 && xmlhttp.status= =200)
//获取响应体的文本
var response Text = xmlhttp.response Text;
//对服务器结果进行处理
}

Ajax同步与异步

• 同步状态：代码进入等待状态，响应不返回，程序不会继续向下执行,就是前面代码没执行完后面的代码就会一直等待
• 异步状态：程序不会处于阻塞状态，程序依旧向下执行，数据返回时，是通过触发onreadystatechange事件进行数据的获取和处理通常Ajax设置为异步状态
• 使用了同步，xmlhttp.onereadystatechange=function（）{...}，该事件失效..（将function（）代码取出来放在send()后面就行了）
  • 同步状态：代码进入等待状态，数据不返回，程序不会继续向下执行
  • 异步状态：Ajax不会处于程序的阻塞状态，程序依旧向下执行，数据返回时，是通过触发onreadystatechang事件进行数据的获取和处理
    ****通常Ajax设置为异步状态****

jQuery对Ajax的支持

• jQuery对AJAX进行封装,提供了$.ajax()方法
• 语法: $.ajax(options)

$(function () {
            $.ajax({
                "url": "/ajax/news_list",
                "type": "get",
                "data": "t=pypl",
                "dataType": "json",
                "success": function (json) {
                    console.log(json);
                    for (var i = 0; i < json.length; i++) {
                     $("#container").append("<h1>"+json[i].title+"</h1>")
                    }
                }
            })
        })