jQuery入门讲解

jQuery设计思想：

（1）选择页面元素

css选择器：

$(document) 选择整个文档对象， $("#myId") 选择id为myId的页面元素， $("div.myClass")选择class为myClass的div元素

jQuery特有的选择器：

$("a:first")选择页面中第一个a元素，$("tr:odd")选择表格的奇数行，$("div:visible")选择可见的div元素。

（2）方法函数化

原生的：window.onload，innerHTML，onclick。

jQuery的:$()，html()，click()。

在jQuery代码中很少看到有等号出现的情况。因为它都函数化了，意思就是用函数的形式改写了原生的操作。比如:div.innerHTML = "chaojidan"，$("div").html("chaojidan")；div.onclick = function(){}，$("div").click(function(){});

（3）原生与jQuery的关系

原生和jQuery可以共存，比如：$("div").click(function(){ this.innerHTML = "chaojidan";})

原生和jQuery不能混用，比如：$("div").innerHTML = "chaojidan"; div.html("chaojidan")，这两个都是错误的写法。

（4）改变结果集

强大的过滤器：$("div").has("p")选择包含p元素的div元素，$("div").not(".myClass")选择class不等于myClass的div元素，$("div").filter(".myClass")选择class等于myClass的div元素。

相邻元素查找：$("div").next("p")选择div元素后面的（必须紧挨着）第一个p元素，$("div").parent()选择div元素的父元素，$("div").children()选择div元素的所有子元素。

（5）链式操作

$("div"). //找到页面上的所有div元素

　　find("h3"). //在div元素下找h3元素

　　　　eq(2). //取第三个h3元素

　　　　　　html("chaojidan"); //设置它的内容为chaojidan

jQuery还提供了.end方法，此方法可以使结果集后退一步。比如：

$("div"). //找到页面上的所有div元素

　　find("h3"). //在div元素下找h3元素

　　　　eq(2). //取第三个h3元素

　　　　　　html("chaojidan"). //设置它(第三个h3元素)的内容为chaojidan

　　　　　　　　end(). //此时的this指向就是在div元素下找h3元素的那个集合

　　　　　　　　　　.eq(0). //取第一个h3元素

　　　　　　　　　　　　.html("chaojidan2"); //设置它的内容为chaojidan2

（6）取值与赋值合体

$("h1").html(),没有参数，表示取出h1的值；$("h1").html("hello")，有参数，表示对h1进行赋值。

取值是对一组元素的第一个元素做操作，赋值是对一组中的所有元素做操作。

.css()，.attr()，这些函数，当传入一个参数时，是取值，当传入两个参数时，是赋值。

（7）元素的移形换位

直接移动该元素：$("div").insertAfter($("p"));把div元素移动到p元素的后面；$("p").appendTo($("div"));把p元素移动到div元素的里面。比如：$("div").insertAfter($("p")).css("background","red");这里会把div元素的背景颜色设置成红色。

移动其他元素：$("p").after($("div"))把div元素移到p元素的后面；$("div").append($("p"));把p元素移动到div元素的里面。比如：$("p").after($("div")).css("background","red");这里会把p元素的背景颜色设置成红色。

（8）强大的创建

$("#ul").append("<li>aaa</li>");创建一个li元素，把它添加到ul中。

$("<li>");创建一个li元素

$("div").clone().appendTo($("p"));克隆一个div元素，并把这个克隆的div添加到p元素里面，原来的那个div不变。

（9）工具方法

构造函数上的方法（静态方法）：$.each([],function(){})，$.trim()。原生的js可以调用这些方法。比如：var liList = document.getElementsByTagName("li");$.each(liList,function(index,element){});

原型上的方法（实例方法）：$("div").each(function(index,element){})

（10）事件操作

独立事件：click()针对click事件，mouseover()针对mouseover事件，比如:$("div").click(function(){})，点击div元素会触发回调函数。

通用事件：bind()，one()，unbind()，比如：$("div").bind("click mouseover",function(){})，这里给div元素绑定了click和mouseover两个事件。

jquery中，如果在回调函数中，返回false，表示阻止事件冒泡以及阻止默认操作。

在js原生方法中，div.onclick = function(){}，在回调函数返回false，也有一样的效果。

attachEvent也有一样的效果，但是addEventListener就不行。

（11）运动效果

常见效果：.fadeIn()淡入，.fadeOut()淡出，.slideDown()向下展开，.slideUp()向上卷起。

比如:$("#input1").toggle(function(){$("#div1").fadeOut()}, function(){$("#div1").fadeIn()})，点击按钮input1，就会把div隐藏，再次点击input1，就会把div显示。

复杂效果：.animate()动画操作，stop()。比如：

$("#div1").hover(

　　function(){

　　　　　　$(this).animate({

　　　　　　　　width:300,

　　　　　　　　height:300

　　　　　　})

　　function(){　　　

　　　　　$(this).animate({

　　　　　　　　width:200,

　　　　　　　　height:200

　　　　　　})

　　}

)

鼠标移入div元素，元素div就会变成大到300*300，鼠标移出div元素，元素div就会缩小到200*200.

stop方法是用来停止动画的。

（12）插件机制

在jQuery的源码上进行扩展。是其他人写的，不是jQuery官方写的，比如你自己也可以写一个基于jQuery的list列表插件list.js。在使用此插件时，你需要先引入jQuery，然后再引入你的list.js。如果想详细了解jQuery插件请看：http://www.cnblogs.com/chaojidan/p/4213942.html

（13）UI组件

jQuery官方提供的功能效果和UI样式。比如：选项卡Tab，拖拽Draggable。你使用这些功能效果时，除了需要引入jQeury外，还需要引入jQuery.ui.js（这个js文件里面实现了这些功能效果）。如果想深入了解jQuery UI，请看：http://www.cnblogs.com/chaojidan/p/4220941.html

加油！

巴特西

jQuery入门讲解

最新文章

热门文章