初识Jquery

一 JQ设计思想？

1.选择网页元素

1）模拟CSS选择元素

//原声JS获取元素
document.getElementById('div1');
document.getElementsByTagName('div');
getByClass(document,'box');
//对应JQ的三种写法
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');

2）独有表达式选择

$('.box').css('background','red');

3）多种筛选方法

页面中有如下元素：

<ul>
    <li></li>
    <li title="hello"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li title="hello"></li>
</ul>

我们如何用JQ进行选择呢?

//1.获取第二个li
$('li:eq(2)').css('background','red');

//2.获取奇数项
$('li:odd').css('background','red');

//3.选择class为box的元素
$('li').filter('.box').css('background','red');

//4.选择title属性为hello的元素
$('li').filter('[title=hello]').css('background','red');

这样看来，JQ是不是很强大？

2.JQ写法

1）方法函数化

使用JQ，其实就相当于使用各种方法函数了。

window.onload = function(){};==> $(function(){});

innerHTML = 123;==> html(123);

onclick = function(){};==> click(function(){});

2）链式操作

什么是链式操作，如下面代码：

var oDiv = $('#div1');     
oDiv.html('hello');        
oDiv.css('background','red'); 
oDiv.click(function(){
    alert(123);
});

我们可以写成：

$('#div1').html('hello').css('background','red').click(function(){
    alert(123);
});

不过如果对JQ不是特别熟的话，不建议这么写，会比较容易看乱

3）取值赋值合体

在JQ当中，基本上看不到”=”赋值了

oDiv.innerHTML = 'hello';  //赋值

alert( oDiv.innerHTML );  //取值

$('#div1').html('hello');  //赋值

alert( $('#div1').html() ); //取值

我们可以看到，JQ的取值和赋值，使用的是同一个表达式，唯一的区别在于有没有参数。但是我们需要注意一个地方：如下面这段html代码：

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
</ul>

我们使用JQ来进行操作：

alert( $('li').html() );  //aaa
$('li').html('hello');  //所有li中的innerHTML都变成了hello

当一组元素的时候，取值是一组中的第一个，赋值则是赋值给所有。

3.JQ与JS关系

可以共存，不能混用

alert( $(this).html() );  //jq的写法

alert( this.innerHTML );  //js的写法

alert( $(this).innerHTML );  //错误的

alert( this.html() );  //错误的

二 JQ常用方法（1）

$()下的常用方法 has()内部包含 not()筛选不包含的 filter()筛选包含的 html代码如下

 <div class="box">div1<span>span</span></div>
 <div>div2</div>

$("div").filter(".box").css("background","red"); //div1变色
$("div").not(".box").css("background","red");//div2变色
$("div").has(".box").css("background","red"); //都不变色
$("div").has("span").css("background","red"); //div1变色

next() prev()

<div>div</div>
<span>span</span>
<p>p</p>

$("div").next().css("background","red");//span变色
$("span").prev().css("background","red");//div变色

find() eq() index()

<div>
	<h3>h3</h3>
	<h2>h2</h2>
	<h3>h3</h3>
	<h3 id="h">h3</h3>
	<h2>h2</h2> <--!这是第一个-->
	<h3>h3</h3>
	<h2>h2</h2>
</div>

<h2>h2</h2>

$("div").find("h2").css("background","red"); //包含在DIV中的h2变红，注意外面的h2不变
$("div").find("h2").eq(1).css("background","red");//包含在DIV中的h2的第1个颜色变红，注意这里索引是从0开始的

alert( $('#h').index() );  //3 --索引就是当前元素在所有兄弟节点中的位置

attr()设置属性

<div title="123">div</div>
$('div').attr('title','456');
$('div').attr('class','box');

编写选项卡

来一个小实例–选项卡效果 html代码：

<div id="wrap">
	<input type="button" value="1">
	<input type="button" value="2">
	<input type="button" value="3">
	<div style="display: block;">1111111</div>
	<div>2222222</div>
	<div>3333333</div>
</div>

css代码：

#wrap div{width: 200px;height: 200px;background: pink;display: none;}
.active{background: red;}

