jQuery基础与实例

时间：2016-08-17 15:19:43 阅读：186 评论：0 收藏：0 [点我收藏+]

标签：

一、简介

1、什么是jQuery

　　jQuery是一个轻量级、快速简洁的javaScript库，能让我们方便快捷的选择元素操作元素属性。

2、下载地址

3、jQuery使用方式

　　$("div")等价于jQuery("div"),通常使用前者。

二、查找元素

1、选择器

　　a、基本选择器

<!--基本选择器-->
    $("#id")            //ID选择器
    $("div")            //元素选择器
    $(".classname")     //类选择器
    $(".classname,.classname1,#id1")     //组合选择器


<!--层级选择器-->

    $("#id>.classname ")    //子元素选择器
    $("#id .classname ")    //后代元素选择器
    $("#id + .classname ")    //紧邻下一个元素选择器
    $("#id ~ .classname ")    //兄弟元素选择器


<!--属性选择器-->
    $("div[id]")        //所有含有 id 属性的 div 元素
    $("div[id=‘123‘]")        // id属性值为123的div 元素
    $("div[id=‘!123‘]")        // id属性值不等于123的div 元素
    $("div[id=‘^qq‘]")        // id属性值以qq开头的div 元素
    $("div[id=‘$zz‘]")        // id属性值以zz结尾的div 元素
    $("div[id=‘*bb‘]")        // id属性值包含bb的div 元素
    $("input[id][name$=‘man‘]") //多属性选过滤，同时满足两个属性的条件的元素

　　b、表单选择器

<!--表单选择器-->
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

<!--表单对象属性-->
$("input:enable")       //可用input元素
$("input:disable")       //禁用的input元素
$("input:checked")    //所有选中的元素
$("select option:selected")    //select中所有选中的option元素

2、筛选器

　　a、基本筛选器

<!--基本筛选器-->
$(‘li:first‘)    //第一个元素
$(‘li:last‘)     //最后一个元素

$("li:even")     //索引为偶数的元素
$("li:odd")      //索引为奇数的元素
 
$("li:eq(1)")    //给定索引值的元素
$("li:gt(0)")    //大于给定索引值的元素
$("li:lt(2)")    //小于给定索引值的元素

$(":focus")      //当前获取焦点的元素
$(":animated")   //正在执行动画效果的元素

　　b、内容筛选器


$("div:contains(‘John‘)")    //包含John文本的元素
$("td:empty")    //不包含子元素或者文本的空元素
$("div:has(selector)")  //含有选择器所匹配的元素
$("td:parent")   //含有子元素或者文本的元素

　　c、可见性筛选器

$("tr:hidden")      //所有隐藏的tr元素
$("tr:visible")     //所有可见的tr元素

3、过滤器

过滤器行为基本和筛选器一致，但过滤器作为方法来调用，使用更加灵活，因此尽可能使用过滤器而不是筛选器。

　　a、过滤

$("p").eq(0)       //当前操作中第N个jQuery对象,类似索引
$(‘li‘).first()    //第一个元素
$(‘li‘).last()     //最后一个元素
$(this).hasClass("test")    //元素是否含有某个特定的类,返回布尔值
$(‘li‘).has(‘ul‘)  //包含特定后代的元素
$(‘li‘).slice(0,2)  //选取一个子集，如果起始是负数，则从后开始。
$("input[type=‘checkbox‘]").parent().is("form") //如果其中至少有一个元素符合这个给定的表达式就返回true。

　　b、查找

<!--查找-->
//查找方法中都可以带表达式进行过滤

$("div").children()      //div中的每个子元素,第一层
$("div").find("span")    //div中的包含的所有span元素,后代
$("div").contents()　　　　//div下的所有节点，包括文本节点而不是元素。

$("p").next()       　　　//紧邻p元素后的一个同辈元素
$("p").nextAll()         //p元素之后所有的同辈元素
$("#test").nextUntil("#test2")    //id为"#test"元素之后到id为‘#test2‘之间所有的同辈元素,掐头去尾

$("p").prev()            //紧邻p元素前的一个同辈元素
$("p").prevAll()         //p元素之前所有的同辈元素
$("#test").prevUntil("#test2")    //id为"#test"元素之前到id为‘#test2‘之间所有的同辈元素,掐头去尾

