jQuery的基本使用

本文介绍: 一、 jQue ry 对象与DOM对象DOM对象：原生 js 获取的对象jQue ry对象：用jQue ry 方法获取的对象注意：1. jQue ry对象只能使用jQue ry 方法，DOM对象只能使用原生 js提供的方法2. jQue ry对象与DOM对象的相互转换：（1）DOM转换为jQue ry对象：$(DOM对象)var new li = document.querySel ec t o r(‘li‘);$(newli);（2）jQue ry 转换为DOM对象：$(DOM对象) $(…

一、 jQue ry对象与DOM对象

DOM对象：原生js 获取的对象

jQue ry对象：用jQue r y 方法获取的对象

注意：

1. jQue r y对象只能使用jQue r y 方法，DOM对象只能使用原生js提供的方法

2. jQue r y对象与DOM对象的相互转换：

（1）DOM转换为jQue r y对象：$(DOM对象)

var newli = document.querySelector('li');
$(newli);

（2）jQuery 转换为DOM对象：$(DOM对象)

$(DOM元素)[index] 或者 $(DOM元素).get(index)

$('.input')[0]; //方法一
$('.input').get(0) //方法二

二、相关 操作

1. 入口函数

原生：window.addEv entListener(‘DOMCon t entLoa de d‘,function(){})

现在：$(function(){})或$(document).read y(function(){}) 即等DOM结构渲染完毕后就执行

2. 设置样式

$(‘div‘).css(‘属性名’,’属性值’)

注意：

（1）jQuery的隐式迭代：遍历匹配到的所有元素，即不需要我们再进行手动循环

（2）多个样式：$(‘div‘).css({width:200, height:200, backgroundCol or:’blue’})

example:

&lt;style&gt;
  * {
    padding: 0;
    margin: 0;
  }
  .nav li {
    float: left;
    width: 100px;
    text-align: center;
    list-style: none;
    cursor: pointer;
  }
  .nav ul{
    display: none;
  }
  .nav ul li:hover {
    background-color: #ccc;
  }
&lt;/style&gt;

<body>
  <ul class="nav">
    <li>微博1
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博2
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博3
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
  </ul>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $('.nav>li').mouseover(function(){
      $(this).children('ul').show();
    })
    $('.nav>li').mouseout(function(){
      $(this).children('ul').hide();
    })
  </script>
</body>

3. 筛选选择器

$(‘li:first‘) – 取第一个li元素

$(‘li:last‘) – 取最后一个li元素

$(‘li:eq(2)’) – 取索引号为2的li元素

$(‘li:odd‘) – 取索引号为奇数的li元素

$(‘li:even’) – 取索引号为偶数的li元素

$(‘.check input:checked‘) – 被选中的复选框（可带length）

一些方法：

$(‘li’).parent() – 查找父级

$(‘div‘).parents(‘选择器‘) – 查找指定的祖先元素

$(‘div‘).children(‘p‘) – 查找子集

$(‘ul’).find(‘li’) – 查找ul里面的li，即后代选择器

$(‘li:first‘).si blin gs(‘li’) – 查找兄弟结点

$(‘li:first‘).nextAll() – 查找当前元素之后的所有同辈结点

$(‘li:last’).pre vAll() – 查找当前元素之前的所有同辈结点

$(‘li’).eq(2) – 查找索引号为2的li元素

$(‘div‘).hasClass(‘current‘) – 判断 div 是否有cur rent这个类名

$(this).index() – 获取当前索引号

ps: .toFixed(2) – 小数点后保留两位小数

4. 添加/删除/切换类

$(‘div‘).addClass(‘cur rent’); — 添加

$(‘div‘).rem oveClass(‘cur rent’); — 删除

$(‘di v‘).toggleClass(‘cur rent’); — 切换

三、jQuery效果

1. 显示/隐藏

（1）show 显示 ([sp ee d, [ea sing], [fn]])

sp ee d：slow、normal、fast、值(毫秒数)

easing：swing（慢-快-慢）、linear（匀速）

fn：回调函数，动画完成时执行

（2）hide 隐藏同 show

（3）toggle 切换同 show

2. 滑动

（1）slideDown 下滑 ([sp ee d, [easing], [fn]])

（2）slideUp 上滑参数同上

（3）slideToggle 切换参数同上

3. 事件切换

hover([over], out)

over：鼠标移到元素上时触发的函数

out：鼠标离开元素时触发的函数

注意：如果只写一个函数，则鼠标经过和离开都会触发这个函数，可以配合toggle方法使用

<body>
  <ul class="nav">
    <li>微博1
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博2
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
    <li>微博3
      <ul>
        <li>首页</li>
        <li>注册</li>
        <li>登录</li>
      </ul>
    </li>
  </ul>
  <script src="./lib/jquery.min.js"></script>
  <script>
    $('.nav>li').hover(function(){
      $(this).children('ul').slideToggle();
    })
  </script>
</body>

注意动画队列：即多次触发，会有多个动画排队现象出现

可以停止排队，使用 stop() —stop()需写到要执行的动画前面

$('.nav>li').hover(function(){
  $(this).children('ul').stop().slideToggle();
})

4. 淡入淡出

（1）fa deIn 淡入 ([sp ee d, [easing], [fn]])

（2）fadeOut 淡出参数同上

（1）fadeToggle 切换参数同上

（1）fadeTo 调整透明度 ([[sp ee d], opacity, [easing], [fn]])

注意：opacity与sp eed必须写，其他参数同上

5. 自定义动画

animate(params, [sp eed], [easing], [fn])

params：样式属性（必须写，并以对象的形式传送）其他参数如上

<script>
  $('div').animate({
    left:300,
    top:100
  },300)
</script>

PS手风琴操作：

ul>li*n 每个li设置较短的宽度（加上overflow:hidden），当鼠标移入到某个li时，当前li的宽度需要增加到图片的正常宽度，而此li的兄弟结点的宽度变为较短宽度。可以使用fadeIn与fadeOut再加上animate({wi dt h:xx})来完成手风琴效果，注意每个jQuery效果前最好都加上stop()防止动画队列中出现多个动画。

四、对元素的操作

1. 遍历对象

方法一：$(‘div’).each(function(index, documentElement) {….})

（1）index — 索引号

（2）documentElement — DOM元素对象

（3）适用于遍历DOM对象

方法二：$.each(object, function(index, documentElement) {….})

（1）object 如：$(‘div’)

（2）适用于遍历数组、对象：
var arr = ['red', 'blue', 'yellow'];
$.each(arr, function(i, elem) {
  console.log(i,elem);
})

2. 创建、添加和删除元素

（1）创建元素

var p = $(“<p>我是创建的p</p>”)

（2）添加元素

$(“div”).append(p) – 放到div内部元素的最后面

$(“div”).pre p end(p) – 放到div内部元素的最前面

$(“div”).after(p) – 放到原来div的后面

$(“div”).before(p) – 放到原来div的前面

（3）删除元素

$(“div”).rem ove() – 删除div元素

$(“div”).empty() – 删除div的所有子节点

$(“div”).html(“”) – 将里面的内容清除（即子节点也没了）

五、jQuery 尺寸以及位置

Size

1. wi dt h()、height() — 得到或修改元素的宽、高

2. innerWidt h()、innerHeight() — 得到加了padding的宽、高

3. outerWidt h()、outerHeight() — 得到带有padding与border的宽、高，若在括号内加上true则会加上margin值

Locat ion

1. offset() — 返回或修改元素距离文档的偏移坐标值（对象），与父级元素无关

若要修改：offset({top:100,left:200})

2. position() — 返回与父亲定位有关的偏移坐标值（对象），不能设置

3. scrollTop() / scrollLeft() — 返回元素被卷去的头部或左侧，animate中也可以有scrollTop

六、on()绑定 事件

element.on(events, [selector], fn) — 可以绑定多个处理事件

1. events：事件类型（用对象形式）

2. selector：子元素选择器，可以实现事件委托

例子：

$(“div”).on({

mouseenter: function() {alert(123);},

click:function(){console.log(111)}

})

$(“div”).on(“click“, “p”, function() {alert(123);}) — div为p的父元素。可以冒泡

注意：

1. 若处理事件相同

$(“div”).on(“mouse over mouseout”, function() {$(this).toggleClass(“red“);})

2. on()可以给动态生成（比如后来生成的）的元素绑定事件

七、off()解绑事件

可移除由on创立的事件

1. $(“div”).off() — 将div身上所有的事件都解绑

2. $(“div”).off(“mouse over”) — 只解除div身上的mouse over事件

3. $(“div”).off(“click“,”p”); — 解除委托事件（div为p的父元素）

注意：用one()来绑定事件 — 事件只触发一次，用法与on相似

八、自动 触发事件trigger()

1. element.event();

2. element.trigger(“event“);

3. element.triggerHandler(“event“); — 特殊：不会触发元素的默认行为

九、jQuery拷贝对象

$.extend([deep], target, object1, [objectN])

1. deep：若设置为true则为深拷贝，默认为false，浅拷贝

2. target：需要拷贝的目标

3. object1：待拷贝到第一个对象的对象

注意：

1. 浅拷贝：将复杂对象的地址拷贝过去，target有而object1没有的数据会被覆盖掉，这样一修改数据，被拷贝对象的数据也会跟着变。

2. 深拷贝：拷贝的对象，而不是地址，target有而object1没有的数据继续保留。修改数据，被拷贝对象的数据不会跟着改变。