jQuery的使用

jQuery是js的一个整合库，因为快速，小巧等众多优点而被广泛使用，现如今变成了大部分人编写javascript的方式。jQuery语法是通过选取html元素，对其执行某些操作。
1)jQuery语法，基础语法是$(selector).action()，要特别注意的是为了防止在完全加载之前就运行jQuery代码，因此需要在文档就绪之后才能写jQuery代码，格式是这样的

$(document).ready(function () {
          //开始写jQuery代码
})

而且可以简化为如下：

$(function () {
          //开始写jQuery代码
})

2）jQuery选择器主要是通过$()方式来进行选择，如果根据括号里面的内容来进行判断选择元素的类型等。

$("p")/$("h1")/$(".class1")/$("#id1")/$("p.first")/$("ul li:first")

3）在jQuery中，绝大多数DOM事件都有一个等效的JQuery方法，
例如：

$("p").click(function () {
    console.log("111");
});

4）jQuery有一系列方法来改变效果，例如，show、hide、fadeIn、fadeOut、animate等方法
下面是一些有关的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    $(function () {
   $(".rect").click(function () {
       console.log("rect click已加载");
       console.log($(this)[0].style);
       $(this)[0].style.background="#000000";
       $(this).hide();
        setTimeout(function () {
            $("div").show();
        },3000);
   })
    //先绘制一个圆
    var ctx=$('.arc')[0].getContext('2d');
   ctx.arc(150,50,100,0,2*Math.PI);
   ctx.lineWidth="5";
   ctx.stroke();
    $(".arc").click(function () {
       $('.arc').fadeOut();
       $('.arc').fadeIn();
    })
    $('.slide').click(function () {
        console.log('slide click已加载',$(this));
        console.log([0])
        $('.slide').slideDown();
        var div=$("div");
        div.animate({height:'300px',opacity:'0.4'},"slow");
        div.animate({width:'300px',opacity:'0.8'},"slow");
        div.animate({height:'100px',opacity:'0.4'},"slow");
        div.animate({width:'100px',opacity:'0.8'},"slow");
    });
})

5）jQuery也可以对html元素进行一系列操作，比如追加，删除，修改等。

1
2
3
4
5
$('.header').css("background","red")
    .slideUp(2000)
    .slideDown(2000)
    .append("<p class='subh'>header</p>");
$('p').remove('.header');

6）jQuery也可以用来写AJAX，其中有load方法，ajax方法，get/post方法，分别对应了不同的情况，

    $('#ajax').load("demo.txt");

load方法可以直接把获取的值返回给元素。

    var response=$.ajax({
    url:"demo.txt",
    async:false,
    success:function (data) {
        console.log(data);
    }});
console.log(response)

ajax方法则是简化了原生的ajax，
get方法和post方法则是使用不同的请求类型去

 $.post("demo.txt",{
    name:"yechuchen",
    url: ""
},
function (data) {
    console.log(data)
})