JQuery使用教程

jQuery简介

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team

jQuery是对原生JavaScript二次封装的工具函数集合

jQuery是一个简洁高效的且功能丰富的JavaScript工具库

jQuery的优势

完全开源的源代码

强大简洁的选择器

事件、样式、动画的良好支持

链式表达式

简化的Ajax操作

跨浏览器兼容

丰富的插件及对外的扩展接口

两种使用方式

安装jQuery-3.3.1

方法一  本地导入方式

[官网下载](https://jquery.com/download/)

```html

<script src="js/jquery-3.3.1.js"></script>

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

<script>

	// user code

</script>

```

方法二  CDN导入方式

[CDN](https://www.bootcdn.cn/jquery/)

```html

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

	// user code

</script>

```

jQuery变量命名规范

通常以$开头

JQ对象与JS对象

js对象转换为jq对象：$ele = $(ele);

jq对象转换为js对象：ele = ele.get(0);

jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()

//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象

var variable = DOM 对象

$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

选择器

基本选择器

$("*") $("#id") $(".class") $("element") $(".class,p,div")

层级选择器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

基本筛选器

$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

属性选择器

$('[id="div1"]') $('["alex="sb"][id]')

表单选择器

$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")

筛选器

过滤筛选器

$("li").eq(2) $("li").first() $("ul li").hasclass("test")

查找筛选器

$("div").children(".test") $("div").find(".test")

$(".test").next() $(".test").nextAll() $(".test").nextUntil()

$("div").prev() $("div").prevAll() $("div").prevUntil()

$(".test").parent() $(".test").parents() $(".test").parentUntil()

$("div").siblings()

实例tab切换菜单

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>tab</title>

<script src="js/jquery-3.3.1.js"></script>

<script>

function tab(self){

var index=$(self).attr("xxx");

$("#"+index).removeClass("hide").siblings().addClass("hide");

$(self).addClass("current").siblings().removeClass("current");

}

</script>

<style>

*{

margin: 0px;

padding: 0px;

}

.tab_outer{

margin: 0px auto;

width: 60%;

}

.menu{

background-color: #cccccc;

/*border: 1px solid red;*/

line-height: 40px;

}

.menu li{

display: inline-block;

}

.menu a{

border-right: 1px solid red;

padding: 11px;

}

.content{

background-color: tan;

border: 1px solid green;

height: 300px;

}

.hide{

display: none;

}

.current{

background-color: darkgray;

color: yellow;

border-top: solid 2px rebeccapurple;

}

</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>

</body>

</html>

运用实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq选择器</title>

    <script src="js/jquery-3.3.1.js"></script>

</head>

<body>

<ul class="ul1">

    <li class="li l1">ul1 l1</li>

    <li class="li l2">ul1 l2</li>

    <li class="li l3">ul1 l2</li>

</ul>

<ul class="ul2">

    <li class="li l1">ul2 l1</li>

    <li class="li l2">ul2 l2</li>

    <li class="li l3">ul2 l3</li>

</ul>

</body>

<script>

    // console.log($);

    // 1.采用css3语法

    // $('css3选择器')

    console.log($('.ul1 .l2').text());

    console.log($('.l1 ~ .l2').text());

    console.log($('.l1, .l2, .l3').text());

    // 2.css3之前jq已有的自身选择器

    // 偶数位

    // 注: 不加结构时, 将所有li作为考虑整体从上之下进行排序, 查找索引为偶数位的(0,2...)

    console.log($('.ul1 .li:even'));

    // 奇数位

    console.log($('.ul2 .li:odd'));

    // 匹配索引 *****

    console.log($("ul").eq(0));

    // $("ul")页面中的所有ul, 取第n个ul

    // --  $("ul")[n] => 得到第n索引位js对象, 本非jq对象

    // --  $("ul").eq(n)  => 得到第n索引位jq对象

    // --  $("ul:eq(n))" => 得到第n索引位jq对象

    // 3.通过内容进行匹配

    // 内容只有包含l1即可, ul1 l1 | ul1 l2 | ul1 l3 | ul2 l1

    console.log($('li:contains(l1)').text())

</script>

</html>

操作元素(属性，css，文档处理)

属性操作

--------------------------属性

$("").attr();

$("").removeAttr();

$("").prop();

$("").removeProp();

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

--------------------------HTML代码/文本/值

$("").html([val|fn])

$("").text([val|fn])

$("").val([val|fn|arr])

---------------------------

$("").css("color","red")

注意

<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此

//需要使用prop方法去操作才能获得正确的结果。

// $("#chk1").attr("checked")

// undefined

// $("#chk1").prop("checked")

// false

// ---------手动选中的时候attr()获得到没有意义的undefined-----------

// $("#chk1").attr("checked")

// undefined

// $("#chk1").prop("checked")

// true

console.log($("#chk1").prop("checked"));//false

console.log($("#chk2").prop("checked"));//true

console.log($("#chk1").attr("checked"));//undefined

console.log($("#chk2").attr("checked"));//checked

</script>

实例运用

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>属性操作</title>

    <script src="js/jquery-3.3.1.js"></script>

    <style>

        .active {

            width: 100px;

            height: 100px;

            background-color: orange;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <input class="inp" type="text" value="12345">

    <img src="" alt="提示">

    <!--表单元素的布尔类型属性, 不写为false, 书写后,不管值为什么, 均为属性名-->

    <!--eg: checked="checked" | checked="" | checked-->

    <input class="ck" type="checkbox" checked="false">

</body>

<script>

    // 文本内容操作

    // html() | text() | val()

    // 赋值: 有参数

    $('.box').html('<i>beat box</i>');

    // 取值: 无参数

    console.log($('.box').text());

    // 表单内容

    // $('.inp').val("input 内容 为 value");

    console.log($('.inp').val());

</script>

<script>

    // 属性操作

    console.log($('img').attr('alt'));

    $('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')

    $('img').attr('abc', function () {

        return "ABC";

    })

    // $('.ck').prop("checked", "true");  // 了解

    // $('.ck').attr("checked", "true");

</script>

<script>

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

        // $(this).addClass('active'); // 添加

        // $(this).removeClass('box');  // 删除

        // 如果有active 删除, 反之添加

        $(this).toggleClass('active');  // 切换

    })

</script>

</html>

实例之全反选

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

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

<script>

function selectall(){

$("table :checkbox").prop("checked",true)

}

function cancel(){

$("table :checkbox").prop("checked",false)

}

function reverse(){

// var idlist=$("table :checkbox")

// for(var i=0;i<idlist.length;i++){

// var element=idlist[i];

//

// var ischecked=$(element).prop("checked")

// if (ischecked){

// $(element).prop("checked",false)

// }

// else {

// $(element).prop("checked",true)

// }

//

// }

// jquery循环的两种方式

//方式一

// li=[10,20,30,40]

// dic={name:"yuan",sex:"male"}

// $.each(li,function(i,x){

// console.log(i,x)

// })

//方式二

// $("tr").each(function(){

// console.log($(this).html())

// })

$("table :checkbox").each(function(){

$(this).prop("checked",!$(this).prop("checked"));

// if ($(this).prop("checked")){

// $(this).prop("checked",false)

// }

// else {

// $(this).prop("checked",true)

// }

// 思考:如果用attr方法可以实现吗?

});

}

</script>

</head>

<body>

<button onclick="selectall();">全选</button>

<button onclick="cancel();">取消</button>

<button onclick="reverse();">反选</button>

<table border="1">

<tr>

<td><input type="checkbox"></td>

<td>111</td>

</tr>

<tr>

<td><input type="checkbox"></td>

<td>222</td>

</tr>

<tr>

<td><input type="checkbox"></td>

<td>333</td>

</tr>

<tr>

<td><input type="checkbox"></td>

<td>444</td>

</tr>

</table>

</body>

</html>

实例之模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.back{

background-color: rebeccapurple;

height: 2000px;

}

.shade{

position: fixed;

top: 0;

bottom: 0;

left:0;

right: 0;

background-color: coral;

opacity: 0.4;

}

.hide{

display: none;

}

.models{

position: fixed;

top: 50%;

left: 50%;

margin-left: -100px;

margin-top: -100px;

height: 200px;

width: 200px;

background-color: gold;

}

</style>

</head>

<body>

<div class="back">

<input id="ID1" type="button" value="click" onclick="action1(this)">

</div>

<div class="shade hide"></div>

<div class="models hide">

<input id="ID2" type="button" value="cancel" onclick="action2(this)">

</div>

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

<script>

function action1(self){

$(self).parent().siblings().removeClass("hide");

}

function action2(self){

//$(self).parent().parent().children(".models,.shade").addClass("hide")

$(self).parent().addClass("hide").prev().addClass("hide")

}

</script>

</body>

</html>

jQ轮播图

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style >

        * {

            /*不允许选择文本, 网页文本不能负责*/

            user-select: none;

        }

        body, ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .scroll {

            width: 1226px;

            height: 460px;

            margin: 0 auto;

            background-color: orange;

            position: relative;

            cursor: pointer;

        }

        .scroll_view {

            width: 100%;

            height: 100%;

            position: relative;

        }

        .scroll_view li {

            background: red;

            width: 100%;

            height: 100%;

            font: normal 100px/460px 'STSong';

            text-align: center;

            position: absolute;

            top: 0;

            left: 0;

            opacity: 0;

        }

        .scroll_view li.active {

            opacity: 1;

            transition: .5s;

        }

        .left {

            position: absolute;

            top: 170px;

            left: 0;

            background-color: #eee;

            font-size: 100px;

        }

        .left:hover, .right:hover {

            cursor: pointer;

            background-color: #333;

        }

        .right {

            position: absolute;

            top: 170px;

            right: 0;

            background-color: #eee;

            font-size: 100px;

        }

        .scroll_tag {

            position: absolute;

            right: 10px;

            bottom: 10px;

        }

        .scroll_tag li {

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background-color: #333;

            border: 3px solid #ddd;

            float: left;

            margin: 0 10px;

        }

        .scroll_tag li.active {

            background-color: #ccc;

            border: 3px solid #333;

        }

    </style>

</head>

<body>

<div class="scroll">

    <ul class="scroll_view">

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <ul class="scroll_toggle">

        <li class="left"><</li>

        <li class="right">></li>

    </ul>

    <ul class="scroll_tag">

        <li class="active"></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

// 页面文档树加载完毕回调

$(function () {

    var page_index = 0;

    var length = $('.scroll_view li').length;

    var toggle_time = 1000;

    var timer = 0;

    // 无限轮播

    timer = setInterval(toggleRole, toggle_time, 1);

    // 悬浮停止,移走轮播

    $('.scroll').mouseenter(function () {  // 悬浮停止

        clearInterval(timer);

    }).mouseleave(function () {  // 移走轮播

        timer = setInterval(toggleRole, toggle_time, 1);

    });

    // 右轮播

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

        toggleRole(1);

    });

    // 左轮播

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

        toggleRole(-1);

    });

    // 切换依据

    function toggleRole(role_num) {

        page_index += role_num;

        // role_num:1向右切换, role_num:-1向左切换

        if (role_num > 0) {

            if (page_index >= length) { // 右切换临界点

                page_index = 0;

            }

        } else {

            if (page_index < 0) { // 左切换临界点

                page_index = length - 1;

            }

        }

        toggleState(page_index);

    }

    // 切换状态

    function toggleState(index) {

        $('.scroll_view li').removeClass('active').eq(index).addClass('active');

        $('.scroll_tag li').removeClass('active').eq(index).addClass('active');

    }

})

