jquery基础

最新推荐文章于 2024-10-02 05:39:15 发布

73、

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量943

点赞数

分类专栏： # 前端基础文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103680332

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JQuery

1、jQuery和Dom的关系
2、快速应用
3、JQuery选择器
4、筛选器
5、属性
6、文档处理
7、css处理
- 示例9：点赞+1动态效果实现
8、位置
9、事件
10、JQuery扩展

jQuery是一个javascript库，核心理念是write less, do more，他内部帮我们把几乎所有功能都做了封装，相比DOM、BOM操作会更加简单。例如：

// DOM根据ID选择标签对象
document.getElementById("xx")
// jQuery根据ID选择标签对象
$('#xx')

1、jQuery和Dom的关系

jQuery相当于集成了DOM/BOM/JaveScript的类库。

DOM对象和jQuery对象都为标签提供了各种各种功能，并且两者之间可以进行相互转换。

jQuery API 中文文档: http://jquery.cuishifeng.cn/

JQuery版本有1.x、2.x、3.x

jquery对象和dom对象之间的转换
jquery对象[0] —> dom对象
$(dom对象) —> jquery对象

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id='i1'>123</div>
        <script src="jquery-1.12.4.js"></script> // 导入jquery
        <script>
            $('#i1') // == JQuery('#i1') //jquery获取标签的方式
            
            //jquery对象转换成dom对象
            $('#i1')[0] // == document.getElementById('i1')

            d = document.getElementById('i1')
            $(d) // 这样就把dom对象转换成jquery对象
        </script>
    </body>
</html>

2、快速应用

在使用jQuery时，需要提前下载并应用jQuery之后，才能在代码中使用。

下载jQuery http://jquery.com/download/

应用jQuery

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery</title>
</head>
<body>
    <div class="body">
        <ul>
            <li id="login">登录</li>
            <li id="register">注册</li>
        </ul>
    </div>
    <!--引入jQuery-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script>
        // 利用jQuery提供的功能获取标签文本
        var value = $('#login').text();
        console.log(value);
    </script>
</body>
</html>

3、JQuery选择器

直接找到某个或者某类标签

id选择器、class选择器、标签选择器、组合选择器、层级选择器、属性选择器、表单选择器

1.id选择器

$('#id')
	<div id='i1'>123</div>
	$('#i1')

2.class选择器

$(".class")
	<div class='c1'>123</div>
	$('.c1')

3.标签选择器

$('a')
	<divclass='c1'>
		<a>f</a>
		<a>f</a>
	</div>
	<div class='c1'>
		<a>f</a>
	</div>
	<div class='c1'></div>
	$('a')

4.组合选择器

$('biaoqian, .class, #id')
	<div id='i1' class='c1'>
		<a>f</a>
		<a>f</a>
	</div>
	<div class='c1'>
		<a>f</a>
	</div>
	<div class='c1'>
		<div class='c2'></div>
	</div>
	$('a, .c2, #i1')

5.层级选择器

$('#i1 a') 子子孙孙
$('#i1>a') 只找儿子
	<div id='i1' class='c1'>
		<div>
			<a>f</a>
		</div>
		<a>f</a>
		<a>f</a>
	</div>
	<div class='c1'>
		<a>f</a>
	</div>
	<div class='c1'>
		<div class='c2'></div>
	</div>
	$('#i1 a')

6.属性选择器


<div id='i1' class='c1'>
	<div>
		<a>f</a>
	</div>
    <a xue='123'>f</a>
    <a xue="456">f</a>
	<a>f</a>
	<a>f</a>
</div>
<div class='c1'>
	<a>f</a>
</div>
<div class='c1'>
	<div class='c2'></div>
</div>

$('[xue]')			具有xue属性的所有标签
$('[xue="123"]')	xue="123"的标签

<input type="text" />
<input type="text" />
<input type="password" />

$('input[type="text"]')

7.表单选择器


<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select>
        <option>Option</option>
    </select>
    <textarea> </textarea>
    <button>Button</button>
</form>

JQuery代码
$(":text")          // 找到所有input标签
// $(":input")      找到所有input标签
// $(":password")   找到所有input且type=password的标签
// $(":radio")      找到所有input且type=radio的标签
// $(":checkbox")   找到所有input且type=checkbox的标签

