本文旨在简单的学习jQuery.

简介

jQuery就是一个更为方便快速的操作DOM的JS库.

jQuery还支持插件拓展开发.

jQuery的基本使用

jQuery代码执行

注意第二种方法不必等所有资源加载完毕,只需DOM对象加载完毕即可.

// 第一种方法
<body>
<div></div>
<script>
    $('div').hide();
</script>
</body>

// 第二种方法
<head>
    // ...
    <script>
        $(function () {
            $('div').hide();
        })
    </script>
</head>

jQuery的顶级对象$

$可认作是jQuery的别称.上面例子的$可直接替换为jQuery.

jQuey对象和DOM对象

console.dir()可把对象在chrome浏览器打印.

打印后可知,jQuery对象和DOM对象并不一样.jQuery对象对DOM对象进行了封装(伪数组形式).

jQuery对象和DOM对象的转换

DOM对象有些属性方法,jQuery对象并没有.


var mvideo=document.querySelector('video');
# DOM转jQuery
$(mvideo); 
# jQuery转DOM
$('video')[0]

jQuery常用的API

jQuery选择器

基础选择器

目的 用法
id $(’#id’)
class $(’.id’)
标签 $(‘div’)
并集 $(‘div,p,li’)
交集 $(‘div.current’)

层级选择器

目的 用法
子代 $(‘ul>li’)
后代 $(‘ul li’)

后代包括子代和孙代等等.

隐式迭代

$('div').css("background","pink")//对所有div对象都修改了,实际上是遍历了一遍

筛选选择器

例子 描述
$(‘li:first’) 第一个元素
$(‘li:last’) 最后一个
$(‘li:eq(2)’) 编号为2的(从0开始)
$(‘li:odd’) 索引号为奇数的
$(‘li:even’) 索引号为偶数的

案例:下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 200px;
            background-color: pink;
        }
        ul li ul {
            display: none;
        }

    </style>
    <script>
        $(function () {
            $('.nav>li').mouseover(
                function () {
                    $(this).children("ul").show();
                }
            );
            $('.nav>li').mouseout(
                function () {
                    $(this).children("ul").hide();
                }
            )

        })
    </script>
</head>
<body>
<ul class="nav">
    <li>
        <a>微博</a>
        <ul>
            <li>
                <a>私信</a>
            </li>
            <li>
                <a>评论</a>
            </li>
            <li>
                <a>@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a>微博</a>
        <ul>
            <li>
                <a>私信</a>
            </li>
            <li>
                <a>评论</a>
            </li>
            <li>
                <a>@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a>微博</a>
        <ul>
            <li>
                <a>私信</a>
            </li>
            <li>
                <a>评论</a>
            </li>
            <li>
                <a>@我</a>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

jQuery高级选择器

语法 说明
$(‘li’).parent(); 父级
$(‘li’).children(‘li’) 儿子
$(‘li’).find(‘li’) 后代
$(’.first’).sibling(‘ul’) 兄弟,不包括自身
$(’.first’).nextALL() 之后的所有同辈
$(’.last’).prevALL() 之前的所有同辈
$(‘div’).hasClass(“protected”) 是否含有特定类
$(‘li’).eq(2) 选择特定编号的元素

jQuery排他思想

// 实现一个按钮点击就是粉色,其他按钮粉色清楚
 $(function () {
            $('button').click(function () {
                console.log("hello");
                $(this).css("background","pink");
                $(this).siblings("button").css("background","");
            });
        })

jQuery样式修改

css方法

// 返回属性值
$(this).css("color"); 
// 修改属性值
$(this).css("color","red"); 
// 输入对象
$(this).css({
    color:"red",
    width:100
    // 复合属性必须为驼峰命名法
    backgroundColor: "green"
})

addClass方法和removeClass方法

原生js会直接清楚,而addClass只是追加.

jQuery效果

显示隐藏

  • show()
  • hide()
  • toggle()

toggle的用处是点一下出来,再点一下隐藏.

滑动

  • slideDown()
  • slideUp()
  • slideToggle()

事件切换

hover(function(){},function(){}) 第一个鼠标经过,第二个鼠标离开,如果只写一个函数,那么经过和离开都会触发这个函数.

淡入淡出

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo() 淡入到某个透明度