$("p").parent()          //每个p元素的父元素
$("p").parents()         //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")    //id为"#test"元素到id为‘#test2‘之间所有的父级元素,掐头去尾

$("div").siblings()      //所有的同辈元素,不包括自己

　$("p").find("span").end()　　//结束当前链条中的最近的筛选操作，并将匹配筛选之前的元素。

三、操作元素

1、属性操作

　　a、基本属性操作

<!--属性操作-->
$("img").attr("src");    　　　　　　 //返回文档中所有图像的src属性值
$("img").attr("src","test.jpg");    //设置所有图像的src属性
$("img").removeAttr("src");    　　　//将文档中图像的src属性删除

$("input[type=‘checkbox‘]").prop("checked", true);    //选中复选框
$("input[type=‘checkbox‘]").prop("checked", false);
$("img").removeProp("src");    　　 //删除img的src属性

//需要注意的是：当我们对checkbox,radio,select等选择性的表当取选中状态的时候，不要使用checked属性，而使用prop属性。

　　b、CSS类操作

$("p").addClass("selected");    　　//为p元素加上 ‘selected‘ 类
$("p").removeClass("selected");    //从p元素中删除 ‘selected‘ 类
$("p").toggleClass("selected");    //如果存在就删除,否则就添加

　　c、HTML代码/文本/值

$(‘p‘).html();    　　　　　　　　　　 //返回p元素的html内容
$("p").html("Hello <b>test</b>!");  //设置p元素的html内容
$(‘p‘).text();    　　　　　　　　　　 //返回p元素的文本内容
$("p").text("test");    　　　　　　　//设置p元素的文本内容
$("input").val();    　　　　　　　　 //获取文本框中的值
$("input").val("test");     　　　　 //设置文本框中的内容

2、CSS操作

　　a、CSS样式操作

$("p").css("color");          //访问查看p元素的color属性
$("p").css("color","red");    //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" });    //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）

　　b、位置

$(‘p‘).offset()     //元素的border外边界相对浏览器视口的偏移,Object {top: 16, left: 16}
$(‘p‘).offset().top
$(‘p‘).offset().left
$("p").position()   //元素的margin外边界相对于有postion属性的父元素的padding内边界距离,对可见元素有效，Object {top: 2, left: 2}，如果父元素没有设置postion属性会一直向外查找直到body元素，这时就和offset的值相同。

$(window).scrollTop()    //获取滚轮滑的高度
$(window).scrollLeft()   //获取滚轮滑的宽度
$(window).scrollTop(‘100‘)    //设置滚轮滑的高度为100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        .d1 {
            height: 100px;
            width:100px;
            border: 1px solid blue;
            padding: 2px;
            margin: 4px;;
            background-color: #cccccc;
            position: relative;
        }
        .d2{
            height:50px;
            width:50px;
            margin: 9px;
            padding:11px ;
            border: 5px solid red;
        }
    </style>
    <script src="jquery-2.1.1.min.js"></script>
</head>
<body >
<div class="d1">
    <div class="d2"></div>
</div>
<script>
    console.log($(".d2").offset())
    console.log($(".d2").offset().top)
    console.log($(".d2").offset().left)
    console.log($(".d2").position())

offset和postion

c、尺寸

$("div").height();    //元素的高度,实际高度（不包括margin,padding,border）
$("div").width();     //元素的宽度,实际宽度（不包括margin,padding,border）

$("div").innerHeight()    //元素内部区域高度(height+上下padding)
$("div").innerWidth()     //元素内部区域宽度(width+左右padding)

$("divt").outerHeight()    //元素外部高度((height+上下padding+上下border)
$("div").outerWidth()     //元素外部宽度(width+左右padding+左右border)
$("div").outerHeight(true)    //为true时包括(margin)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 100px;
            width:100px;
            border: 1px solid blue;
            padding: 2px;
            margin: 4px;;
        }
    </style>
    <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<div>
</div>
<script>
    console.log($("div").height())    //100
    console.log($("div").width())    //100
    console.log($("div").innerHeight())   //104
    console.log($("div").innerWidth())   //104
    console.log($("div").outerHeight())   //106
    console.log($("div").outerWidth())  //106

</script>

</body>
</html>

尺寸样例