</script>

</html>

文档处理

文档结构

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>文档结构</title>

</head>

<body>

<div class="box"></div>

<div class="sup">

    <div class="sub"></div>

    <div class="sub"></div>

    <div class="sub"></div>

</div>

<div class="ele"></div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    var $sup = $('.sup');

    console.log($sup.children());  // 子们

    console.log($sup.parent());  // 父

    console.log($sup.prev());  // 上兄弟

    console.log($sup.next());  // 下兄弟

    console.log($sup.siblings());  // 兄弟们

</script>

</html>

常用文档操作

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>文档操作</title>

    <style>

        .ele1 {

            border: 1px solid black;

        }

        .ele2 {

            border: 1px solid orange;

        }

        .ele2 .div {

            background-color: pink;

        }

        .ele2 .div span {

            float: right;

            cursor: pointer;

        }

        .ele3 {

            width: 200px;

            height: 200px;

            background-color: cyan;

        }

    </style>

</head>

<body>

    <p class="p1">你是P</p>

    <div class="ele1">

        <p>原文本</p>

    </div>

    <div class="ele2"></div>

    <div class="ele3"><span>1</span><span>2</span><span>3</span></div>

    <div class="ele4">ele4 ele4 ele4</div>

    <!--需求: .wrap-ele5>.ele5 -->

    <div class="ele5">

        <div class="wrap"></div>

    </div>

    <!--repleaceWith-->

    <div class="container">

        <div class="inner first">Hello</div>

        <div class="inner second">And</div>

        <div class="inner third">Goodbye</div>

    </div>

    <!--repleaceAll-->

    <p>Hello</p><p>cruel</p><p>World</p>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    // 一.内部插入

    var $p1 = $('.p1');

    var $ele1 = $('.ele1');

    // 父添加子

    // $p1就是一个对象, 所以不管操作几次,或是如何操作, 最终只有一种位置结果

    $ele1.append($p1);  // 父 加 子 到最后

    $ele1.append($p1);

    $ele1.prepend($p1);  // 父 加 子 到最前

    $p1.appendTo($ele1); // 子 加到 父  到最后

    $p1.prependTo($ele1); // 子 加到 父  到最前