result
[ <input type="text" /> ]

示例1：全选反选取消

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" οnclick="checkAll();" />
        <input type="button" value="反选" οnclick="reverseAll();" />
        <input type="button" value="取消" οnclick="cancelAll();" />

        <table border="1">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>IP</th>
                    <th>PORT</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1</td>
                    <td>80</td>
                </tr>
            </tbody>
        </table>

        <script src="jquery-1.12.4.js"> </script>
        <script>
            function checkAll(){
                $("#tb :checkbox").prop('checked', true)
            }
            function cancelAll(){
                $("#tb :checkbox").prop('checked', false)
            }
            function reverseAll(){
                //$("#tb:checkbox").each(function(k){
                    //this, 代指当前循环的每一个元素; k, 代指索引
                    // console.log(this, k)
                //})
                
                $("#tb :checkbox").each(function(){ // jquery方法内置循环
                    // 1、Dom
                    /*
                    if(this.checked){
                        this.checked = false;
                    }else{
                        this.checked = true;
                    }
                    */

                    // 2、jquery
                    /*
                    if($(this).prop('checked')){
                        $(this).prop('checked', false);
                    }else{
                        $(this).prop('checked', true);
                    }
                    */

                    // 3、三元运算
                    // var v = 条件?真值:假值
                    var v = $(this).prop('checked')?false:true; // 获取值
                    $(this).prop('checked', v); // 设置值
                })
                
            }
        </script>
    </body>
</html>

4、筛选器

筛选器一般用于对选择器选中的标签进行再次筛选。

1.parent 父标签

还有parents、parentsUntil

html代码
<div><p>Hello</p><p>Hello</p></div>

jquery代码
$("p").parent()

结果
[<div><p>Hello</p><p>Hello</p></div> ]

2.children 所有子标签

html代码
<p>Hello</p>
<div>
	<span>Hello Again</span>
</div>
<p>And Again</p>

jquery代码
$("div").children()

结果
[ <span>Hello Again</span> ]

3.next 下一个兄弟标签

html代码
<p>Hello</p>
<p>Hello Again</p>
<div>
	<span>And Again</span>
</div>

jquery代码
$("p").next()

结果
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

4.prev 上一个兄弟标签

还有prevAll、prevUntil

html代码
<p>Hello</p>
<div>
	<span>Hello Again</span>
</div>
<p>And Again</p>

jquery代码
$("p").prev()

结果
[ <div><span>Hello Again</span></div> ]

5.siblings 所有兄弟标签

html代码
<p>Hello</p>
<div>
	<span>Hello Again</span>
</div>
<p>And Again</p>

jquery代码
$("div").siblings()

结果
[ <p>Hello</p>, <p>And Again</p> ]

6.find 子孙中查找标签

html代码
<p><span>Hello</span>, how are you?</p>

jquery代码
$("p").find("span")

结果
[ <span>Hello</span> ]

7.first 匹配的第一个标签、获取第一个元素

html代码
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jquery代码
$('li').first() //$('li'):first

结果
[ <li>list item 1</li> ]

8.last 匹配的最后一个标签

html代码
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jquery代码
$('li').last() //$('li'):last

结果
[ <li>list item 5</li> ]

9.基本筛选器

:even 		匹配所有索引值为偶数的元素，从 0 开始计数
:odd 		匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 	匹配一个给定索引值的元素
:gt(index)	匹配所有大于给定索引值的元素
:lt(index) 	匹配所有小于给定索引值的元素

