jquery思想和方法

jquery是什么？
一系列函数的集合，是别人封装好的函数，自己拿去调用就OK了

主要就是用更少的代码实现更多的功能

比如：页面上有两个按钮，一张图片，当点击hidden按钮时隐藏图片，当点击show按钮时显示图片

一般情况，利用DOM技术，当点击按钮时触发onclick事件进而引发一个函数，但代码很长

如果用jquery,如$("#ID")，它的本质是一个函数，$其实只是一个方法名而已，#ID是函数的形参，这样做给了我们一个假象，就是只需要调用这个函数就能够定位到某个节点，这样代码就会简洁很多，不需要通过document.getElementById();document.getElementsByTagName();document.ElementsByName()来实现

get( )和eq( )的区别

eq返回的是一个jquery对象，get返回的是一个html 对象数组
返回的是jQuery对象，就可以继续调用其他方法，返回的是html数组就不能调用jQuery的其他方法

<p style="color:red">颜色</p>
使用eq来获得第一个p标签的color值： 
$("p").eq(0).css("color") //因为eq(num)返回的是个jq对象，所以可以用jq的方法css使用get来获得第一个p标签的color值： 
$("p").get(0).style.color //因为get(num)返回的是个html对象，所以要使用传统的HTML对象方法，jq对象此时就没用了。
当然，也可以get(num)后把对象转为jq的对象再进行操作： 
$($("p").get(0)).css("color")

选择网页元素

jQuery的基本设计思想和主要用法，就是选择某个网页元素，然后对其进行某种操作

选择表达式可以是CSS选择器：

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素

也可以是jQuery自己的表达式：

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

链式操作

比如：$('div').find('h3').eq(2).html('Hello');

分解开就是：

$('div') //找到div元素

.find('h3') //选择其中的h3元素

.eq(2) //选择第3个h3元素

.html('Hello'); //将它的内容改为Hello

jQuery还提供了.end（）方法，使得结果集可以后退一步

取值和赋值

$('h1').html();  //html()没有参数，表示取出h1的值

$('h1').html('Hello');  //html()有参数Hello，表示对h1进行赋值

常见的几个：

.html() 取出或设置html内容

.text() 取出或设置text内容

.attr() 取出或设置某个属性的值

.width() 取出或设置某个元素的宽度

.height() 取出或设置某个元素的高度

.val() 取出某个表单元素的值

移动

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

$('div').insertAfter($('p'));

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>

第二种方法是使用.after()，把p元素加到div元素前面：

$('p').after($('div'));

把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>

四对操作方法：

.insertAfter()和.after()：在现存元素的外部，从后面插入元素

.insertBefore()和.before()：在现存元素的外部，从前面插入元素

.appendTo()和.append()：在现存元素的内部，从后面插入元素

.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

事件操作:把事件直接绑定在网页元素之上。

$('p').click(function(){

　　　　alert('Hello');

　　});

jquery中的事件

.blur() 表单元素失去焦点。

触发所有段落的blur事件

$("p").blur();

.change() 表单元素的值发生变化

触发被选元素的 change 事件。

$(selector).change();

.click() 鼠标单击

.dblclick() 鼠标双击

.focus() 表单元素获得焦点

.focusin() 子元素获得焦点

.focusout() 子元素失去焦点

.hover() 同时为mouseenter和mouseleave事件指定处理函数

.keydown() 按下键盘（长时间按键，只返回一个事件）

在页面内对键盘按键做出回应，可以使用如下代码:

jQuery 代码:
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});

.keypress() 按下键盘（长时间按键，将返回多个事件）

.keyup() 松开键盘

.mousedown() 按下鼠标

.mouseenter() 鼠标进入（进入子元素不触发）

.mouseleave() 鼠标离开（离开子元素不触发）

.mousemove() 鼠标在元素内部移动

.mouseout() 鼠标离开（离开子元素也触发）

.mouseover() 鼠标进入（进入子元素也触发）

.mouseup() 松开鼠标

.ready() DOM加载完成

.resize() 浏览器窗口的大小发生改变

.scroll() 滚动条的位置发生变化

.select() 用户选中文本框中的内容

触发所有input元素的select事件:

$("input").select();

当文本框中文本被选中时执行的函数:

$(":text").select( function () { /* ...do something... */ } );

.submit() 用户递交表单

.toggle() 根据鼠标点击的次数，依次运行多个函数

.unload() 用户离开页面

事件运行一次，可以使用.one()方法
$("p").one("click", function() {

　　　alert("Hello"); //只运行一次，以后的点击不会运行

});

事件对象：所有的事件处理函数，都可以接受一个事件对象作为参数

$("p").click(function(e) {

　　　alert(e.type); // "click"

});

事件对象的属性和方法：