</script>

<script>

    // 二.操作文档三步骤

    // 1.创建页面元素对象

    // 2.设置页面元素对象(样式|属性|内容|事件...)

    // 3.添加到指定位置

    $ele2 = $('.ele2');

    // 1.

    var $div = $('<div class="div">我是div</div>');

    // 2.

    // $div.on('click', function () {

    //    alert('div被点击了!');

    // });

    // 委派添加事件

    $ele2.on('click', 'div', function () {

        alert('div被点击了!');

    });

    // 3.

    // $ele2.append($div);

    // 将div中假如一个span标签,在将自身添加到ele2中

    $div.append("<span>x</span>").appendTo($ele2);

    // 需求: 点击span的小x,删除$div

    // 思路: 给span绑定一个点击事件 => 操作让父级$div删除

    /* ① 通过选择器找到目标span

    $('.ele2 span').click(function (ev) {

        // 阻止冒泡

        ev.stopPropagation();

        // 删除操作

        // console.log(this)

        // 原生js操作 父删子

        // this.parentElement.parentElement.removeChild(this.parentElement);

        // jq操作 自删

        $(this).parent().remove();

    })

    */

    // ② 通过事件委派直接绑定给目标span

    $ele2.on('click', 'span', function (ev) {

        ev.stopPropagation();

        $(this).parent().remove();

    });

</script>

<script>

    // 三.删除操作

    // 1.清空所有子级

    // empty()操作的返回值为 自身

    $('.ele3').append("<span>4</span>").click(function () {

        // 打印子级所有文本

        // $(this).children().text() | $(this).text()

        console.log($(this).text())

    }).empty().text("00000");

    // 2.不保留事件的删除

    // remove()操作的返回值为 自身

    // $('.ele3').remove().appendTo($('body'));

    // 3.保留事件的删除

    // detach()操作的返回值为 自身

    // $('.ele3').detach().appendTo($('body'));

</script>

<script>

    // 四.兄弟结构操作

    $('.ele4').after('<b>after ele4</b>').before('<i>before ele4</i>')

</script>

<script>

    // 五.包裹操作(为自身添加父级)

    /*

    $('.ele5').wrap(function () {

        // this指的是ele5

        var _this = this;

        return $('.wrap').attr('class', function () {

             // this指的是wrap

            return this.className + "-" + _this.className;

        });

    }).empty();

    */

    var $wrap = $('.wrap');

    var $ele5 = $('.ele5').empty();

    $ele5.wrap($wrap);

    var tg_class = $wrap.attr('class') + "-" + $ele5.attr('class');

    console.log(tg_class)

    $ele5.parent().attr('class', tg_class);

</script>

<script>

    // 六.替换

    // 把third用裁剪的first来替换

    $('.third').replaceWith($('.first'));

    // 用b标签替换所有的p标签

    $("<b>Paragraph. </b>").replaceAll("p");

</script>

<!--DOM操作需求:

1.一个输入框,一个提交按钮,提交留言到一个列表中

2.每条留言可以删除

3.每条留言可以修改

-->

</html>

实例之留言框

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>文档操作案例</title>

    <style>

        input {

            vertical-align: middle;

        }

        ul, p {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .msg, .show {

            width: 260px;

            /*background-color: red;*/

        }

        .show li:hover {

            background-color: #aaa;

        }

        .show {

            margin-top: 14px;

        }

        .show li {

            line-height: 40px;

            position: relative;

        }

        .show span {

            cursor: pointer;

            position: absolute;

            right: 10px;

            top: 0;

        }

    </style>

</head>

<body>

    <div class="msg">

        <input class="inp" type="text"><input class="btn" type="button" value="留言">

    </div>

    <ul class="show">

        <!--<li>-->

            <!--<p>第一条留言</p>-->

            <!--<span>×</span>-->

        <!--</li>-->

        <!--<li>-->

            <!--<p>一楼说的对</p>-->

            <!--<span>×</span>-->

        <!--</li>-->

    </ul>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    // 提交按钮的事件

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

        // 输入框的内容

        var msg = $('.inp').val();

        // 输入框有内容才提交

        if (msg.length != 0) {

            addMsg(msg);

        }

        // 只要留言按钮点击后, 就应该清空输入框

        $('.inp').val("");

    });

    function addMsg(msg) {

        $('<li></li>')

            .append('<p>' + msg + '</p>')  // 为li添加子级p, p内容为留言内容

            .append('<span>×</span>')  // 为li添加子级span, 内容就是x

            .appendTo($('.show'))  // 将li添加到父级show最后

            .on('click', 'span', function (ev) {  // 通过li为子级span委派点击事件

                ev.stopPropagation();

                console.log(this); // span

                $(this).parent().remove();  // span找到父级li,进而删除当前li

            })

            .on('click', function () {  // 为li添加点击事件 => 进入编辑状态

                console.log(this);  // li

                // 将当前li的p内容取出 => 给编辑状态下的输入框

                var txt = $(this).children('p').text();

                // 如何才可以变为编辑方式 => 将p替换为input

                // $(this).children('p').replaceWith($('<input>').val(txt));

                $('<input>').val(txt)  // 进入编辑状态,新建input输入框,内容是当前留言p的内容

                    .attr('autofocus', 'true')  // ?

                    .replaceAll($(this).children('p'))  // 来替换显示内容的p标签

                    .blur(function () {  // 为当前编辑框添加失去焦点的事件

                        var edit_txt = $(this).val();  // 存储修改后的文本

                        if (edit_txt.length == 0) edit_txt = "null";  // 修改后的内容为空的安全处理

                        $('<p></p>').text(edit_txt).replaceAll(this);  // 将编辑完成后的input重新替换为p标签来显示

                    })

            })

    }

