javascript学习01

// Lesson 1 Ctrl+/：开启与取消注释
$(document).ready(function(){
// BASIC SELECTORS
//$('*').css('border', '4px solid red');
// BASIC ANIMATIONS
// $('.box:first').animate({bottom: '200px', left: '200px', }, 800);
// INDEX FILTERS
// $('p:eq(2)').css('border', '4px solid red');
// RELATIONSHIP FILTERS
// $('.box:empty').css('border', '4px solid red');
// ATTRIBUTE FILTERS
// $('a[href$=".co.uk"]').css('border', '4px solid red');
});
// Lesson 2
$(function(){
// ATTR METHOD
// $('p:first').attr('class', 'not-lead');
// IMAGE SWAP
// $('img').attr('src', 'img2.jpg');
// $('img').delay(400).fadeOut(500, function(){
// $(this).attr('src', 'img2.jpg').fadeIn(500);
// });
// CLASS METHODS
// $('p').toggleClass('blue').removeClass('lead');
// CONTENT METHODS
// $('p:first').html('<a href="google.com">link</a>');
// $('input').val('yo dude!');
});
// Lesson 3
$(function(){
// DOM TRAVERSAL
//$('h2').parents('section').siblings('header').children().css('border', '4px solid red');
// EVENT BINDING
$('html').keypress(function(){
$(this).toggleClass('blue');
});
});
//by lined
$(function(){
//单击事件
// $("p").click(function(){
// //alert("p click !");
// //$(this).hide();
// $(this).text("asfasdf");
// });
//双击事件：当双击元素时，会发生 dblclick 事件
// $("p:first").dblclick(function(){
// alert("第一段发生了双击事件");
// });
// //鼠标穿过元素事件：当鼠标指针穿过元素时，会发生 mouseenter 事件
// $("p:first").mouseenter(function(){
// alert("鼠标穿过元素事件！");
// });
//鼠标离开元素事件：当鼠标指针离开元素时，会发生 mouseleave 事件
// $("p:first").mouseleave(function(){
// alert("鼠标离开了第一段事件！");
// });
//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
// $("p:first").mousedown(function(){
// alert("鼠标在第一段上方并按下鼠标事件！");
// });
//当在元素上松开鼠标按钮时，会发生 mouseup 事件
// $("p:first").mouseup(function(){
// alert("鼠标在第一段上方并松开鼠标事件！");
// });
//hover()方法用于模拟光标悬停事件。
//当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）；
//当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。
// $("p:first").hover(function(){
// alert("You enter first paragraph");
// },
// function(){
// alert("You have leaved first paragrap");
// });
// $("p:first").hover
// (
// function(){alert("You enter first paragraph");},
// function(){alert("You have leaved first paragrap");}
// );
//当元素获得焦点时，发生focus事件。
//当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点
$("p:first").focus(function(){
$(this).css("background-color","#cccccc");
});
});