JS代码：

$(function () {
	$("#wrap").find("input").click(function () {
		$("#wrap").find("input").attr("class","");
		$("#wrap").find("div").css("display","none");
		$(this).attr("class","active");
		$("#wrap").find("div").eq($(this).index()).css("display","block");
	});
});

//要点：
//1.onclickclick
//2.this$(this)
//3.div的当前索引eq($(this).index())

三 JS常用方法（2）

$()下的常用方法 addClass()、removeClass()

<div class="box1 box2 box3"></div>

$("div").addClass("box4 box5");//这里即使添加与原有重复的，最后也只会显示一个
$("div").removeClass("box2");

width() innerWidth() outerWidth() 现有一个div样式如下：

div{width: 100px;height: 100px;padding: 10px;border: 10px solid red;margin: 10px;}

我们来看一下这三种方法的区别：

alert($("div").width());         //100
alert($("div").innerWidth());    //120
alert($("div").outerWidth());    //140
alert($("div").outerWidth(true));//160

insertBefore() before() insertAfter() after() appendTo() append() prependTo() prepend()

原始html代码如下：

<div>div</div>
<span>span</span>
<p>p</p>

不同方法对应元素在浏览器中的顺序

$("div").insertBefore($("p")); //span-div-p
$("div").insertAfter($("p")); //span-p-div
$("div").appendTo($("p")); //span-p-div
$("div").prependTo($("p")); //span-div-p
$("div").before($("p")); //p-div-span
$("div").after($("p")); //div-p-span
$("div").append($("p")); //div-p-span
$("div").prepend($("p")); //p-div-span

其实我们可以用insertBefore和before实现同样的功能，那为什么还要有则两种方法呢？区别：后续操作变了

$('span').insertBefore( $('div') ).css('background','red');
//把span插在div前面，把span的背景颜色变为红色
$('div').before( $('span') ).css('background','red');
//把前面是span的div的背景色变成红色

//A insertBefore B--把A插在B的前面，这是一个动作
//B before A--B前面是A

remove()

<div>div</div>
<span>span</span>
$("div").remove();//页面中只剩span

on() off() 前面已经讲过，在JQ中，我们这样写事件

$('div').click(function(){
	alert(123);
});

其实我们也可以这样：

$('div').on('click',function(){
	alert(123);
});

甚至这样：

$('div').on('click mouseover',function(){
	alert(123);
});

$('div').on({
	'click' : function(){ //注意这里使用的是分号
		alert(123);
	}, //中间用逗号相隔
	'mouseover' : function(){
		alert(456);
	}
});

off的应用：

$('div').on('click mouseover',function(){
	alert(123);
	$('div').off('mouseover'); //这样就只弹一次
});

scrollTop()

$(document).click(function(){
	alert( $(window).scrollTop() );  //滚动距离
});

接下来我们利用刚才所学的知识写一个弹窗效果 html代码如下：

<input type="button" value="点击" id="input1">

接下来我们需要实现创建弹窗并居中显示 css代码

#login{ width:300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}

JQ代码

$('#input1').click(function(){
	var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>'); //创建元素
	$('body').append( oLogin ); //插入元素
    //居中显示
	oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
	oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );

	$('#close').click(function(){	
		oLogin.remove();	//直接删除	
	});
    //不用fixed也可以实现下拉滚动条但还是居中
	$(window).on('resize scroll',function(){		
		oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
	    oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );		
	});

});

四 JS常用方法（3）

ev ：event对象原生JS当中写event时我们需要使用兼容方法，在JQ中无需兼容，直接使用ev即可 pageX 相对应的还有pageY ev.pageX(相对于文档的) : clientX(相对于可视区)

$(document).mousemove(function(e){
	$("title").text("X: " + e.pageX + ", Y: " + e.pageY);
});

在标题中显示出鼠标的坐标 which
ev.which : keyCode

preventDefault stopPropagation

ev.preventDefault();  //阻止默认事件
ev.stopPropagation();  //阻止冒泡的操作
return false;   //阻止默认事件 + 阻止冒泡的操作

one()