</script>

</html>

实例之复制样式条

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div class="outer">

<div class="item">

<input type="button" value="+" onclick="add(this);">

<input type="text">

</div>

</div>

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

<script>

//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?

function add(self){

// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加

var $clone_obj=$(self).parent().clone();

$clone_obj.children(":button").val("-").attr("onclick","removed(this)");

$(self).parent().parent().append($clone_obj);

}

function removed(self){

$(self).parent().remove()

}

</script>

</body>

</html>

css操作

CSS

$("").css(name|pro|[,val|fn])

位置

$("").offset([coordinates])

$("").position()

$("").scrollTop([val])

$("").scrollLeft([val])

尺寸

$("").height([val|fn])

$("").width([val|fn])

$("").innerHeight()

$("").innerWidth()

$("").outerHeight([soptions])

$("").outerWidth([options])

实例返回顶部

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="js/jquery-2.2.3.js"></script>

<script>

window.onscroll=function(){

var current=$(window).scrollTop();

console.log(current)

if (current>100){

$(".returnTop").removeClass("hide")

}

else {

$(".returnTop").addClass("hide")

}

}

function returnTop(){

// $(".div1").scrollTop(0);

$(window).scrollTop(0)

}

</script>

<style>

body{

margin: 0px;

}

.returnTop{

height: 60px;

width: 100px;

background-color: darkgray;

position: fixed;

right: 0;

bottom: 0;

color: greenyellow;

line-height: 60px;

text-align: center;

}

.div1{

background-color: orchid;

font-size: 5px;

overflow: auto;

width: 500px;

}

.div2{

background-color: darkcyan;

}

.div3{

background-color: aqua;

}

.div{

height: 300px;

}

.hide{

display: none;

}

</style>

</head>

<body>

<div class="div1 div">

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

<p>hello</p>

</div>

<div class="div2 div"></div>

<div class="div3 div"></div>

<div class="returnTop hide" onclick="returnTop();">返回顶部</div>

</body>

</html>

样式操作

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>样式操作</title>

    <script src="js/jquery-3.3.1.js"></script>

    <style>

        .box {

            font-size: 100px;

        }

    </style>

</head>

<body>

    <div class="box">12345</div>

    <div class="box">67890</div>

</body>

<script>

    // 取值

    console.log($('.box').css('font-size'));

    // 设值

    $('.box').css('color', 'deeppink')

        .css({

            // 1.就是给css()函数赋值一个js对象

            // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法

            // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值

            width: '300px',

            'height': 300,

            'background-color': 'cyan',

            borderRadius: '30px'

        })

        .css('width', function(index, oldWidth) {

            if (index == 0) {

                // 延迟1s

                // var b_time = new Date().getTime();

                // while (new Date().getTime() - b_time < 1000){}

                return 1.5 * parseInt(oldWidth);

            }

            return oldWidth;

        })

</script>

</html>

事件

页面载入

ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){}) -----------> $(function(){})

事件处理

$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定

// click事件；

[selector]参数的好处:

好处在于.on方法为动态添加的元素也能绑上指定事件；如：

//$('ul li').on('click', function(){console.log('click');})的绑定方式和

//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个

//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加

//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

[data]参数的调用:

function myHandler(event) {

alert(event.data.foo);

}

$("li").on("click", {foo: "bar"}, myHandler)

