Python之路56-jQuery

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python之路56-jQuery相关的知识，希望对你有一定的参考价值。

目录

一、查找元素

二、操作

三、示例

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

http://jquery.cuishifeng.cn/

集成了JavaScript、DOM、BOM的类库


版本：1.x 2.x 3.x


jQuery与DOM直接相互转换

jQuery对象[0] => DOM对象

DOM对象 => $(DOM对象)

一、查找元素


1.选择器，直接找到某个或某类标签

$("#id")	//根据ID查找
$(".c1")	//根据className查找
$("a")		//根据标签查找
$("a,.c2")	//组合查找
$("#i10 a")	//层级查找，子子孙孙
$("#i10>a")	//层级查找，儿子


2.基本筛选器

$("#id10>a:first")	//儿子的第一个
$("#id10>a:last")	//儿子的最后一个
$("#id10>a:eq(0)")	//0为索引，从0开始


3.属性

$("[alex]")			//具有alex属性的标签
$("[alex=‘123‘]")	//alex属性等于123的标签


4.筛选

$(this).next()			//下一个
$(this).prev()			//上一个
$(this).parent()		//父
$(this).children()		//孩子
$("#i1").siblings()		//除了自己的所有兄弟
$("#i1").find("#i1")	//子子孙孙中查找

二、操作


1.文本操作

$(..).text()		//获取文本内容
$(..).text("ddd")	//设置文本内容
$(..).html()
$(..).html("...")
$(..).val()     	//获取值
$(..).val("...")    //设置值


2.样式操作

addClass("...")			//添加样式
removeClass("...")		//删除样式
toggleClass("...")		//判断样式是否存在，存在删除，不存在添加


3.属性操作

$(..).attr(参数1)			//获取属性
$(..).attr(参数1，参数2)	//设置属性
$(..).removeAttr()			//删除属性
$(..).prop()				//专门用于checkbox、radio


4.文档处理

append					//向每个匹配的元素内部追加内容
prepend					//向每个匹配的元素内部前置内容
after					//在每个匹配的元素之后插入内容
before					//在每个匹配的元素之前插入内容

remove					//从DOM中删除所有匹配的元素
empty					//删除匹配的元素集合中所有的子节点

clone					//克隆匹配的DOM元素并且选中这些克隆的副本


5.样式处理

$("#t1").css("样式名称", "样式值")


6.位置

scrollTop()
scrollLeft()
$(window).scrollTop()	//获取
$(window).scrollTop(0)	//设置
offset().left  			//指定标签在HTML中的坐标
offset().top  			//指定标签在HTML中的坐标


7.事件


jQuery绑定事件三种方式

//第一种
$(".c1").click()

//第二种
$(".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(){

})


阻止事件发生：

return false


当页面框架加载完毕后，自动执行

$(function(){


})


8.扩展


$.extend    $.方法

$.fn.extend $("i1").方法

//自执行函数
(function(arg){
	var status = 1;
	//封装变量
	arg.extend({
		"wangsen": function(){
			return "sb";
		}
	});
})(jQuery);


9.循环


jQuery方法内置循环

$(":checkbox").each(function(){
	// k当前索引
	// this,DOM对象，当前循环的元素$(this)
});


10.三元运算


var v = 条件？真值：假值

三、示例


1.多选反选取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <input id="i1" type="button" value="全选"/>
    <input id="i2" type="button" value="反选"/>
    <input id="i3" type="button" value="取消"/>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="../jquery/jquery-1.12.4.js"></script>
    <script>
        $("#i1").click(function () {
            $(":checkbox").prop("checked", true);
        });
        $("#i2").click(function () {
            $(":checkbox").each(function () {
                var v = $(this).prop("checked")?false:true;
                $(this).prop("checked", v);
            });
        });
        $("#i3").click(function () {
            $(":checkbox").prop("checked", false);
        });
    </script>
</body>
</html>


2.左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</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">标题1</div>
            <div id="i1" class="content">内容</div>
        </div>
        <div class="item">
            <div class="header">标题2</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题3</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="../jquery/jquery-1.12.4.js"></script>
    <script>
        $(".header").click(function () {
            $(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide");
        });
    </script>
</body>
</html>


3.模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-top: -250px;
            margin-left: -250px;
            background-color: #dddddd;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.6;
            background-color: #000000;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a id="a1">添加</a>
    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input type="text" name="hostname"/>
            <input type="text" name="port"/>
        </div>
        <div>
            <input type="button" value="确定">
            <input type="button" value="取消">
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="../jquery/jquery-1.12.4.js"></script>
    <script>
        $("#a1").click(function () {
            $(".modal").removeClass("hide");
            $(".shadow").removeClass("hide");
        });
        $(".modal input[value=‘取消‘]").click(function () {
            $(".modal, .shadow").addClass("hide");
            $(".modal input[type=‘text‘]").val("");
        });
        $(".del").click(function () {
            $(this).parent().parent().remove();
        });
        $(".edit").click(function () {
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                var n = $(this).attr("target");
                var text = $(this).text();
                var a1 = ‘.modal input[name="‘;
                var a2 = ‘"]‘;
                var temp = a1 + n + a2;
                $(temp).val(text);
            });
            $(".modal").removeClass("hide");
            $(".shadow").removeClass("hide");
        });
    </script>
</body>
</html>


4.tab切换菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .menu{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .hide{
            display: none;
        }
        .active{
            background-color: brown;
        }
    </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/jquery-1.12.4.js"></script>
    <script>
        $(".menu-item").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var v = $(this).index();
            $(".content").children().eq(v).removeClass("hide").siblings().addClass("hide");
        });
    </script>
</body>
</html>


5.点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            width: 30px;
            position: relative;
        }
    </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) {
            // DOM对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;
            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 += 5;
                top -= 5;
                right -= 5;
                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>


6.表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <form id="f1" action="http://127.0.0.1" 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>
//        $(":submit").click(function () {
//            var v = $(this).prev().val();
//            if(v.length > 0){
//                return true;
//            }else{
//                alert("请输入内容");
//                return false;
//            }
//        });
        $(":submit").click(function () {
            $(".error").remove();

            var flag = true;
            $("#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.className = "error";
                    tag.innerHTML = "必填";
                    $(this).after(tag);
//                    return false;
                }
            });
            return flag;
        });
    </script>
</body>
</html>


本文出自 “八英里” 博客，请务必保留此出处http://5921271.blog.51cto.com/5911271/1924148

以上是关于Python之路56-jQuery的主要内容，如果未能解决你的问题，请参考以下文章

《Python学习之路 -- Python基础之切片》

[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段

python成长之路第三篇_正则表达式

python成长之路第三篇_正则表达式

机器学习之路： python 实践 word2vec 词向量技术

常用python日期日志获取内容循环的代码片段