3、文档处理

　　a、内部插入

<!--内部插入-->
$("p").append("<b>test</b>");    //每个p元素内后面追加内容
$("p").appendTo("div");    　　　 //p元素追加到div内后
$("p").prepend("<b>Hello</b>");  //每个p元素内前面追加内容
$("p").prependTo("div");    　   //p元素追加到div内前

　　b、外部插入

 <!--外部插入-->
$("p").after("<b>test</b>");     //每个p元素同级之后插入内容
$("p").before("<b>test</b>");    //在每个p元素同级之前插入内容
$("p").insertAfter("#test");     //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test");    //所有p元素插入到id为test元素的前面

　　c、替换

<!--替换-->
$("p").replaceWith("<b>Paragraph. </b>");    //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替换掉所有 selector匹配到的元素

　　d、删除

<!--替换-->
$("p").replaceWith("<b>Paragraph. </b>");    //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替换掉所有 selector匹配到的元素

　　e、复制

<!--复制-->
$("p").clone()    　　//克隆元素并选中克隆的副本
$("p").clone(true)   //布尔值指事件处理函数是否会被复制

四、动态效果

<!--基本效果-->
$("p").show()    　　　　//显示隐藏的匹配元素
$("p").show("slow");    //参数表示速度,("slow","normal","fast"),也可为1000毫秒
$("p").hide()    　　　　//隐藏显示的元素
$("p").toggle();   　　 //切换 显示/隐藏
<!--滑动效果-->
$("p").slideDown("1000");    //用1000毫秒时间将段落滑下
$("p").slideUp("1000");    　//用1000毫秒时间将段落滑上
$("p").slideToggle("1000");  //用1000毫秒时间将段落滑上，滑下
<!--淡入淡出效果-->
$("p").fadeIn("1000");    　　  //用1000毫秒时间将段落淡入
$("p").fadeOut("1000");    　　 //用1000毫秒时间将段落淡出
$("p").fadeToggle("1000");    　//用1000毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6);    //用1000毫秒时间将段落的透明度调整到0.6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--1 隐藏与显示-->
    <!--2 淡入淡出-->
    <!--3 滑动-->
    <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->

    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button>

    <script src="jquery-2.1.1.min.js"></script>
    <script>

        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide(1000);
            });
            $("#show").click(function(){
                $("p").show(1000);
            });

        //用于切换被选元素的 hide() 与 show() 方法。
            $("#toggle").click(function(){
                $("p").toggle(2000);
            });
        });

    </script>
</body>
</html>

隐藏和显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #flipshow,#content,#fliphide,#toggle{
            padding: 5px;
            text-align: center;
            background-color: blueviolet;
            border:solid 1px red;

        }
        #content{
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>

    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="toggle">toggle</div>
    <div id="content">helloworld</div>

    <script src="jquery-2.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
              $("#flipshow").click(function(){
                 $("#content").slideDown(1000);
              });
              $("#fliphide").click(function(){
                 $("#content").slideUp(1000);
              });
              $("#toggle").click(function(){
                 $("#content").slideToggle(1000);
              })
          });
    </script>

</body>
</html>

滑动

滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
      <div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>
      <div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>

    <script src="jquery-2.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#in").click(function(){
               $("#id1").fadeIn(1000);
               $("#id2").fadeIn(1000);
               $("#id3").fadeIn(1000);

            });
            $("#out").click(function(){
               $("#id1").fadeOut(1000);
               $("#id3").fadeOut(1000);
               $("#id2").fadeOut(1000);


            });
            $("#toggle").click(function(){
               $("#id1").fadeToggle(1000);
               $("#id2").fadeToggle(1000);
               $("#id3").fadeToggle(1000);

            });
            $("#fadeto").click(function(){
               $("#id1").fadeTo(1000,0.4);
               $("#id2").fadeTo(1000,0.5);
               $("#id3").fadeTo(1000,0.1);
            });
        });
    </script>
</body>
</html>

淡入淡出

淡入淡出

自定义，待补充。。

所有的效果都可以添加回调函数callback()。

五、事件

特殊的--页面载入事件

在页面载入后才开始执行脚本

$(document).ready(function(){
  代码块
});

//简写
$(function() {
  代码块
});

1、基本事件类型

