jQuery 选择器杂谈

        jQuery作为目前应用比较广泛的框架,也是早期的一款功能齐全,实用的框架,在刚刚问世之时深受众多人的喜爱与追捧,虽然现如今jQuery显露没落之态,但不可否认他的强大,这里我就选取他的几个重要功能来谈谈。

JQuery选择器

    JQuery选择器是我第一次接触这款框架时便被其震撼的功能,简单,粗暴,直接,毕竟,当时受够了原生选取dom节点的痛苦,所以,在一看到这个选择器时,就喜欢上了这个框架,也由此开始了我对jQuery的探索之旅。

        JQuery的选择器有几十种,常用的也有十几种:

            类选择器:$(".class"),id选择器:$("#id"),标签选择器:$("tagName"),组合选择器:$("image,div")

            父子级选择器:$("ui li"),伪类选择器:$("div:hover"),$("div:active").

以上这些大概就是我们常用的选择器,比起以前的document.getElementById("id")这么一大串的的东西,现在只要一个$加("")就可以实现,真的是大大节省了我们的时间,将我们从繁重的冗余代码中解放出来。

jQuery框架思想:jQuery是封装很多底层的方法的一个框架,他的操作层面是dom层,也就是说,他做的一切都是基于dom的操作,他是以dom驱动的核心思想。所以说这也是jQuery这种类型的框架最终会被我们摒弃的原因,一个无法在数据层面去改变文本解构的框架,逐渐会被数据驱动的框架所取代,就像 现在最火的三大框架:vue ,angular,react 这三者就是数据驱动的框架,通过数据的改变进而改变dom结构,所谓的MVVM结构,模型-视图,视图-模型,相互影响。

AJAX

jQuery的ajax封装了很多实现的方法,我用过了其他框架封装的ajax之后,个人认为jquery的ajax方法是最方便,最容易入手的,这里简单讲讲:

        $.load()  load()方法简而言之,就是异步加载远程的html文件,比较粗糙的一种异步手段,直接加载一段HTML代码片段,并追加到dom结构中

        load(url,[data],callback)  =>callback (responseText,textstatus,XMLHttpRequest){}

        $.ajax({ })  

$.ajax是jquery ajax方法最底层的实现,所以自由度也比较高,这个方法只能有一个参数:params

    params:{

        url: 请求的地址

        type: 请求方式,get/post 默认是get

        data: 发送到服务器的数据 GET自动附加在url后面,post 方式作为http消息的实体内容发送给服务器,

        datatype: 服务器预期返回的数据类型

        "Content-Type":"application/json"; (数据编码格式)

        complete: 请求完成后调用的回调函数(成功或失败均调用)

        function(XMLHttpRequest,TextStatus){}

        success:请求成功后的调用的回调函数,

        error: 请求失败后调用的回调函数

        global: 是否全局出发ajax事件,默认为true

};

    ajax的get方式封装的方法

$.get(

        url: 请求的url地址

        data: 发送到服务器中数据会作为QueryString附加到url中

        type: 服务器返回的数据格式,包括xml,html,script,json,text,_default;(这里的type和$.ajax的Type不同,== dataType)

        callback: 载入成功时回调函数,自动将请求结果和请求状态传递给该方法,success/error

);

还有 一些就是$.post(params);$.getScript;$.getJson()

跨域:

        异步加载的最容易碰到的问题,jquery也提供了解决方法:JSONP

json  with padding  在服务器端集成script函数,并将标签返s回到客户端,客户端通过一个回调函数实现绕过浏览器的同源资源共享策略的机制,实现请求,完成访问。

        在$.ajax()的参数里加入  dataType : "jsonp",

                                                 jsop : "callback"

                                                jsonpCallback : function callback(){}

你可能感兴趣的:(jQuery 选择器杂谈)