实例运用

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq事件</title>

    <style>

        .box, .ele, .sub {

            width: 100px;

            height: 100px;

            background-color: orange;

        }

        .sup {

            width: 200px;

            height: 200px;

            background-color: red;

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <div class="box">box</div>

    <a href="https://www.baidu.com">别动</a>

    <div class="ele">ele</div>

    <div class="sup">

        <div class="sub"></div>

        <span>123</span>

    </div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    /*

    // 1.事件的绑定语法

    $('.box').on('click', function () {

        console.log('你丫点我了!!!')

    });

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

        console.log('你丫又点我了!!!')

    });

    // 2.事件对象

    $(document).click(function (ev) {

        console.log("父级点击了");

        // jq事件对象, 兼容js事件对象

        console.log(ev);

        // 鼠标点

        console.log(ev.clientX, ev.clientY);

    });

    $(document).keydown(function (ev) {

        // jq事件对象, 兼容js事件对象

        console.log(ev);

        // 鼠标点

        console.log(ev.keyCode);

    });

    // 3.冒泡与默认动作

    $('a').click(function (ev) {

        console.log("默认动作取消了");

        // 取消默认动作1

        ev.preventDefault();

        // 取消默认动作2

        // return false;

    })

    $('.ele').click(function (ev) {

        // ev.cancelBubble = true;  // 未兼容

        // 阻止冒泡

        ev.stopPropagation();

        console.log("子级点击了");

    })

    */

</script>

<script>

    var name = "张三";

    /*

    $('.sub').click();

    $('.sub').on('click', {name: name, age: 8}, function (ev) {

        ev.stopPropagation();

        console.log(ev);

        console.log(">>>", ev.data.name)

    });

    */

    // 将sup的点击事件委派给自己的span子级

    $('.sup').on('click', 'span', {}, function (ev) {

        // ev.stopPropagation();

        console.log("==================");

    });

    $('.sup').on('click', {}, function (ev) {

        // ev.stopPropagation();

        console.log("++++++++++++++++");

    })

</script>

</html>

实例之面板拖动

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div style="border: 1px solid #ddd;width: 600px;position: absolute;">

<div id="title" style="height: 40px;color: white;">

标题

</div>

<div style="height: 300px;">

内容

</div>

</div>

<script type="text/javascript" src="jquery-2.2.3.js"></script>

<script>

$(function(){

// 页面加载完成之后自动执行

$('#title').mouseover(function(){

$(this).css('cursor','move');

}).mousedown(function(e){

//console.log($(this).offset());

var _event = e || window.event;

// 原始鼠标横纵坐标位置

var ord_x = _event.clientX;

var ord_y = _event.clientY;

var parent_left = $(this).parent().offset().left;

var parent_top = $(this).parent().offset().top;

$(this).bind('mousemove', function(e){

var _new_event = e || window.event;

var new_x = _new_event.clientX;

var new_y = _new_event.clientY;

var x = parent_left + (new_x - ord_x);

var y = parent_top + (new_y - ord_y);

$(this).parent().css('left',x+'px');

$(this).parent().css('top',y+'px');

})

}).mouseup(function(){

$(this).unbind('mousemove');

});

})

</script>

</body>

</html>

实例之放大镜

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>bigger</title>

<style>

*{

margin: 0;

padding:0;

}

.outer{

height: 350px;

width: 350px;

border: dashed 5px cornflowerblue;

}

.outer .small_box{

position: relative;

}

.outer .small_box .float{

height: 175px;

width: 175px;

background-color: darkgray;

opacity: 0.4;

fill-opacity: 0.4;

position: absolute;

display: none;

}

.outer .big_box{

height: 400px;

width: 400px;

overflow: hidden;

position:absolute;

left: 360px;

top: 0px;

z-index: 1;

border: 5px solid rebeccapurple;

display: none;

}

.outer .big_box img{

position: absolute;

z-index: 5;

}

</style>

</head>

<body>

<div class="outer">

<div class="small_box">

<div class="float"></div>

<img src="small.jpg">

</div>

<div class="big_box">

<img src="big.jpg">

</div>

</div>

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

<script>

$(function(){

$(".small_box").mouseover(function(){

$(".float").css("display","block");

$(".big_box").css("display","block")

});

$(".small_box").mouseout(function(){

$(".float").css("display","none");

$(".big_box").css("display","none")

});

$(".small_box").mousemove(function(e){

var _event=e || window.event;

var float_width=$(".float").width();

var float_height=$(".float").height();

console.log(float_height,float_width);

var float_height_half=float_height/2;

var float_width_half=float_width/2;

console.log(float_height_half,float_width_half);

var small_box_width=$(".small_box").height();

var small_box_height=$(".small_box").width();

// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理

var mouse_left=_event.clientX-float_width_half;

var mouse_top=_event.clientY-float_height_half;

if(mouse_left<0){

mouse_left=0

}else if (mouse_left>small_box_width-float_width){

mouse_left=small_box_width-float_width

}

if(mouse_top<0){

mouse_top=0

}else if (mouse_top>small_box_height-float_height){

mouse_top=small_box_height-float_height

}

$(".float").css("left",mouse_left+"px");

$(".float").css("top",mouse_top+"px")

var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);

var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);

console.log(percentX,percentY)

$(".big_box img").css("left", -percentX*mouse_left+"px")

$(".big_box img").css("top", -percentY*mouse_top+"px")

})

})

</script>

</body>

</html>

动画效果

显示隐藏

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="jquery-2.1.4.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();

});

})

</script>

<link type="text/css" rel="stylesheet" href="style.css">

</head>

<body>

<p>hello</p>

<button id="hide">隐藏</button>

<button id="show">显示</button>

<button id="toggle">切换</button>

</body>

</html>

滑动

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

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

<script>

$(document).ready(function(){

$("#slideDown").click(function(){

$("#content").slideDown(1000);

});

$("#slideUp").click(function(){

$("#content").slideUp(1000);

});

$("#slideToggle").click(function(){

$("#content").slideToggle(1000);

})

});

</script>

<style>

#content{

text-align: center;

background-color: lightblue;

border:solid 1px red;

display: none;

padding: 50px;

}

</style>

</head>

<body>

<div id="slideDown">出现</div>

<div id="slideUp">隐藏</div>

<div id="slideToggle">toggle</div>

<div id="content">helloworld</div>

</body>

</html>

淡入淡出

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

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

<script>

$(document).ready(function(){

$("#in").click(function(){

$("#id1").fadeIn(1000);

});

$("#out").click(function(){

$("#id1").fadeOut(1000);

});

$("#toggle").click(function(){

$("#id1").fadeToggle(1000);

});

$("#fadeto").click(function(){

$("#id1").fadeTo(1000,0.4);

});

});

</script>

</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>

</body>

</html>

回调函数

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

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

</head>

<body>

<button>hide</button>

<p>helloworld helloworld helloworld</p>

<script>

$("button").click(function(){

$("p").hide(1000,function(){

alert($(this).html())

})

})

</script>

</body>

</html>

运用实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq动画</title>

    <style>

        .ele {

            width: 100px;

            height: 100px;

            background-color: orange;

            margin-top: 10px;

        }

    </style>

</head>

<body>

<button class="b1">消失</button>

<button class="b2">显示</button>

<button class="b3">切换</button>

<div class="ele e1"></div>

<hr>

<button class="b4">消失</button>

<button class="b5">显示</button>

<button class="b6">切换</button>

<div class="ele e2"></div>

<hr>

<button class="b7">消失</button>

<button class="b8">显示</button>

<button class="b9">切换</button>

<div class="ele e3"></div>

<div class="ele e4"></div>