<!--鼠标事件-->
$("p").click();    　　//单击事件
$("p").dblclick();    //双击事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　//当鼠标指针从元素上移开时触发事件
$("p").foucusin()     //当元素获得焦点时，触发 focusin 事件。
$("p").focusout()    　//当元素失去焦点时触发 focusout 事件。
$("p").hover(fun_mouseover,fun_mouseout)    　//当鼠标移到元素上时触发fun_mouseover函数，当鼠标移出元素时触发fun_mouseout函数

<!--表单事件-->
$("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("input").change()    //当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
$("form").submit()     //当提交表单时触发事件

<!--键盘事件-->
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件

<!--窗口和页面事件-->
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$(window).unload()     //用户离开页面时

2、事件处理

3.0后基本只是用on替代以前的bind，live，delegate等方法，因此这里仅介绍on方法。on方法支持事件冒泡。

　　a、事件绑定
　　.on( events [, selector ] [, data ], handler(eventObject) )表达式
　　　　events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
　　　　selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
　　　　data:当一个事件被触发时要传递event.data给事件处理函数。
　　　　fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

$("#elem").click(function(){})
<!--on绑定方式-->
$("#elem").on(‘click‘,function(){})                         //on方式
 $("#elem").on("mouseover mouseout",function(){ });         //多个事件绑定同一个函数
$("#elem").on({                                             //多个事件绑定不同函数
    mouseover:function(){},
    mouseout:function(){},
});

$("#elem").one(‘click‘,function(){})    //绑定一个一次性的事件处理函数

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 100%;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }

    .left div {
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>on绑定多事件</h2>

    <h4>测试一</h4>
    <div class="left">
        点击触发：on(‘click‘,fn)
        <div id="test1"></div>
    </div>
    <script type="text/javascript">
    //事件绑定一
    $("#test1").on(‘click‘, function(e) {
        $(this).text(‘触发事件：‘ + e.type)
    })
    </script>


    <h4>测试二</h4>
    <div class="left">
        点击触发：on(‘mousedown mouseup‘)
        <div id="test2"></div>
    </div>
    <script type="text/javascript">
    //多事件绑定一
    $("#test2").on(‘mousedown mouseup‘, function(e) {
        $(this).text(‘触发事件：‘ + e.type)
    })
    </script>


    <h4>测试三</h4>
    <div class="right">
        点击触发：on(mousedown:fn1,mouseup:fn2)
        <div id="test3"></div>
    </div>
    <script type="text/javascript">
    //多事件绑定二
    $("#test3").on({
        mousedown: function(e) {
            $(this).text(‘触发事件：‘ + e.type)
        },
        mouseup: function(e) {
            $(this).text(‘触发事件：‘ + e.type)
        }
    })
    </script>
</body>

</html>

事件绑定样例

　　b、事件委托

$("#elem").on(‘click‘,“p",function(){}) //事件绑定在最上层#elem元素上，当用户触发在p元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 500px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }

    .left div {
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>on事件委托</h2>
    <div class="left">
        <div class="aaron">
            <a>点击这里</a>
        </div>
    </div>
    <script type="text/javascript">
    //给body绑定一个click事件
    //没有直接a元素绑定点击事件
    //通过委托机制，点击a元素的时候，事件触发
    $(‘body‘).on(‘click‘, ‘a‘, function(e) {
       alert(e.target.textContent)
    })
    </script>
</body>

</html>

事件委托样例

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 500px;
        height: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h3>事件委托，通过事件对象区别触发元素</h3>
    <div class="left">
        <div class="aaron">
            <ul>
                <li>点击：触发一</li>
                <li>点击：触发二</li>
                <li>点击：触发三</li>
                <li>点击：触发四</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">

        //多事件绑定一
        $("ul").on(‘click‘,function(e){
           alert(‘触发的元素是内容是: ‘ + e.target.textContent)
        })



    </script>

</body>


</html>

事件委托样例二

　　c、事件解除

//假设绑定两个事件$("elem").on("mousedown mouseup",fn)
$("elem").off("mousedown")  //删除一个事件
$("elem").off("mousedown mouseup")  //删除所有事件
$("elem").off()  //删除所有事件
//假设绑定两个事件$("div").on("mousedown","p,a",fn)
$("div").off( "click", "**" ) //删除所有委托事件
$("div").off( "click", "p" ) //删除p元素委托事件

3、事件对象

$("p").click(function(event){
 alert(event.type); //"click"
});

(evnet object)属性方法：
event.pageX 　 //事件发生时，鼠标距离网页左上角的水平距离
event.pageY 　 //事件发生时，鼠标距离网页左上角的垂直距离
event.type 　　//事件的类型
event.which 　 //按下了哪一个键
event.timeStamp　　//这个属性返回事件触发时距离1970年1月1日的毫秒数。时间戳
event.data 　　//在事件对象上绑定数据，然后传入事件处理函数
event.target 　//事件针对的网页元素，js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
event.preventDefault() 　//阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation()  //停止事件向上层元素冒泡
event.currentTarget　　　　//冒泡前的当前触发事件的DOM对象, 等同于this.

4、自定义事件

。。待补充

六、扩展

1、扩展方法

//方式一
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();

2、扩展jQuery功能

//方式二
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },    //三元运算
  max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3);     //2
$.max(4,5);    //5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="title">111</div>
    <div class="title">222</div>

    <script src="jquery-2.1.1.min.js"></script>
    <script>
        jQuery.fn.extend({
            show1: function () {
                var val = this.text();
                val = val + "sb";
                return val;
            },
            show2: function () {

            }
        });
        var ret = $(".title").show1();
        console.log(ret);


        jQuery.extend({
            s1: function (arg) {
                var val = $(arg).text();
                return val + "sb";
            },
            s2: function () {

            }
        });
        var ret2 = $.s1(".title");
        console.log(ret2);
    </script>
</body>
</html>

两种扩展样例

七、jQuery工具函数

$.trim() 　　//去除字符串两端的空格
$.each() 　　//遍历一个数组或对象，for循环,return false能跳出each循环
$.inArray() //返回一个值在数组中的索引位置，不存在返回-1  
$.grep() 　 //返回数组中符合某种标准的元素
$.extend()  //将多个对象，合并到第一个对象
$.makeArray() //将对象转化为数组
$.type()    //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction()    //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support()       //判断浏览器是否支持某个特性

八、实例部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .divH {
            height: 1800px;
        }
        .divT {
            width: 50px;
            height: 50px;
            font-size: 23px;
            background-color: #2F4F4F;
            color: white;
            position: fixed;
            right: 18px;
            bottom: 18px;
        }
        .divT:hover{
            cursor: pointer;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="divH"></div>
    <div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>

    <script src="jquery-2.1.1.min.js"></script>
    <script>
        window.onscroll = function () {
            var current = $(window).scrollTop();
            if (current > 180){
                $(".divT").removeClass("hide");
            }else {
                $(".divT").addClass("hide");
            }
        };

        function ReturnTop() {
            $(window).scrollTop(0);
        }
    </script>
</body>
</html>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            border: 1px solid #ccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
            color: white;
        }
        .menu li:hover {
            cursor: pointer;
        }
        .menu a{
            padding: 11px;
        }
        .content{
            border: 1px solid #ccc;
            height: 300px;
            font-size: 30px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: #0099dd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="Tab(this);">菜单一</li>
              <li xxx="c2" onclick="Tab(this);">菜单二</li>
              <li xxx="c3" onclick="Tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>
    </div>

    <script src="../../jquery-1.12.4.js"></script>
    <script>
        function Tab(self) {
            $(self).addClass("current").siblings().removeClass("current");
            var x = "#" + $(self).attr("xxx");
            $(x).removeClass("hide").siblings().addClass("hide");
        }
    </script>
</body>
</html>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: #dddddd;
        }
        .w{
            margin: 0 auto;
            width: 980px;
        }
        .pg-header{
            background-color: black;
            color: white;
            height: 48px;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            width: 180px;
            background-color: white;
            float: left;
        }
        li {
            list-style-type: none;
        }
        .pg-body .menu .active{
            background-color: #425a66;
            color: white;
        }
        .pg-body .fixed{
            position: fixed;
            top: 10px;
        }
        .pg-body .content{
            position: absolute;
            left: 385px;
            right: 200px;
            background-color: white;
            float: left;
        }
        .pg-body .content .item{
            height: 900px;
            border: 1px solid green;
        }
    </style>

</head>
<body>
    <div class="pg-header">
        <div class="w"></div>
    </div>
    <div class="pg-body">
        <div id="menu" class="menu">
            <ul>
                <li menu="funcOne">第一章</li>
                <li menu="funcTwo">第二章</li>
                <li menu="funcStree">第三章</li>
            </ul>
        </div>
        <div id="content" class="content">
            <div class="item" con="funcOne">床前明月光</div>
            <div class="item" con="funcTwo">疑是地上霜</div>
            <div class="item" con="funcStree" style="height: 100px">我是郭德纲</div>
        </div>
    </div>

    <script src="jquery-2.1.1.min.js"></script>
    <script>
        window.onscroll = function () {
            //滚轮下滑，菜单固定
            var scrTop = $(window).scrollTop();
            if (scrTop >= 48){
                $("#menu").addClass("fixed");
            }else {
                $("#menu").removeClass("fixed");
            }


            var windowHeight = $(window).height();    //视窗高度
            $(".item").each(function () {
                var itemTopOffset = $(this).offset().top;    //章节顶部离文档顶部距离
                var itemBotOffset = $(this).height() + itemTopOffset;   //章节底部离文档顶部距离
                var menuCon = $(this).attr("con");

                //进入正常章节条件判断
                if ((itemTopOffset < scrTop) && (scrTop < itemBotOffset)){
                    $("ul [menu=‘" + menuCon +"‘]").addClass("active").siblings().removeClass("active");
                    return false    //return false才能跳出each循环。
                }
            })

            //判断是否已经到达文档底部，如果到达底部，就激活最后一章标签。
            if ((windowHeight + scrTop) == $(document).height()){
                $("ul .active").removeClass("active");
                $("li:last").addClass("active");

            }


        }
    </script>
</body>
</html>

滚动菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            border: 1px solid #ccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
            color: white;
        }
        .menu li:hover {
            cursor: pointer;
        }
        .menu a{
            padding: 11px;
        }
        .content{
            border: 1px solid #ccc;
            height: 300px;
            font-size: 30px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: #0099dd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current">菜单一</li>
              <li xxx="c2" >菜单二</li>
              <li xxx="c3" >菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>
    </div>

    <script src="jquery-2.1.1.min.js"></script>
    <script>
//方法一，直接绑定在元素上
//        $("li[xxx]").on("click",function () {
//            $(this).addClass("current").siblings().removeClass("current");
//            var x = "#" + $(this).attr("xxx");
//            $(x).removeClass("hide").siblings().addClass("hide");
//
//        })
//方法二，绑定在父元素上，冒泡事件e.target相当晕上面方法的this
        $("ul").on("click",function (e) {
            console.log(e.target)
            $(e.target).addClass("current").siblings().removeClass("current");
            var x = "#" + $(e.target).attr("xxx");
            $(x).removeClass("hide").siblings().addClass("hide");

        })

    </script>
</body>
</html>

TAB菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--onclick="Add(this);"-->
</head>
<body>
<div class="outer">
           <div class="section">
               <div class="icons" style="display: inline-block">
                   <a ><button>+</button></a>
               </div>
               <div class="inputs" style="display: inline-block">
                   <input type="checkbox">
                   <input type="text" value="IP">
               </div>
           </div>
       </div>

    <script src="jquery-2.1.1.min.js"></script>
    <script>
//        $(".outer .section").on("click","button",function () {
//            //parentsUntil(".outer")包括了多个父元素，因此需要.last()来选择最外层的父元素。
//            //.end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
//            $(this).parentsUntil(".outer").last().clone().find("button").text("-").attr("onclick","Remove(this);").end().appendTo(".outer")
//        })
//        function Remove(self) {
//            $(self).parentsUntil(".outer").last().remove()
//        }
          $("button").on("click",function () {
               $(this).parentsUntil(".outer").last().clone().find("button").text("-").attr("onclick","Remove(this);").end().appendTo(".outer")
          })
        function Remove(self) {
            $(self).parentsUntil(".outer").last().remove()
        }

    </script>
</body>
</html>

添加删除元素并绑定事件

jQuery基础与实例

标签：

原文地址：http://www.cnblogs.com/tkqasn/p/5775816.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行