event.pageX 事件发生时，鼠标距离网页左上角的水平距离

event.pageY 事件发生时，鼠标距离网页左上角的垂直距离

event.type 事件的类型（比如click）

event.which 按下了哪一个键

event.data 在事件对象上绑定数据，然后传入事件处理函数

event.target 事件针对的网页元素

event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）

event.stopPropagation() 停止事件向上层元素冒泡

 

工具函数

字符串操作
$.trim()：去除字符串左右两边的空格

去掉字符串起始和结尾的空格。

$.trim("  hello, how are you?  ");

数组和对象操作
$.each()
　　遍历数组
　　$.each(array,function(index,value){})：array:数组变量，index:元素下标，从0开始，value:元素值
　　遍历对象
　　$each(object,function(name,value){})：object:对象，name:属性名，value:属性值

例遍数组，同时使用元素索引和内容。

jQuery 代码:
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

例遍对象，同时使用成员名称和变量内容。

jQuery 代码:
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

$.inArray()：查找元素的下标
$.inArray(value,array)：value:元素值，array:查找的数组，返回元素在数组中的下标，从0开始
$.merge()：合并两个数组
$.merge(array1,array2)：将第二个数组加到第一个数组后面
$.unique()：去除重复DOM元素
$.unique(dom)：dom:DOM元素
.toArray()：把jQuery集合中所有DOM元素恢复成一个数组。
.parseJSON(json)：接受一个JSON字符串，返回解析后的对象。
.parseXML(data)：解析一个字符串到一个XML文件。

$extend()：用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
　　jQuery.fn.extend(object);给jQuery对象添加方法。
　　jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。

jQuery.fn = jQuery.prototype 即指向jQuery对象的原型链，对其它进行的扩展，作用在jQuery对象上面；

一般用此方法来扩展jQuery的对象插件   

将hello方法合并到jquery的实例对象中。

 $.fn.extend({

      hello:function(){alert('hello');}

  });

在jquery全局对象中扩展一个net命名空间。

 $.extend($.net,{

       hello:function(){alert('hello');}

 });  //使用jQuery.net.hello();

增加两个插件方法。

jQuery 代码:
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

结果:
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

$.map( )：将一个数组中的元素转换到另一个数组中。

将原数组中每个元素加 4 转换为一个新数组。

jQuery 代码:
$.map( [0,1,2], function(n){
  return n + 4;
});

结果:
[4, 5, 6]

原数组中大于 0 的元素加 1 ，否则删除。

jQuery 代码:
$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});
结果:
[2, 3]

原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。

jQuery 代码:
$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
});
结果:
[0, 1, 1, 2, 2, 3]

.toArray()：把jQuery集合中所有DOM元素恢复成一个数组。
.parseJSON(json)：接受一个JSON字符串，返回解析后的对象。
.parseXML(data):解析一个字符串到一个XML文件。

测试操作
$.isArray()：判断是否为数组对象，返回boolean
$.isFunction()：判断是否为函数，返回boolean
$.isEmptyObject()：判断是否为空对象，返回boolean
$.isPlainObject()：判断是否为纯粹对象，返回boolean
$.contains()：判断DOM节点是否包含另一个DOM节点
$.type()：输出数据类型，返回对象的数据类型
$.isNumeric()：判断是否为数值类型
$.isWindow()：判断是否为Window对象

URL操作
$param()：将对象的键值对转化为URL键值对字符串形式
　　$param(object)：object:需要转化的对象
.error(message)：接受一个字符串，并且直接抛出一个包含这个字符串的异常。

插件编写
.error(message):接受一个字符串，并且直接抛出一个包含这个字符串的异常。
$.fn.jquery:代表 jQuery 版本号的字符串。
其他操作
$.proxy()：调整this的指向
外部事件触发调用对象方法时，this指向会有问题（会调用触发的对象）

特殊效果

显示隐藏：可设置函数和线性运动

$("p").hide();隐藏   

$("p").show();显示  

$("p").toggle(); 隐藏的时候显示，显示的时候隐藏

淡入淡出

fadeIn() 淡入已隐藏的元素

fadeout() 淡出可见元素

$('h1').fadeIn(300); // 300毫秒内淡入

$('h1').fadeOut('slow'); // 缓慢地淡出

fade Toggle() 方法 淡出就淡入 淡入就淡出

fadeTo()  把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

滑动

slideDown();向下滑动   slideUp(); 向上滑动  slideToggle(); 反过来滑动

动画

animate()创建动画  可以操作多个属性  height opacity等  也可以使用相对值  “+=”

点击按钮后div元素的几个不同属性一同变化

HTML 代码:
<button id="go"> Run</button>
<div id="block">Hello!</div>

jQuery 代码:
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
     "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});