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()

回到顶部

选择器#

基本选择器#

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

层级选择器#

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

基本筛选器#

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

属性选择器#

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

表单选择器#

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

回到顶部

筛选器#

过滤筛选器#

1	`$("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轮播图#

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

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

常用文档操作#

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

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

实例之放大镜#

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!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动画案例#

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!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
正则的语法书写在//之间
i代表不区分大小写
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>

回到顶部

表单#

100

101

102

103

104

105

106

107

108

109

110

<!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);

实例之注册验证#

100

101

102

103

104

105

106

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

posted @ 2018-12-26 18:37 鲸鱼的海老大阅读(728) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

公告

昵称：鲸鱼的海老大
园龄： 7年1个月
粉丝： 2
关注： 8

+加关注

2025年3月

日

一

二

三

四

五

六

不积跬步无以至千里

JQuery使用教程

jQuery简介#

两种使用方式#

jQuery对象#

选择器#

基本选择器#

层级选择器#

基本筛选器#

属性选择器#

表单选择器#

筛选器#

过滤筛选器#

查找筛选器#

实例tab切换菜单#

运用实例#

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

属性操作#

注意#

实例运用#

实例之全反选#

实例之模态对话框#

jQ轮播图#

文档处理#

文档结构#

常用文档操作#

实例之留言框#

实例之复制样式条#

css操作#

实例返回顶部#

样式操作#

事件#

实例运用#

实例之面板拖动#

实例之放大镜#

动画效果#

显示隐藏#

滑动#

淡入淡出#

回调函数#

运用实例#

自定义动画#

jq动画案例#

正则#

定义#

匹配案例#

表单#

模拟前后台交互#

扩展方法 (插件机制)#

定义作用域#

默认参数#

实例之注册验证#

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

相册

阅读排行榜

评论排行榜

最新评论