<div class="ele e5"></div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

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

        $('.e1').hide(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    });

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

        $('.e1').show(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

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

        $('.e1').toggle(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

</script>

<script>

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

        $('.e2').slideUp(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    });

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

        $('.e2').slideDown(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

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

        $('.e2').slideToggle(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

</script>

<script>

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

        $('.e3, .e4, .e5').fadeOut(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    });

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

        $('.e2 ~ .ele').fadeIn(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

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

        $('.e3, .e4, .e5').fadeToggle(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

</script>

</html>

自定义动画

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>自定义动画</title>

    <style>

        .box {

            width: 300px;

            height: 300px;

            background-color: orange;

        }

    </style>

</head>

<body>

    <button class="btn">消失</button>

    <button class="btn">显示</button>

    <div class="box"></div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    $('.btn').eq(0).on('click', function () {

        $('.box').animate({

            width: 0

        }, 1000, 'linear', function () {

            console.log("动画结束了!!!")

        })

    });

    $('.btn').eq(1).on('click', function () {

        $('.box').animate({

            width: 300

        }, 'slow', 'swing', function () {

            console.log("动画结束了!!!")

        })

    })

</script>

</html>

jq动画案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq动画案例</title>

    <style>

        .wrap {

            width: 600px;

            height: 200px;

            border: 5px solid black;

            margin: 0 auto;

            position: relative;

            overflow: hidden;

            /*overflow: auto;*/

        }

        .btn {

            text-align: center;

            margin-top: 50px;

        }

        ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .scroll {

            width: 2000px;

            position: absolute;

        }

        .scroll li {

            width: 200px;

            height: 200px;

            font: 500 50px/200px 'STSong';

            text-align: center;

            background-color: yellow;

            float: left;

        }

        .scroll li:nth-child(2n) {

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="btn">

        <button class="btn1"><</button>

        <button class="btn2">></button>

    </div>

    <div class="wrap">

        <ul class="scroll">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

            <li>9</li>

            <li>10</li>

        </ul>

    </div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<!--

<script>

    // 滚动条滚动(overflow)产生的距离

    // console.log($('.wrap').scrollLeft());

    // 和绝对定位匹配使用

    // console.log($('.scroll').position().left);

    // 和固定定位匹配使用

    // console.log($('.scroll').offset());

    // 滚动scroll的总长度

    var scroll_total = $('.scroll').width();

    // 显示的总宽度,也就是一次性最大滚动的长度

    var wrap_width = $('.wrap').width();

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

        // 往左已滚动的长度, 是负值

        var scroll_left = $('.scroll').position().left;

        // 剩余的可滚动的长度: 总长抛出显示的一个平面长度,再减去已经滚动到左侧的长度

        // 注scroll_left是负值,使用用+运算

        var less_long = scroll_total - wrap_width + scroll_left;

        // 通过剩余的可滚动长度计算出下一次能滚动的长度

        var next_scroll = less_long > wrap_width ? wrap_width : less_long;

        // 动画: left为从当前已滚动的长度(scroll_left)再滚动(减去)下一次可滚动的长度

        $('.scroll').animate({

            left: scroll_left - next_scroll

        })

    });

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

        // 往左已滚动的长度, 是负值

        var scroll_left = $('.scroll').position().left;

        // 往右剩余的可滚动的长度

        var less_long = -scroll_left;

        // 通过剩余的可滚动长度计算出下一次能滚动的长度

        var next_scroll = less_long > wrap_width ? wrap_width : less_long;

        $('.scroll').animate({

            left: scroll_left + next_scroll

        })

    })

</script>

-->

<script>

    // 不能被点击

    var disable_click = false;

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

        if (!disable_click) { // 能被点击时

            disable_click = true; // 动画过程中, 应该不能再被点击

            $('.wrap').animate({

                scrollLeft: $('.wrap').scrollLeft() + 600

            }, 300, function () {

                disable_click = false;  // 动画结束后,可以重新被点击

            })

        }

    });

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

        if (!disable_click) {

            disable_click = true;

            $('.wrap').animate({

                scrollLeft: $('.wrap').scrollLeft() - 600

            }, 300, function () {

                disable_click = false;

            })

        }

    })

</script>

</html>

正则

定义

var re = /\d{11}/ig

1.正则的语法书写在//之间

2.i代表不区分大小写

3.g代表全文匹配

匹配案例

"abcABCabc".search(/[abc]/); // 在字符串abcABCabc匹配单个字符a或b或c,返回匹配到的第一次结果的索引, 没有匹配到返回-1

"abcABCabc".match(/\w/); // 进行无分组一次性匹配, 得到得到结果构建的数组类型[a, index:0, input:"abcABCabc"], 没有匹配到返回null

"abcABC".match(/\w/g); // 进行全文分组匹配, 得到结果为结果组成的数组[a, b, c, A, B, C]

"abcABC".match(/(abc)(ABC)/);

RegExp.$1取第一个分组
RegExp.$2取第二个分组

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>正则</title>

</head>

<body>

</body>

<script>

    // 正则: 有语法规则的字符串, 用来匹配目标字符串

    // 定义正则

    // 第一种: 通过构造函数来创建正则对象, 特殊字符需要转义

    // var re = new RegExp('\\d');

    // 第二种

    var re = /\d{2}/;

    // 可以用正则的字符串方法

    var res = "#abc1abc56".search(re);

    console.log(res);

    // str.search(): 可以匹配正则, 匹配成功返回匹配的索引, 反之返回-1

    var target = 'abc123你好ABC';

    var re = /((abc)((123)你好ABC))/;

    var res = target.match(re);

    console.log(res);

    // 取第四个分组

    console.log(res[4]);

    console.log(RegExp.$4);

    // str.match()

    // 匹配失败返回null, 匹配成功,如果非全文匹配, 返回匹配到的信息的数组形式

    // i: 不区分大小写  eg: /a/i 可以匹配a | A

    // g: 匹配匹配      eg: /a/g 可以匹配abcABCabc中的两个a

    console.log("abcABCabc".match(/(abc)ABCabc/g))

    console.log(RegExp.$1)

</script>