fadeTo(1000,0.5) : 1s内转到0.5的透明度.

动画队列及其停止排队方法

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

自定义动画

animate

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>

案例:王者荣耀手风琴效果

<!doctype html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>手风琴案例</title>
 
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
   
  img {
   display: block;
  }
   
  ul {
   list-style: none;
  }
   
  .king {
   width: 852px;
   margin: 100px auto;
   background: url(images/bg.png) no-repeat;
   overflow: hidden;
   padding: 10px;
  }
   
  .king ul {
   overflow: hidden;
  }
   
  .king li {
   position: relative;
   float: left;
   width: 69px;
   height: 69px;
   margin-right: 10px;
  }
   
  .king li.current {
   width: 224px;
  }
   
  .king li.current .big {
   display: block;
  }
   
  .king li.current .small {
   display: none;
  }
   
  .big {
   width: 224px;
   display: none;
  }
   
  .small {
   position: absolute;
   top: 0;
   left: 0;
   width: 69px;
   height: 69px;
   border-radius: 5px;
  }
 </style>
 
</head>
 
<body>
 <script src="js/jquery.min.js"></script>
 <script type="text/javascript">
  $(function() {
   // 鼠标经过某个小li 有两步操作：
   $(".king li").mouseenter(function() {
    // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
    // 不能写成find('.small').stop().fadeOut().siblings().find('.big').stop
    $(this).stop().animate({
     width: 224
    }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
    // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
    $(this).siblings("li").stop().animate({
     width: 69
    }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
   })
  });
 </script>
 <div class="king">
  <ul>
   <li class="current">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/m1.jpg" alt="" class="small">
     <img src="images/m.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/l1.jpg" alt="" class="small">
     <img src="images/l.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/c1.jpg" alt="" class="small">
     <img src="images/c.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/w1.jpg" alt="" class="small">
     <img src="images/w.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/z1.jpg" alt="" class="small">
     <img src="images/z.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/h1.jpg" alt="" class="small">
     <img src="images/h.png" alt="" class="big">
    </a>
   </li>
   <li>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img src="images/t1.jpg" alt="" class="small">
     <img src="images/t.png" alt="" class="big">
    </a>
   </li>
  </ul>
 
 </div>
</body>
 
</html>

jQuery属性操作

// 获取属性
elem.prop('属性')

// 修改属性
elem.prop('属性','值')

// 自定义属性
elem.attr('属性')

// 数据缓存,DOM中看不到该属性
elem.data('属性')

jQuery常用方法汇总

自执行函数

表示文档结构已经加载完成（不包含图片等非文字媒体文件），onload则指示页面包含图片等文件在内的所有元素都加载完成。

// method 1
$(function(){  
// do something  
})

// method 2
$(document).ready(function(){  
//do something  
}) 

// method 3

$().ready(function(){  
//do something  
})

text,html,val

text

text() 方法设置或返回被选元素的文本内容。

当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

语法：

// 返回文本内容：

$(selector).text()
// 设置文本内容：

$(selector).text(content)
// 使用函数设置文本内容：

$(selector).text(function(index,currentcontent))

html

html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

语法：

// 返回内容：

$(selector).html()
// 设置内容：

$(selector).html(content)
// 使用函数设置内容：

$(selector).html(function(index,currentcontent))
// index - 返回集合中元素的 index 位置。
// currentcontent - 返回被选元素的当前内容。

val

val() 方法返回或设置被选元素的 value 属性。

当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。

注意：val() 方法通常与 HTML 表单元素一起使用。

语法

// 返回 value 属性：

$(selector).val()
// 设置 value 属性：

$(selector).val(value)
// 通过函数设置 value 属性：

$(selector).val(function(index,currentvalue))
// index - 返回集合中元素的 index 位置。
// currentvalue - 返回被选元素的当前 value。

css

css() 方法设置或返回被选元素的一个或多个样式属性。

// 如需返回指定的 CSS 属性的值(无指定则返回第一个)，请使用如下语法：
css("propertyname");

// 如需设置指定的 CSS 属性（无指定则设置全部），请使用如下语法：
css("propertyname","value");

get

get() 方法获取由选择器指定的 DOM 元素。

$(selector).get(index)
// index	可选。规定要获取哪个匹配的元素（通过 index 编号）。

参考链接

TODO

赏

我很好奇