Java基本概念-jQuery

一 jQuery的实现

 

 1 使用JavaScript查询需要的HTML元素

 

 2 处理JavaScript事件

 

 3 使JavaScript可以兼容主流览器

 

 4 jQuery使用步骤：

 

  （1）引入jQuery：<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

 

  （2）写jQuery代码，写在script中，方法写在$()中

 

二 jQuery的核心方法

 

 1 查找元素

 

 2 创建元素

 

  （1）调用appendTo可以将创建的元素追加在指定元素中

 

 3 将DOM元素包装为jQuery对象

 

  （1）DOM对象只能调用JavaScript的方法

 

  （2）jQuery对象可以调用jQuery的方法

 

  （3）DOM对象和JQuery对象之间可以相互转换，方法如下：

 

    1）DOM对象：window.onload = function(){

            var a3 = document.getElementById("xxx");  }

 

    2）jQuery对象：$(document).ready(function(){

               var a1 = $('#xxx');

               var a2 = $('#xxx')[0];});

 

      DOM对象a3等价于jQuery对象的a2

 

 4 替代onload方法

 

三 jQuery对象的常用方法

 

显示效果类操作

 

 1 show和hide方法可以显示隐藏元素，可以使用toggle方法代替show和hide，toggle会根据当前元素的状态进行显示或隐藏

 

  （1） $(document).ready(function(){

     $('p').click(function(){

         $('#adv').hide();

    });

     $('#content').click(function(){

         $('#adv').show();

    });

});

 

  （2）$(document).ready(function(){

    $('p').click(function(){

        $('#adv').toggle();

    });

});

 

（1）种写法等价于（2）种写法

 

文档处理类操作

 

 1 append和appendTo的区别（两者功能相同）：

 

  （1）append是给容器里面添加内容： $('div').append('<p>append添加的内容</p>');

 

  （2）appendTo是先添加元素：$('<p>appendTo添加的内容</p>').appendTo('div');

 

 2 append、before、after、html、appendTo可以解析html文档，text不能解析html文档，直接输出内容，html替换原来元素中所有的文本内容，除了appendTo添加的内容

 

 3 empty和remove

 

  （1）empty：清空是将元素里面的内容清空

 

  （2）remove：移除是移除整个元素

 

 4 after和before

 

  （1）after：选中元素之前进行操作

 

  （2）before：选中元素之后进行操作

 

四 其他

 

 1 position：fixed 解决浮动广告问题

 

 2 jQuery中多个样式的写法：$(.a1,.a2,.a3)

 

 3 addClass：增加类样式；removeClass：移除类样式

 

 4 绑定事件：bind可以用on替换（1.7后不用bind） 
 5 jQuery的属性操作：设置输入域的值：val（）表示选中或设置被选元素的值，未设置参数时，则返回被选元素的当前值

一 load（）方法：

 

 1 用于载入远程的HTML代码并插入到DOM中

 

 2 语法：$.load(url,[data],[callback]);

 

  （1）url：请求html页的url地址

 

  （2）data：发送至服务器的数据

 

  （3）callback：请求完成时的回调函数，即服务器发送到客户端的数据。

 

二 get（）方法：

 

 1 通过http get请求从服务器上请求数据

 

 2 语法：$.get(url,data,callback)

 

  （1）url:请求HTML页的url地址

 

  （2）data：发送至服务器的key/value值

 

  （3）callback（data（从服务器响应的数据），status（服务器请求响应的状态（success和error两种状态）））：请求完成时的回调函数

 

三 post()方法

 

 1 post()方法通过HTTP POST请求从服务器上请求数据

 

 2  语法 $.post(URL,data,callback)

 

  （1）url(String)：请求的HTML页的URL地址

 

  （2）data(Map)：发送至服务器的key/value数据

 

  （3）callback(Callback)：请求完成时的回调函数

 

四 ajax（）方法：

 

 1 $.ajax是JQuery的底层AJAX实现，返回其创建的XMLHttpRequest对象，如果指定了dataType选项，请确保返回正确的MIME信息。

 

 2 $.ajax只有一个参数，参数key/value对象，包含各配置及回调函数信息

 

 3 $.ajax的详细参数

 

  （1）type:请求方式：post或get

 

  （2）data：发送到服务器的数据

 

  （3）url：发送请求的地址

 

  （4）async:为true时异步请求，为false时为同步请求，默认为true

 

  （5）success：请求成功后回调函数

 

  （6）error:请求失败时将调用此方法

 

  （7）dataType：预期服务器返回的数据类型

 

五 注!

 

 1 post请求传参，后台不用解析字符串，直接根据参数名称获取字符串

 

 2 服务端返回的是json字符串，要将其转换成json对象（JSON.parse（data））