JQueryTutorial 笔记

简单指引：
1 CSS；2 html / val；3 更精细的选择器^ *；4 DOM操作；5 类相关
6 鼠标；7 键盘；8 input；9 on；
10 fade / sliceUp效果；11 animation动画
12 项目使用要点补充

JQuery

https://jquery.com/

引入库的在线地址

https://developers.google.com/speed/libraries/
比如可以获取到jQuery的在线地址等:

1、CSS

$("#wrapper").css("width", 500);
$("#wrapper").css("margin", "auto");
$("#p_two").css({
	"background": "url('bk.png') repeat-y"
});

CSS所有样式名称集合：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

2、html / val

$("li[name]").html("'aaaaaaaa'");
$("input[type='text']#yourName").val("David");

如果是html标签，则使用html修改；如果是input标签，则使用var修改。

3、更精细的选择器

$("a[href*='google']").css("font-weight", "bolder");     //href中包含google的a
$("img[alt^='NTT']").css({                               //alt中以NTT开头的img
	"border-color": "gray",
	"border-width": "1px",
	"border-style": "solid"
});

4、DOM操作

插入：
append / prepend
before / after

删除：
remove

替换：
replaceWith

$("after_p").click(function(){
	$(this).replaceWith("<p>I'm a new paragraph!</p>");
});

5、类相关

$("#oListIndent li").addClass("Harry_Potter");
$("#oListIndent li").click(function(){
	$(this).toggleClass("highlight");
});

toggleClass() 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

6、鼠标行为监听器

mouseenter / mouseover / mousemove / mouseleave / click / dblclick / hover

mouseenter和mouseover区别：
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。（执行次数可能多于一次）
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。（执行一个）
实验：http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover

$(document).mousemove(function(e){
	$("#mMoveXPos").val(e.screenX);
	$("#mMoveYPos").val(e.screenY);
});

mousemove方法是鼠标在指定元素内滑动时执行，每移动一个像素就会执行一次。

$("h2").hover(function(){
	$("h2").css("color", "green");
}, function(){
	$("h2").css("color", "red");
});

hover方法可以传递两个方法，第一个在mouseenter时执行，第二个在mouseleave时执行，如果只传入一个方法，则在enter/leave时都执行。

7、键盘行为监听器

keypress

$(document).keypress(function(e){
	var keyPressed = String.fromCharCode(e.which);
	$("#keypressed").val(keyPressed);
});

8、input事件监听器

focus / blur(input失焦) / change / select(鼠标选取input内容)

$("#inputFormEvent").blur(function(){
	$("formEvent").text("Left Input Element");
});

9、on

function showWhatTouched(e){
	alert(e.data.message);
}
var bsMsg = { Message: "Best Selling Touched"};
var teMsg = { Message: "Tracks Events Touched"};

$("#bestSelling").on("mouseover", bsMsg, showWhatTouched);
$("trackEvents").on("mouseover", teMsg, showWhatTouched);

10、fade / sliceUp效果

$("#p_two").click(function(){
	$(this).fadeOut(2000);
	$("#p_one").fadeToggle(2000);
	$("#logo2").fadeTo("slow", .50);  // duration: String(fast, slow) / Number, Opacity
	$("td:contains('Bonds')").click(function(){
		$("tr:has(td:contains('Bonds'))").sliceUp(1000);  // 通过滑动效果隐藏指定元素
	});
});

fadeToggle方法如果消失了会逐渐显示，如果显示了会逐渐消失。

11、animation 动画

$("#p_one").click(function(){
	$(this).css("position", "relative");
	$("#p_one").animate({
		left: 300,
		opacity: .5,
		'font-size': "22px",
		width: 300
	}, 2000, "easeInQuad", function(){alert("All Done!");});
});	

12、项目使用要点补充

extend —— 将多个对象合并到第一个对象中。

//JQuery
var object = $.extend({}, object1, object2);
//JS
var object = Object.assign({}, object1, object2);

delegate —— 通过父组件给子组件绑定事件 使用场景：子组件会删除/重写等，过去绑定的子组件消失，同名组件不能执行原来的事件响应，所以通过一直存在的父组件给子组件绑定。

$(".father").delegate(".children", "click", function(){
	$.get("/domain?=" + $(this).attr("data-id"),{}, function(result){
		alert(result);
	});
});

例子中加入了jquery实现的ajax，用法很简单$.get(url,{},function(result){});

e.preventDefault() —— 阻止默认事件 使用场景：比如一个a标签，需要处理click事件且不跳转

---

JQuery UI

https://jqueryui.com/

---

Youtube视频学习笔记，视频地址：
https://www.youtube.com/watch?v=BWXggB-T1jQ
视频中的代码在线地址：
http://www.newthinktank.com/2015/10/learn-jquery-one-video/