示例2：菜单栏一个打开其它的合起来功能

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .header{
                background-color: black;
                color: white;
            }
            .content{
                min-height: 50px;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <div style="height: 400px; width: 200px; border: 1px solid #dddddd">
            <div class="item">
                <div class="header">标题一</div>
                <div class="content">內容一</div>
            </div>
            <div class="item">
                <div class="header">标题二</div>
                <div class="content hide">內容二</div>
            </div>
            <div class="item">
                <div class="header">标题三</div>
                <div class="content hide">內容三</div>
            </div>
        </div>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $('.header').click(function(){
                // 当前点击的标签
                // 获取某个标签的下一个标签
                // 获取某个标签的父标签
                // 获取所有的兄弟标签
                // 添加样式和移除样式
                // $('#i1').addClass('hide')
                // $('#i1').removeClass('hide')
                // $(this).next() // 下一个
                // $(this).nextAll()
                // $(this).nextUntil('#i2')
                // $(this).prev() // 上一个
                // $(this).prevAll()
                // $(this).prevUntil('#i2')
                // $(this).parent() // 父亲
                // $(this).parents()
                // $(this).parentsUntil('#i2')
                // $(this).children() // 孩子
                // $(this).siblings() 所有的兄弟标签
                /*1、*/
                $(this).next().removeClass('hide')
                $(this).parent().siblings().find(".content").addClass("hide") // find是在子子孙孙里面查找
                
                /*2、链式编程
                $(this).next().removeClass('hide').parent().siblings().find(".content").addClass("hide")
                */
            })
        </script>
    </body>
</html>

5、属性

1.addClass、removeClass、toggleClass

removeClass //移除属性
addClass	//添加属性
toggleClass	//

示例3：开关功能

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <input class="c2" type="button" value="开关" />
        <div class="c1 hide">
            asdfasdf
        </div>
        <script src="jquery-1.12.4.js"> </script>
        <script>
        /*1、
            if($('.c1').hasClass('hide')){
                $('.c1').removeClass('hide');
            }else{
                $('.c1').addClass('hide');
            }
        */
        /*2、*/
            $('.c2').click(function(){
                $('.c1').toggleClass('hide');
            });
            
        </script>
    </body>
</html>

2.html、text文本

<div class="a1">
    <a href="">百度</a>
</div>
<div class="a2"></div>

取值：
    $('.a1').html()
    $('.a1').text()
设置值：
    $('.a2').html('<a href="">京东</a>')
  $('.a2').text('<a href="">京东</a>')

取值结果：
    html：<a href="">百度</a>
    text：百度
设置值结果：
  html中的内容会生成一个标签
  text中的内容还是一个文本内容显示，不能识别成标签

3.val值

$('#i2').val()	//获取
$('#i2').val("sadds") //设置

<input type="text" id="username">
<input type="text" class="a1" name="sex">男
<input type="text" class="a1" name="sex">女
<input type="text" class="a2" name="hobby">basketball
<input type="text" class="a2" name="hobby">football
<input type="text" class="a2" name="hobby">pingpang
<select name="city" id="s1">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>
<select name="lover" id="s2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

获取值：
    文本输入框：$('#username').val();
    单选radio框：$('.a1:checked').val();
    多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
    var d = $(':checkbox:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
    单选select框：$('#city').val()；
  	多选select框：$('#lover').val();
设置值：
    文本输入框：$('#username').val('you are my love');
    单选radio框：$('.a1').val([2]);  #注意里面必须是列表，写的是value属性对应的值
    多选checkout框：$('.a2').val(['2','3'])
    单选select框：$('#city').val('1')；
  	多选select框：$('#lover').val(['2','3'])

示例4：模态框添加和编辑功能

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        .hide{
            display: none;
        }
            .modal{
                position: fixed;
                top: 50%;
                left: 50%;
                height: 400px;
                width: 400px;
                margin-left: -200px;
                margin-top: -200px;
                background-color: #eeeeee;
                z-index: 10;
            }
            .shadow{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0.6;
                background-color: black;
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <a οnclick="addElement();">添加</a>

        <table border="1">
            <thead>
                <tr>
                    <th>IP</th>
                    <th>PORT</th>
                    <th>选项</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>1.1.11</td>
                    <td>80</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
                <tr>
                    <td>1.1.12</td>
                    <td>80</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
                <tr>
                    <td>1.1.13</td>
                    <td>80</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
                <tr>
                    <td>1.1.14</td>
                    <td>80</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="modal hide">
            <div>
                <input name="hostname" type="text" />
                <input name="port" type="text" />
            </div>
            <div>
                <input type="button" value="取消" οnclick="cancelModal();" />
            </div>
        </div>
        <div class="shadow hide"></div>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            function addElement(){
                $('.modal, .shadow').removeClass('hide');
            }
            function cancelModal(){
                $('.modal, .shadow').addClass('hide');
                $('.modal input[type="text"]').val("");
            }
            $('.edit').click(function(){
                $('.modal, .shadow').removeClass('hide');
                //this
                var tds = $(this).parent().prevAll();
                var port = $(tds[0]).text();
                var host = $(tds[1]).text();
                console.log(port, host);
                $('.modal input[name="hostname"]').val(host);
                $('.modal input[name="port"]').val(port);
                //循环获取tds中的内容
                //获取<td>内容</td>获取中间的内容
                //赋值给input标签中的value
            })
        </script>
    </body>
</html>

4.attr属性、prop属性

# 专门用来做自定义属性
$(..).attr

# 专门用于checkbox, radio
$(..).prop

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .hide{
                    display: none;
                }
            </style>
        </head>
        <body>
        	<input type="checkbox" id="i2" />
            <input class="c2" type="button" value="开关" />
            <div class="c1 hide">
                asdfasdf
            </div>
            <script src="jquery-1.12.4.js"> </script>
            <script>
                
            </script>
        </body>
    </html>

$('#i1').attr('type') //获取值
$('#i1').attr('id')
$('#i1').attr('value')
$('#i1').attr('name', 'xue') //设置值
$('#i1').removeAttr('value') //删除

1、方式一
$('#i2').attr('checked', 'checked')
$('#i2').removeAttr('checked')
2、方式二，用这个
$('#i2').prop('checked') //获取值
$('#i2').prop('checked', true) //设置值
$('#i2').prop('checked', false)

示例5：模态对话框之根据属性查找，将对应的内容放到文本框中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        .hide{
            display: none;
        }
            .modal{
                position: fixed;
                top: 50%;
                left: 50%;
                height: 400px;
                width: 400px;
                margin-left: -200px;
                margin-top: -200px;
                background-color: #eeeeee;
                z-index: 10;
            }
            .shadow{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0.6;
                background-color: black;
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <a οnclick="addElement();">添加</a>

        <table border="1">
            <thead>
                <tr>
                    <th>IP</th>
                    <th>PORT</th>
                    <th>选项</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td target="hostname">1.1.11</td>
                    <td target="port">81</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
                <tr>
                    <td target="hostname">1.1.12</td>
                    <td target="port">82</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
                <tr>
                    <td target="hostname">1.1.13</td>
                    <td target="port">83</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
                <tr>
                    <td target="hostname">1.1.14</td>
                    <td target="port">84</td>
                    <td>
                        <a class="edit">编辑</a> | <a>删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="modal hide">
            <div>
                <input name="hostname" type="text" />
                <input name="port" type="text" />
            </div>
            <div>
                <input type="button" value="取消" οnclick="cancelModal();" />
            </div>
        </div>
        <div class="shadow hide"></div>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            function addElement(){
                $('.modal, .shadow').removeClass('hide');
            }
            function cancelModal(){
                $('.modal, .shadow').addClass('hide');
                $('.modal input[type="text"]').val("");
            }
            $('.edit').click(function(){
                $('.modal, .shadow').removeClass('hide');
                //this
                var tds = $(this).parent().prevAll();
                tds.each(function(){
                    //this, 代指td
                    // 获取td的target属性值
                    var n = $(this).attr('target');
                    // 获取td中的内容
                    var text = $(this).text();
                    $('.modal input[name="' + n + '"]').val(text);

                });
                //var port = $(tds[0]).text();
                //var host = $(tds[1]).text();
                //console.log(port, host);
                //$('.modal input[name="hostname"]').val(host);
                //$('.modal input[name="port"]').val(port);
                //循环获取tds中的内容
                //获取<td>内容</td>获取中间的内容
                //赋值给input标签中的value
            })
        </script>
    </body>
</html>

示例6：tab菜单切换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        .hide{
            display: none;
        }
            .menu{
                height: 38px;
                background-color: #eeeeee;
                line-height: 38px;
            }
            .menu .menu-item{
                float: left;
                border-right: 1px solid red;
                padding: 0 5px;
                cursor: pointer; //小手
            }
            .menu .active{
                background-color: brown;
            }
            .content{
                min-height: 100px;
                border: 1px solid #eeeeee;
            }
        </style>
    </head>
    <body>
            <div style="width: 700px; margin: 0 auto;">
                <div class="menu">
                    <div class="menu-item active" a='1'>菜单一</div>
                    <div class="menu-item" a='2'>菜单二</div>
                    <div class="menu-item" a='3'>菜单三</div>
                </div>
                <div class="content">
                    <div b='1'>内容一</div>
                    <div class="hide" b='2'>内容二</div>
                    <div class="hide" b='3'>内容三</div>
                </div>
            </div>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            $('.menu-item').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                /*1、
                var a = $(this).attr('a');
                $('.content').children("[b='" + a + "']").removeClass('hide').siblings().addClass('hide');*/
                /*2、*/
                var v = $(this).index(); //获取索引
                $('.content').children().eq(v).removeClass("hide").siblings().addClass('hide');
            });
        </script>
    </body>
</html>

6、文档处理

1.append 内部插入

HTML代码：
<div class="d1">
    <span>ds</span>
</div>

jQuery代码：
$('#d1').append('<a href="http://www.jd.com">京东</a>');

结果：
<div class="d1">
    <span>ds</span>
    <a href="http://www.jd.com">京东</a>
</div>

2.prepend 内部插入

HTML代码：
<div class="d1">
    <span>ds</span>
</div>

jQuery代码：
$('#d1').prepend('<a href="http://www.jd.com">京东</a>');

结果：
<div class="d1">
	<a href="http://www.jd.com">京东</a>
    <span>ds</span> 
</div>

3.after 外部插入

HTML代码：
<div class="d1">
    <span>ds</span>
</div>

jQuery代码：
$('#d1').after('<a href="http://www.jd.com">京东</a>');

结果：
<div class="d1">
    <span>ds</span> 
</div>
<a href="http://www.jd.com">京东</a>

4.before 外部插入

HTML代码：
<div class="d1">
    <span>ds</span>
</div>

jQuery代码：
$('#d1').before('<a href="http://www.jd.com">京东</a>');

结果：
<a href="http://www.jd.com">京东</a>
<div class="d1">
    <span>ds</span> 
</div>

5.remove 删除标签

HTML代码：
<div class="d1">
    <span>ds</span>
</div>
<div>hello</div>

jQuery代码：
$('#d1').remove();

结果：
<div>hello</div>

6. empty 删除标签内部的标签

HTML代码：
<div class="d1">
    <span>ds</span>
</div>

jQuery代码：
$('#d1').empty();

结果：
<div class="d1">
    
</div>

示例7：添加标签、删除标签、复制标签

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        
        </style>
    </head>
    <body>
        <input id="t1" type="text" />
        <input id="d1" type="button" value="add" />
        <input id="d2" type="button" value="delete" />
        <input id="d3" type="button" value="copy" />
        <ul id="u1">
            <li>1</li>
            <li>2</li>
        </ul>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            $('#d1').click(function(){
                var v = $('#t1').val();
                var temp = '<li>' + v + '</li>';
                //$('#u1').append(temp); // 加在后面
                $('#u1').prepend(temp); // 加在前面
                //$('#u1').after(temp);
                //$('#u1').before(temp);
            });

            $('#d2').click(function(){
                var index = $('#t1').val();
                //$('#u1 li').eq(index).empty(); // 只是清空内容，标签还在
                $('#u1 li').eq(index).remove(); // 删除标签
            });

            $('#d3').click(function(){
                var index = $('#t1').val();
                var n = $('#u1 li').eq(index).clone();
                $('#u1').append(n);
            });
        </script>
    </body>
</html>

示例8：模态对话框之删除和添加功能

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        .hide{
            display: none;
        }
            .modal{
                position: fixed;
                top: 50%;
                left: 50%;
                height: 400px;
                width: 400px;
                margin-left: -200px;
                margin-top: -200px;
                background-color: #eeeeee;
                z-index: 10;
            }
            .shadow{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0.6;
                background-color: black;
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <a οnclick="addElement();">添加</a>

        <table border="1">
            <thead>
                <tr>
                    <th>IP</th>
                    <th>PORT</th>
                    <th>选项</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td target="hostname">1.1.11</td>
                    <td target="port">81</td>
                    <td>
                        <a class="edit">编辑</a> | <a class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td target="hostname">1.1.12</td>
                    <td target="port">82</td>
                    <td>
                        <a class="edit">编辑</a> | <a class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td target="hostname">1.1.13</td>
                    <td target="port">83</td>
                    <td>
                        <a class="edit">编辑</a> | <a class="del">删除</a>
                    </td>
                </tr>
                <tr>
                    <td target="hostname">1.1.14</td>
                    <td target="port">84</td>
                    <td>
                        <a class="edit">编辑</a> | <a class="del">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="modal hide">
            <div>
                <input name="hostname" type="text" />
                <input name="port" type="text" />
            </div>
            <div>
                <input type="button" value="取消" οnclick="cancelModal();" />
                <input type="button" value="确定" οnclick="confirmModal();" />
            </div>
        </div>
        <div class="shadow hide"></div>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            function confirmModal(){
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                td1.innerText = "11.11.11.11";
                var td2 = document.createElement("td");
                td2.innerText = "90";
                $(tr).append(td1);
                $(tr).append(td2);
                $("#tb").append(tr);
                $('.modal, .shadow').addClass('hide');
            }
            $(".del").click(function(){
                $(this).parent().parent().remove();
            });
            function addElement(){
                $('.modal, .shadow').removeClass('hide');
            }
            function cancelModal(){
                $('.modal, .shadow').addClass('hide');
                $('.modal input[type="text"]').val("");
            }
            $('.edit').click(function(){
                $('.modal, .shadow').removeClass('hide');
                //this
                var tds = $(this).parent().prevAll();
                tds.each(function(){
                    //this, 代指td
                    // 获取td的target属性值
                    var n = $(this).attr('target');
                    // 获取td中的内容
                    var text = $(this).text();
                    $('.modal input[name="' + n + '"]').val(text);

                });
                //var port = $(tds[0]).text();
                //var host = $(tds[1]).text();
                //console.log(port, host);
                //$('.modal input[name="hostname"]').val(host);
                //$('.modal input[name="port"]').val(port);
                //循环获取tds中的内容
                //获取<td>内容</td>获取中间的内容
                //赋值给input标签中的value
            })
        </script>
    </body>
</html>

7、css处理

示例9：点赞+1动态效果实现

所需知识：
$(’.class’).css(‘样式名称’, ‘样式值’)
$(’.class’).append()
$(’.class’).remove()
setInterval
clearInterval
opacity 1–>0
position
字体大小、位置

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                padding: 50px;
                border: 1px solid black;
            }
            .item{
                position: relative;
                width: 30px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>
        <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>
        <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>
        <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            $('.item').click(function(){
                addFavor(this);
            });

            function addFavor(self){
                var fontSize = 15;
                var top = 0;
                var right = 0;
                var opacity = 1;
                //DOM对象
                var tag = document.createElement('span');
                $(tag).text('+1');
                $(tag).css('color', 'green');
                $(tag).css('position', 'absolute');
                $(tag).css('fontSize', fontSize + 'px');
                $(tag).css('top', top + 'px');
                $(tag).css('right', right + 'px');
                $(tag).css('opacity', opacity);
                $(self).append(tag);

                var obj = setInterval(function(){
                    fontSize = fontSize + 5;
                    top = top - 5;
                    right = right - 5;
                    opacity = opacity - 0.1;

                    $(tag).css('fontSize', fontSize + 'px');
                    $(tag).css('top', top + 'px');
                    $(tag).css('right', right + 'px');
                    $(tag).css('opacity', opacity);

                    if(opacity <= 0){
                        clearInterval(obj);
                        $(tag).remove();
                    }
                }, 100);
            }
        </script>
    </body>
</html>

8、位置

scrollTop([val])
scrollLeft([val])

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                
            </style>
        </head>
        <body>
            <div id="i1"></div>
            <div style="height: 100px; width: 100px; overflow: auto;">
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
                <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            </div>
            <div id="i2"></div>
            <div style="height: 1000px;">
                
            </div>
            <script src="jquery-1.12.4.js"> </script>
            <script>
                
            </script>
        </body>
    </html>

在这里插入图片描述
offset 指定标签在html中的坐标

position 指定标签相对于父标签(relative)标签的坐标
height() 获取标签的高度，纯高度
innerHeight() 获取边框 + 纯高度 + ?
outerHeight() 获取边框 + 纯高度 + ?
outerHeight(true) 获取边框 + 纯高度 + ?

<div style="position: relative;">
	<div>
		<div id="i1" style="position:absolute;height:80px;border:1px;"></div>
	</div>
</div>

$('#i1').height()
$('#i1').innerHeight()
$('#i1').outerHeight()
$('#i1').outerHeight(true)

9、事件

1.事件绑定的方式

$(’.c1’).click()
$(’.c1’)…
$(’.c1’).bind(‘click’, function(){})
$(’.c1’).unbind(‘click’, function(){})
$(’.c1’).delegate(‘a’, ‘click’, function(){})
$(’.c1’).undelegate(‘a’, ‘click’, function(){})
$(’.c1’).on(‘click’, function(){})
$(’.c1’).off(‘click’, function(){})

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        
        </style>
    </head>
    <body>
        <input id="t1" type="text" />
        <input id="d1" type="button" value="add" />
        <ul id="u1">
            <li>1</li>
            <li>2</li>
        </ul>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            $('#d1').click(function(){
                var v = $('#t1').val();
                var temp = '<li>' + v + '</li>';
                $('#u1').append(temp); // 加在后面
            });

            //$('#u1 li').click(function(){
            //    var v = $(this).text();
            //    alert(v);
            //});

            //$('#u1 li').bind('click', function(){
            //    var v = $(this).text();
            //    alert(v);
            //});

            //$('#u1 li').on('click', function(){
            //    var v = $(this).text();
            //    alert(v);
            //});

            //delegate将标签的绑定事件也加上去了，前面三种都不能够做到
            $('#u1').delegate('li', 'click', function(){
                var v = $(this).text();
                alert(v);
            });
        </script>
    </body>
</html>

阻止事件的发生

<a οnclick="return clickOn() href="https://blog.csdn.net/weixin_40318474">go1</a>
<a id="x1" href="https://blog.csdn.net/weixin_40318474">go2</a>
<script>
	function clickOn(){
		alert(123);
		return false; //true, 执行后面的跳转; false, 不执行跳转
	}
	$('#x1').click(function(){
		alert(456);
		return false; //true, 执行后面的跳转; false, 不执行跳转
	});
</script>

用以上内容可以做一个表单验证

实例10、表单验证

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .error{
                color: red;
            }
        </style>
    </head>
    <body>
        <form id="f1" action="s1.html" method='POST'>
            <div><input name="n1" type="text" /></div>
            <div><input name="n2" type="password" /></div>
            <div><input name="n3" type="text" /></div>
            <div><input name="n4" type="text" /></div>
            <div><input name="n5" type="text" /></div>
            <input type="submit" value="提交" />
        </form>
        <script src="jquery-1.12.4.js"> </script>
        <script>
            // 当页面框架加载完毕后，自动执行
            $(function(){
                // 当页面所有元素完全加载完毕后，执行
                $(':submit').click(function(){
                    var flag = true;
                    $('.error').remove();
                    $("#f1").find("input[type='text'], input[type='password']").each(function(){
                        var v = $(this).val();
                        
                        if(v.length <= 0){
                            flag = false;
                            var tag = document.createElement("span");
                            tag.innerHTML = "必填";
                            tag.className = "error";
                            $(this).after(tag);
                            return false;
                        }
                    });

                    return flag;
                });
                /*$(':submit').click(function(){
                    var v = $(this).prev().val();
                    if(v.length > 0){
                        return true;
                    }else{
                        alert("请输入内容");
                        return false;
                    }
                });*/
            });

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

10、JQuery扩展

<script src="jquery-1.12.4.js"> </script>
<script>
	//1
	$.extend({
		'xue': function(){
			return 'x';
		}
	});         
	var v = $.xue();
	alert(v); 
	//2
	$.fn.extend({
		'bob': function(){
			return 'bob';
		}
	});  
	var v = $('#i1').bob();
	alert(v); 
	
	//3
	(function(arg){
		var status = 1;
		// 封装变量
	})(JQuery) 
</script>