</html>

表单

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>form表单</title>

    <style>

        label {

            display: inline-block;

            width: 80px;

            text-align: right;

        }

        textarea {

            width: 300px;

            height: 200px;

            /*horizontal | vertical*/

            resize: none;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <!--什么是form表单: form组合标签, 用来接收前端用户录入的数据信息 提交 给后台语言-->

    <!--表单元素:

    input: 基本上都是输入框, 通过type全局属性决定input类型, 默认为text

    label: 普通文本框(类似于span), 一般用来为紧跟其后的input框做文本提示

    -->

    <!--form属性:

    action: 后台处理请求的接口(往哪提交数据)

    method: 请求方式

        -- get: 将数据拼接在请求的接口之后, 拼接的长度是有限的,所有传输数据的大小也是有限的,且不安全

        -- post: 将数据作为数据包打包有请求携带给后台, 没有数据大小的限制, 安全

    -->

    <form action="" method="get">

        <div class="row">

            <!--普通输入框-->

            <label>用户名: </label>

            <input type="text" id="usr" name="usr">

        </div>

        <div class="row">

            <!--密文输入框-->

            <label>密码: </label>

            <input type="password" id="pwd" name="pwd">

        </div>

        <div class="row">

            <!--按钮-->

            <input type="button" value="普通按钮">

            <button class="btn1">btn按钮</button>

        </div>

        <div class="row">

            <!--提交按钮, 完成的是表单数据的提交动作, 就是为后台提交数据的 动作-->

            <input type="submit" value="提交">

            <button type="submit">btn提交</button>

        </div>

        <div class="row">

            <!--单选框-->

            <!--注; 通过唯一标识name进行关联, checked布尔类型属性来默认选中-->

            男<input type="radio" name="sex" value="male">

            女<input type="radio" name="sex" value="female">

            哇塞<input type="radio" name="sex" value="wasai" checked>

        </div>

        <div class="row">

            <!--复选框-->

            <!--注: 用户不能输入内容,但是能标识选择的表单元素需要明确value值-->

            篮球<input type="checkbox" name="hobby" value="lq">

            足球<input type="checkbox" name="hobby" value="zq">

            乒乓球<input type="checkbox" name="hobby" value="ppq">

            其他<input type="checkbox" name="hobby" value="other">

        </div>

        <div class="row">

            <!--文本域-->

            <textarea></textarea>

        </div>

        <div class="row">

            <!--下拉框-->

            <select name="place">

                <option value="sh">上海</option>

                <option value="bj">北京</option>

                <option value="sz">深圳</option>

            </select>

        </div>

        <div class="row">

            <!--布尔类型属性-->

            <!--autofocus: 自动获取焦点-->

            <!--required: 必填项-->

            <!--multiple: 允许多项-->

            <input type="text" autofocus required>

            <input type="file" multiple>

            <input type="range">

            <input type="color">

        </div>

        <div class="row">

            <!--重置-->

            <input type="reset" value="重置">

        </div>

    </form>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    // 取消btn1的默认动作

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

        return false;

    });

    // 取消表单的默认提交动作 => type="submit"所有标签的提交事件都取消了

    $('form').submit(function () {

        // return false;

    })

</script>

</html>

模拟前后台交互

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>form案例</title>

    <style>

        .red {

            color: red;

            font-size: 12px;

        }

    </style>

</head>

<body>

<!--

http://api.map.baidu.com/place/v2/search

① query：搜索地点 （如：<input type="text" placeholder="如：肯德基" name="query">）

② region：区域中文名 （如：上海）

③ output：返回数据类型 （如：json /xml）

④ ak：密钥 （如：6E823f587c95f0148c19993539b99295）

-->

<form action="http://api.map.baidu.com/place/v2/search">

    地点(肯德基):<input class="query" type="text" name="query"> <span></span> <br>

    区域(上海):<input type="text" name="region"> <br>

    <select name="output">

        <option value="json">json</option>

        <option value="xml">xml</option>

    </select> <br>

    <input type="hidden" name="ak" value="6E823f587c95f0148c19993539b99295">

    <input type="submit" value="搜索">

</form>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    $('.query').blur(function () {

        if ($(this).val().search(/.+/) == -1) {

            $(this).next().text("请输入内容").addClass('red')

        }

    })

    $('.query').focus(function () {

        $(this).next().text("")

    })

</script>

</html>

扩展方法 (插件机制)

用JQuery写插件时，最核心的方两个方法

<script>

$.extend(object) //为JQuery 添加一个静态方法。

$.fn.extend(object) //为JQuery实例添加一个方法。

jQuery.extend({

min: function(a, b) { return a < b ? a : b; },

max: function(a, b) { return a > b ? a : b; }

});

console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({

"print":function(){

for (var i=0;i<this.length;i++){

console.log($(this)[i].innerHTML)

}

}

});

$("p").print();

</script>

定义作用域

定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

(function(a,b){return a+b})(3,5)

(function ($) { })(jQuery);

//相当于

var fn = function ($) { };

fn(jQuery);

默认参数

定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。

/step01 定义JQuery的作用域

(function ($) {

//step03-a 插件的默认值属性

var defaults = {

prevId: 'prevBtn',

prevText: 'Previous',

nextId: 'nextBtn',

nextText: 'Next'

//……

};

//step06-a 在插件里定义方法

var showLink = function (obj) {

$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });

}

//step02 插件的扩展方法名称

$.fn.easySlider = function (options) {

//step03-b 合并用户自定义属性，默认属性

var options = $.extend(defaults, options);

//step4 支持JQuery选择器

//step5 支持链式调用

return this.each(function () {

//step06-b 在插件里定义方法

showLink(this);

});

}

})(jQuery);

实例之注册验证

<form class="Form">

<p><input class="v1" type="text" name="username" mark="用户名"></p>

<p><input class="v1" type="text" name="email" mark="邮箱"></p>

<p><input class="v1" type="submit" value="submit" onclick="return validate()"></p>

</form>

<script src="jquery-3.1.1.js"></script>

<script>

// 注意:

// DOM对象--->jquery对象 $(DOM)

