今天完成的事：

总结JQ的基础知识：

在jQuery中，我们一般通过一个字符串来标识匹配的元素，例如：

$("#uid"); // 选取id属性为"uid"的单个元素

$("p"); // 选取所有的p元素

$(".test"); // 选择所有带有CSS类名"test"的元素

$("[name=books]"); // 选择所有name属性为"books"的元素

在jQuery中，对DOM元素进行属性操作，主要是通过以下方法实现的：

// selector 表示具体的选择器

$("selector").val(); // 获取第一个匹配元素的value值(一般用于表单控件)

$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"

$("selector").html(); // 获取第一个匹配元素的innerHTML值

$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"

$("selector").text(); // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理)

$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"

$("selector").attr("class"); // 获取第一个匹配元素class属性

$("selector").attr("class", "code"); // 设置所有匹配元素的class属性为"code"

$("selector").removeAttr("class"); // 移除所有匹配元素的class属性

CSS操作

几乎所有的CSS操作都可以通过jQuery的css()方法来进行。

$("selector").css("margin-left"); // 获取第一个匹配元素的margin-left的属性值

$("selector").css("marginLeft"); // 与上一行代码作用相同，css()支持这两种写法

$("selector").css("marginLeft", 15); // 设置所有匹配元素的margin-left为15px(数字的默认单位

均为px)

$("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性设置所有匹

配元素的多个样式属性

$("selector").css( "marginLeft", ""); // 设为空字符串，则表示删除该样式属性

动画效果

使用jQuery，我们还可以非常简单地实现动画效果。

$("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果

$("selector").show( 400 ); // 显示隐藏的元素，带有400毫秒的过渡动画效果

$("selector").hide(); // 隐藏显示的元素，其用法与show()相同

$("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果

$("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果

$("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果

$("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果

jQuery核心：事件处理

function handler( event ){

    // 事件处理函数的执行代码

    // 参数event表示当前事件对象

    // 函数内的this表示触发事件的当前DOM元素(不是jQuery对象)

   // 如果函数的返回值为false，可以阻止事件冒泡和元素的默认事件行为。

$("selector").click( handler );

$("selector").on( "click", handler );

$("selector").one( "click", handler );

}

// bind()等事件方法均支持为多个事件(以空格隔开)绑定同一个处理函数

$("selector").bind( "mouseenter mouseleve", function(event){

    if(event.type == "mouseenter"){

        // mouseenter事件的执行代码

    }else if(event.type == "mouseleve"){

        // mouseleve事件的执行代码     

    }

} );

// 将JSON字符串转为对应的JS对象

var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );

var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );

// $.each()用于遍历数组元素或对象属性

var array = [ 12, "jQuery", true ];

$.each( array, function(i, value){

    // i 表示当前迭代元素的索引或对象的属性名称

    // value 表示当前迭代的数组元素或对象的属性值

    // this 与  value 相同

    alert( i + " = " + value );

    // 如果函数return false，将终止遍历

});

明天计划的事：

            1，开始任务5的编写      

遇到的问题：

收获：

JQ有点类似于CSS写法，当然JQ相对于原生可以简写很多代码。