$('div').one('click',function(){  //只执行事件一次
		alert(123);
});

offset() position() offset()有两个属性，一个是left，一个是top 表示元素到屏幕边缘的距离 html代码如下：

<div id="div1">
	<div id="div2"></div>
</div>

CSS 情景1：

*{margin: 0;padding: 0;}
#div1{width: 200px;height: 200px;background: red;margin: 20px;}
#div2{width: 100px;height: 100px;background: yellow;margin: 30px;}

alert($("#div2").offset().left); //50
alert($("#div2").offset().top); //30--外边距叠加

即使加上定位也不会影响情景2：

*{margin: 0;padding: 0;}
#div1{width: 200px;height: 200px;background: red;margin: 20px;overflow: hidden;}
#div2{width: 100px;height: 100px;background: yellow;margin: 30px;}

alert($("#div2").offset().left); //50
alert($("#div2").offset().top); //50

这里延伸一下overflow: hidden;

1.使用overflow：hidden隐藏溢出,这个功能大家都很清楚，大部分教程中也是有写这个。

2.使用overflow：hidden清除浮动

3.使用overflow：hidden解除margin坍塌

使用overflow除visibility以外的属性，会触发BFC（块级排版上下文）：

默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。

position()指的是元素到已定位的父元素的距离，如果没有已定位的父元素，那就是相对于文档。这里margin坍塌同样是有影响的，就不举例子了。主要说说定位。

情景1：有定位

*{margin: 0;padding: 0;}
#div1{width: 200px;height: 200px;background: red;margin: 20px;position: relative;overflow: hidden;}
#div2{width: 100px;height: 100px;background: yellow;margin: 30px;position:absolute;}

alert($("#div2").position().left);//0
alert($("#div2").position().top);//0

虽然父元素定位了，但是定没有设置left值和top值，margin不算在内,我们加上： #div2{left: 10px;top: 10px;}

alert($("#div2").position().left);//10
alert($("#div2").position().top);//10

情景2：无定位

*{margin: 0;padding: 0;}
#div1{width: 200px;height: 200px;background: red;margin: 20px;overflow: hidden;}
#div2{width: 100px;height: 100px;background: yellow;margin: 30px;}

alert($("#div2").position().left);//20
alert($("#div2").position().top);//20

offsetParent()

- parent() : 获取父级
- offsetParent() : 获取有定位的父级

val() $('input').val()获取value值 $('input').val(123)设置value值

size() $('li').size()相当于li.length each()

$('li').each(function(i,elem){   //一参：下标 二参 : 每个元素	
	$(elem).html(i);//在元素中写入i的值	
});

接下来我们写一个拖拽的效果 div的css效果：

 div{ width:100px; height:100px; background:red; position:absolute;}

position非常重要，没有它就无法实现功能 JS代码如下：

var disX = 0;
var disY = 0;
$('div').mousedown(function(ev){
	disX = ev.pageX - $(this).offset().left;
	disY = ev.pageY - $(this).offset().top;

	$(document).mousemove(function(ev){
     	$('div').css('left',ev.pageX - disX);
		$('div').css('top',ev.pageY - disY);		
	});
	
	$(document).mouseup(function(){		
		$(document).off();		
	});
	
	return false;
	
});

hover() 可以结合以下函数 show()显示 hide()隐藏 fadeIn()淡入 fadeOut()淡出 fadeTo() slideDown()向下展开 slideUp()向上卷

$('#div1').hover(function(){
        $(this).css('background','blue');
},function(){
		$(this).css('background','red');
});

$('#div1').hover(function(){
        $('#div2').hide(3000);
},function(){
		$('#div2').show(3000);
});

$('#div1').hover(function(){
        $('#div2').slideUp();
},function(){
		$('#div2').slideDown();
});

$('#div1').hover(function(){
       $('#div2').fadeTo(1000,0.5);
});

理解jquery设计思想
记住大部分jquery API的使用
英文：http://api.jquery.com/
中文： http://www.css88.com/jqapi-1.9/ http://tangram.baidu.com/api
课上的例子写一遍
之前做过的效果改写成JQ（三个）