// jquery对象--->DOM对象 $("")[0]

//---------------------------------------------------------

// DOM绑定版本

function validate(){

flag=true;

$("Form .v1").each(function(){

$(this).next("span").remove();// 防止对此点击按钮产生多个span标签

var value=$(this).val();

if (value.trim().length==0){

var mark=$(this).attr("mark");

var ele=document.createElement("span");

ele.innerHTML=mark+"不能为空!";

$(this).after(ele);

$(ele).prop("class","error");// DOM对象转换为jquery对象

flag=false;

// return false-------->引出$.each的return false注意点

}

});

return flag

}

//---------------------------------------------------------

//---------------------------------------------------------

//---------------------------------------------------------

function f(){

for(var i=0;i<4;i++){

if (i==2){

return

}

console.log(i)

}

}

f(); // 这个例子大家应该不会有问题吧!!!

//------------------------------------------

li=[11,22,33,44];

$.each(li,function(i,v){

if (v==33){

return ; // ===试一试 return false会怎样?

}

console.log(v)

});

//------------------------------------------

// $.MyEach(obj,function(i,v){}):

for(var i in obj){

func(i,obj[i]) ; // i就是索引,v就是对应值

// {}:我们写的大括号的内容就是func的执行语句;

}

// 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行

//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,

//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:

for(var i in obj){

ret=func(i,obj[i]) ;

if(ret==false){

return ;

}

}

// 这样就很灵活了:

// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true

// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

// ---------------------------------------------------------------------

// 说了这么多,请问大家如果我们的需求是:判断出一个输入有问题后面就不判断了(当然也就不显示了),

// 怎么办呢?

// 对了

if (value.trim().length==0){

//...

//...

//flag=false; // flag=false不要去,它的功能是最后如果有问题,不提交数据!

return false

}

//最后,大家尝试着用jquery的绑定来完成这个功能!

$(".Form :submit").click(function(){});

</script>

JQuery使用教程的更多相关文章

值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
JQuery强化教程 —— jQuery Easing
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
jquery 基础教程[温故而知新二]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
jQuery插件开发教程
jQuery插件开发教程 ——让你的jQuery水平提升一个台阶要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...
Jquery easyui 教程
Jquery easyui教程目录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...
jQuery 实验教程
jQuery 实验教程 jQuery 简介.语法及事件处理 jQuery 以其特有的简练的代码风格,极大得改变了 JavaScript 代码编写的方式.本教程以实例代码为基础,讲解 jQuery 的使 ...
jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
jQuery插件教程
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 非常不错的jQuery插件教程
大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人不收藏是你的错^_^. 经证实,均可免费下载. 资源名称资源大小 15天学会jQuery(完整版).pd ...
［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

随机推荐

vue.js个人学习心得
2017.4.7开始辞职刚好一个月时间,一个月时间里我开始彷徨,迷惘,失业带来的痛苦,打算转行,不再搞机械行业,因为不想再做低端的产品设计(本身不是研究生也不是说天资卓越,只是不甘于平凡). 好了,不 ...
Django - 补充目录
Django项目部署 importlib应用 - django contenttypes - django组件 Django - Model操作 Django - 用户认证.用户组.用户权限 Djan ...
Constructing Roads----poj2421（最小生成树Kruskal）
题目链接: http://poj.org/problem?id=2421 想把n个村庄连接在一起:求最小生成树,不同的是已经有了m条线段链接在一起了,求剩下的: 感觉用Kruskal会简单一点 #in ...
聊一聊Linux中的工作队列
2018-01-18 工作队列是Linux内核中把工作延迟执行的一种手段,其目的不同于软中断,软中断是提高CPU的响应,尽可能的缩短关中断的时间:而工作队列主要目的是节省资源,其比较适合很微小的任务, ...
nginx 11个处理阶段 && nginx lua 8个处理阶段
1. nginx 11 个处理阶段 nginx实际把请求处理流程划分为了11个阶段,这样划分的原因是将请求的执行逻辑细分,各阶段按照处理时机定义了清晰的执行语义,开发者可以很容易分辨自己需要开发的模块 ...
matlab做曲线拟合
python 做曲线拟合 https://blog.csdn.net/qq_16583687/article/details/72723708 matlab做拟合函数,可以在命令行输入:数据x,数据y ...
Centos安装ELK5.3.2
一.注意情况 1.elk的版本要一致. 2.ElasticSearch是基于lucence开发的,也就是运行需要java支持.所以要先安装JAVA环境.由于es5.x依赖于JDK1.8,所以需要安装J ...
eclipse向svn提交代码的时候忽略部分资源配置
eclipse向svn提交代码的时候有 .settings, .project, .classpath, target等不需要上传,所以在eclipse中配置一下就不会显示了,方法如下图:
PAT 1015 Reversible Primes[求d进制下的逆][简单]
1015 Reversible Primes (20)(20 分)提问 A reversible prime in any number system is a prime whose "r ...
iOS手机应用开发原型模板及开发流程
在开始做一个项目的时候,究竟需要准备些什么前期工作呢,在外包公司中,又是一个怎么样的开发步骤呢?下面,按照我的理解,说一下. 项目流程图看上图,从左往右,如果我们仅是一名开发工程师,只需要关心上图中 ...

JQuery使用教程

jQuery简介

两种使用方式

jQuery对象

选择器

基本选择器

层级选择器

基本筛选器

属性选择器

表单选择器

筛选器

过滤筛选器

查找筛选器

实例tab切换菜单

运用实例

操作元素(属性，css，文档处理)

属性操作

注意

实例运用

实例之全反选

实例之模态对话框

jQ轮播图

文档处理

文档结构

常用文档操作

实例之留言框

实例之复制样式条

css操作

实例返回顶部

样式操作

事件

实例运用

实例之面板拖动

实例之放大镜

动画效果

显示隐藏

滑动

淡入淡出

回调函数

运用实例

自定义动画

jq动画案例

正则

定义

匹配案例

表单

模拟前后台交互

扩展方法 (插件机制)

定义作用域

默认参数

实例之注册验证

JQuery使用教程的更多相关文章

随机推荐

热门专题