JQuery知识点总结

jQuery

核心方法

• $()： 
  参数如果是字符串，此字符串代表选择器 
  参数是JS原生对象，将其转变为jQuery对象 
  参数是一个方法，就是执行document.ready()

• each()：将jQuery选择的元素循环遍历

1

$("img").each(function(){

2

  $(this).toggleClass("example");

3

});

• 注册一个jQuery Plugin

1

    jQuery.fn.extend({

2

        abc : function() {

3

            return this.each(function() {

4

                // 核心的处理代码

5

                $(this).val($(this).val() + "abc");

6

            });

7

        }

8

    });

jQuery选择器

• ID #
• Class .
• 标签 标签名
• find('选择器') 在一定的DOM范围中选择

属性方法

• attr() : 设置DOM属性

1

$("a1").attr("href","www.qq.com");

• addClass() : 添加样式
• html() :

1

$("#adiv").html("<input type='button' value='btn'/>"); // 添加一个按钮

2

$("#adiv").html(); // 取出adiv中的html代码，返回字符串

• text() : 只是纯文本，不会解析为html

• val() ： 取表单元素的值，比如input select…

样式处理

css(style, value)

文档方法

append() 
appendTo() 
after() 
before() 
insertAfter() 
insertBefore() 
replaceWith() 
replaceAll() 
empty() 
remove() 
clone()

筛选方法

eq() 
hasClass() 
children() 
find() 
parent()

事件

ready() 
on() : 通用的时间处理函数 
blur() : 失去焦点时间 
click() 
change()：最多用于select元素

效果

show() 
hide() 
toggle()

[========]

AJAX

• 理解同步和异步的概念
• 理解回调函数的概念

1

    var i = 0;

2

​

3

    var timer = setInterval(function(){

4

        $(".color").hide();

5

        $(".color").eq(i).show();

6

        i++;

7

        if (i == $(".color").length) i = 0;

8

    },1000);

9

​

10

    var t = 0;

11

    $.ajax({

12

        url:"http://localhost:8080/Review/test",

13

        success:function(rs){

14

            t = 1;

15

            console.log(rs);

16

            console.log("t in success = " + t);

17

        } 

18

    })

19

​

20

    console.log("t outside  = " + t);

使用原生的JS进行DOM操作相对较少，在JS的框架中，jQuery和ExtJS(Apple，自成体系)