python基础6-web之jQuery

1.jQuery官网

　　1.x　　　最新 jquery-1.12.4.js

　　2.x

　　3.x

2.jQuery API中文文档 | jQuery API 中文在线手册

  

3.如下示例使用的jquery均为jquery-1.12.4.js

 

4.

 

一、查找元素

dom

jQuery：

选择器：直接找到某个或某类标签

1.id　　　　     $('#id')

2.class　　　　$('.c1')

3.标签　　　　 $('a')

 

5.dom与jQuery的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>
    <div id="i1">盒子1</div>

    <script src="jquery-1.12.4.js">
    </script>
</body>
</html>

　　

 二、操作元素

5.层级

 

$('#10 a')  子子孙孙
$('#10>a')  只找儿子
+   下一个
~  兄弟标签

　　

6..基本筛选器

 

:first  	找到第一个标签
:not(selector)  除括号内的其他所有标签
:even     	奇数
:odd      	偶数
:last
:eq(index)  	指定索引
:gt(index)
:lt(index)
:(lang)     	语言
:header
:animated   	正在执行动画的
:focus      	获取焦点的

　　

7.属性

 

[attribute]     		@
[attribute=value]       	@
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

子元素     			@先忽略

表单      			@就是简写，可以不会
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file


表单对象属性
:enabled        		@默认就是
:disabled       		@不可编辑的
:checked
:selected

　　

8.筛选

 

过滤

eq(index|-index)    		@   $("li :eq(1)")  选择器里面是字符串，而$("li").eq(1)    对象的eq方法
first()
last()
hasClass(class)     		@是否具有这个样式
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
map(callback)
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])

查找
children([expr])            	@所有的孩子
closest(e|o|e)1.7*
find(e|o|e)1.6*             	@子子孙孙中查找
next([expr])                	@下一个
nextAll([expr])             	@下面所有
nextUntil([e|e][,f])1.6*    	@找到往下指定位置，且不包含指定位置
offsetParent()
parent([expr])              	@父
parents([expr])             	@从父标签一直找到html标签
parentsUntil([e|e][,f])1.6* 	@
prev([expr])                	@上一个
prevall([expr])             	@
prevUntil([e|e][,f])1.6*    	@
siblings([expr])            	@兄弟

串联
add(e|e|h|o[,c])
andSelf()
addBack()1.9+
contents()
end()

CSS 类
addClass(class|fn)      	@内置循环
removeClass([class|fn])     	@内置循环
toggleClass(class|fn[,sw])

　　

9.文本操作

 

dom的文本
tag = document.getElementById('i1')
<div id=​"i1">​asdf​</div>​
tag.innerText
"asdf"
tag.innerHTML
"asdf"
tag.innerHTML = "<a>http://www.baidu.com</a>"
"<a>http://www.baidu.com</a>"

jQuery的文本
$('#i1').html()
"asdf"
$('#i1').text()                                 @获取文本内容
"asdf"
$('#i1').text("<a>http://www.baidu.com</a>")    @设置文本内容
jQuery.fn.init [div#i1, context: document, selector: "#i1"]
$('#i1').html("<a>http://www.baidu.com</a>")
jQuery.fn.init [div#i1, context: document, selector: "#i1"]


val()方法

tag = document.getElementById('i2')
<input id=​"i2" type=​"text">​
tag.value
""
tag.value = "我是谁"
"我是谁"

$('#i2').val()
"我是谁"

$('#i2').val("what's that?")
jQuery.fn.init [input#i2, context: document, selector: "#i2"]

　　

10.样式操作

 

addClass()
removeClass()
toggleClass()            //如下示例之开关

　　

11.属性操作

$(..).attr()
$(..).prop()

attr用于做自定义属性
$("#i1")
jQuery.fn.init [input#i1, context: document, selector: "#i1"]
$("#i1")[0]
<input id=​"i1" type=​"button" value=​"开关">​

获取属性
$("#i1").attr("type")
"button"
$("#i1").attr("id")
"i1"
$("#i1").attr("value")
"开关"

添加属性
$("#i1").attr("name","alex")
jQuery.fn.init [input#i1, context: document, selector: "#i1"]
$("#i1")[0]
<input id=​"i1" type=​"button" value=​"开关" name=​"alex">​

删除属性
$("#i1").removeAttr("name")
jQuery.fn.init [input#i1, context: document, selector: "#i1"]
$("#i1")[0]
<input id=​"i1" type=​"button" value=​"开关">​

prop用于checkbox,radio
$("#i1").prop("checked",true)
jQuery.fn.init [input#i1, context: document, selector: "#i1"]
$("#i1").prop("checked",false)
jQuery.fn.init [input#i1, context: document, selector: "#i1"]

　　

 

示例之全选、多选、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll();" />
    <input type="button" value="反选" onclick="reverseAll();" />
    <input type="button" value="取消" onclick="cancleAll();" />
    <table id='tb' border="1px">
        <thead>
            <tr>
                <th>选项</th>
                <th>账号</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1</td>
                <td>1.@163.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>2.@163.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>3</td>
                <td>3.@163.com</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>4</td>
                <td>4.@163.com</td>
            </tr>
        </tbody>

    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll(){
            $('table :checkbox').prop("checked",true);
        }
        function cancleAll(){
            $('table :checkbox').prop("checked",false);
        }
        function reverseAll() {
            $('table :checkbox').each(function(){
                //this代指当前循环的每一个元素
//                if(this.checked){
//                    this.checked=false;
//                }else{
//                    this.checked=true;
//                }
                //第二种
//                if($(this).prop("checked")){
//                    this.prop("checked",false);
//                }else{
//                    this.prop("checked",true);
//                }
                //第三种，三元运算
                var v = $(this).prop("checked")?false:true;
                $(this).prop("checked",v);
            })
        }
    </script>
</body>
</html>
全选、反选、取消

 ps:

$('#tb:checkbox').prop('checked')   获取值
$('#tb:checkbox').prop('checked',true)  设置值

jQuery方法内置循环：$('#tb:checkbox').each

$('#tb:checkbox').each(function(k){
    //k当前索引
    //this,dom类型    当前循环的元素     $(this)
})

var v = 条件？真值：假值

　　

示例之左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color:black;
            color:wheat;
        }
        .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(){
//            $(this).next().removeClass('hide');
//            $(this).parent().siblings().find('.content').addClass('hide');
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>
</html>
左侧菜单

 ps:

//链式编程
$(...).click(function(){
    this.
})
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');

$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');

　　

示例之模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .modal{
            position:fixed;
            top:50%;
            left:50%;
            width:500px;
            height:400px;
            margin-left:-250px;
            margin-top:-250px;
            background-color:#eeeeee;
            z-index:10;
        }
        .shadow{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            opacity:0.5;
            background-color:black;
            z-index:9;
        }

    </style>
</head>
<body>
    <a onclick="addEle();">添加</a>

    <table border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>选项</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td name="hostname">张三</td>
            <td name="port">zhangsan@163.com</td>
            <td>
                <a class="edit">编辑</a>|
                <a>删除</a>
            </td>
        </tr>
        <tr>
            <td name="hostname">李四</td>
            <td name="port">lisi@163.com</td>
            <td>
                <a class="edit">编辑</a>|
                <a>删除</a>
            </td>
        </tr>
        <tr>
            <td name="hostname">王五</td>
            <td name="port">wangwu@163.com</td>
            <td>
                <a class="edit">编辑</a>|
                <a>删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="modal hide">
        <input type="text" name="hostname" />
        <input type="text" name="port"/>
        <input type="button" value="取消" onclick="cancelModal();" />
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function  addEle() {
            $('.modal,.shadow').removeClass('hide');
        }
        function  cancelModal() {
            $('.modal,.shadow').addClass('hide');
            $('.modal input[type="text"]').val("");
            //防止每次添加的时候，默认会出现上次编辑时获取到的值
        }
        $('.edit').click(function(){
            $(".modal,.shadow").removeClass("hide");
            var tds = $(this).parent().prevAll();

            tds.each(function () {
                //获取td的name属性值
                var n = $(this).attr("name");
                //获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });

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

        })
    </script>
</body>
</html>
模态框

示例之一个按钮实现开关的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .c1{
            width:500px;
            height:300px;
            background-color:red;
            color:white;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="开关">
    <div class="c1 hide">红色背景，白色字体</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1").click(function () {
//            if( $(".c1").hasClass("hide") ){
//                $(".c1").removeClass("hide");
//            }else{
//                $(".c1").addClass("hide");
//            }
            $(".c1").toggleClass("hide");
            //toggleClass  一行实现上面功能
        })
    </script>
</body>
</html>
开关

示例之点击标题对应的内容显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header-bottom{
            margin:0 auto;
            width:700px;
        }
        .hide{
            display:none;
        }
        .menu{
            height:38px;
            background-color:#eeeeee;
            line-height:38px;
        }
        .active{
            background-color:brown;
        }
        .menu .menu-item{
            float:left;
            border-right:1px solid red;
            padding:0 10px;
            cursor:pointer;
        }
        .content{
            min-height:100px;
            border:1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div class="header-bottom">
        <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");
            var target = $(this).attr('a');
            $(".content").children("[b='" + target + "']").removeClass("hide").siblings().addClass("hide");
        })
    </script>
</body>
</html>
标题对应内容

示例之点击标题对应的内容显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header-bottom{
            margin:0 auto;
            width:700px;
        }
        .hide{
            display:none;
        }
        .menu{
            height:38px;
            background-color:#eeeeee;
            line-height:38px;
        }
        .active{
            background-color:brown;
        }
        .menu .menu-item{
            float:left;
            border-right:1px solid red;
            padding:0 10px;
            cursor:pointer;
        }
        .content{
            min-height:100px;
            border:1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div class="header-bottom">
        <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");
//            var v = $(this).index();
//            $(".content").children().eq(v).removeClass("hide").siblings().addClass("hide");
            $(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide");
        })
    </script>
</body>
</html>
标题对应内容-2

ps:　　index()　　获取索引位置

12.文档处理

内部插入
append(content|fn)          @
appendTo(content)
prepend(content|fn)         @
prependTo(content)
外部插入
after(content|fn)           @
before(content|fn)          @
insertAfter(content)
insertBefore(content)
包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
替换
replaceWith(content|fn)
replaceAll(selector)
删除
empty()                     @仅清除文本，标签还在
remove([expr])              @文本标签一起清除
detach([expr])
复制
clone([Even[,deepEven]])    @复制一份

　　

示例之添加无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text"  />
    <input id="li1" type="button" value="下方添加li" />
    <input id="li2" type="button" value="上方添加li" />
    <input id="ul1" type="button" value="下方添加ul" />
    <input id="ul2" type="button" value="上方添加ul" />
    <input id="li3" type="button" value="按索引仅删除li内容" />
    <input id="li4" type="button" value="按索引删除li标签及内容" />
    <input id="li5" type="button" value="按索引复制" />
    <ul id="u1">
        <li>列表1</li>
        <li>列表2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#li1').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").append(temp);
        });
        $('#li2').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").prepend(temp);
        });
        $('#ul1').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").after(temp);
        });
        $('#ul2').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").before(temp);
        });
        $('#li3').click(function () {
            var index = $("#t1").val();
            $('#u1 li').eq(index).empty();
        });
        $('#li4').click(function () {
            var index = $("#t1").val();
            $('#u1 li').eq(index).remove();
        });
        $('#li5').click(function () {
            var index = $("#t1").val();
            var v = $('#u1 li').eq(index).clone();
            $('#u1').append(v);
        });
    </script>
</body>
</html>
添加无序列表

 

13.CSS处理

CSS
css(name|pro|[,val|fn])1.9*
$('t1').css('样式名称','样式的值')
jQuery.cssHooks
位置
offset([coordinates])       @指定标签在html中的坐标
offset().left
offset().right
position()
scrollTop([val])
$(window).scrollTop()           获取
$(window).scrollTop(0)          设置
$('div').scrollTop()           获取
$('div').scrollTop(0)          设置
scrollLeft([val])
尺寸
height([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])

　　

示例之点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding:50px;
            border:1px solid #dddddd;
        }
        .item{
            position:relative;
            width:40px;
            height:100px;
        }
    </style>
</head>
<body>
    <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 right = 0;
            var top = 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('right',right + "px");
            $(tag).css('top',top + "px");
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 3;
                right = right - 5;
                top = top - 5;
                opacity = opacity - 0.1;
                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + "px");
                $(tag).css('opacity',opacity);
                if(opacity <0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            },100);
        }
    </script>
</body>
</html>
点赞

示例之位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float:left;
        }
        .c1{
            width: 100px;
            height:200px;
            overflow:scroll;
        }
        .c2{
            margin-left:400px;
        }
        .c2 p{
            height:300px;
        }
    </style>
</head>
<body>
    <div class="c1 left">
        <p>我是谁1我是谁1</p>
        <p>我是谁2我是谁1</p>
        <p>我是谁3我是谁1</p>
        <p>我是谁4我是谁1</p>
        <p>我是谁5我是谁1</p>
        <p>我是谁6我是谁1</p>

    </div>
    <div class="c2 left">
        <p>我是谁1</p>
        <p>我是谁2</p>
        <p>我是谁3</p>
        <p>我是谁4</p>

    </div>

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

    </script>
</body>
</html>
位置
//指定标签相对父标签[relative]标签的坐标
<div style="positon:relative">
    <div>
        <div id="i1" style="position:absolute;height:80px;border:1px"></div>
    </div>
</div>
View Code

 

 练习对比

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

#纯高度，边框，外边距，内边距
View Code

 

14.事件

jQuery的四种绑定方式

$('.c1').click()
$('.c1')...

$('c1').bind('click',function(){
})
$('c1').unbind('click',function(){
})

$('.c1').on('click',function(){
})
$('.c1').off('click',function(){
})

===============delegate与上面不同，绑定事件，是在点击的时候才绑定，所以新添加的标签也可以使用事件=====

$('.c').delegate('a','click',function(){
})
$('.c').undelegate('a','click',function(){
})

　　

示例之jQuery四种绑定方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text"  />
    <input id="li1" type="button" value="下方添加li" />
    <input id="li2" type="button" value="上方添加li" />
    <input id="ul1" type="button" value="下方添加ul" />
    <input id="ul2" type="button" value="上方添加ul" />
    <input id="li3" type="button" value="按索引仅删除li内容" />
    <input id="li4" type="button" value="按索引删除li标签及内容" />
    <input id="li5" type="button" value="按索引复制" />
    <ul id="u1">
        <li>列表1</li>
        <li>列表2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#li1').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").append(temp);
        });
        $('#li2').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").prepend(temp);
        });
        $('#ul1').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").after(temp);
        });
        $('#ul2').click(function () {
            var v = $("#t1").val();
            var temp="<li>" + v + "</li>";
            $("#u1").before(temp);
        });
        $('#li3').click(function () {
            var index = $("#t1").val();
            $('#u1 li').eq(index).empty();
        });
        $('#li4').click(function () {
            var index = $("#t1").val();
            $('#u1 li').eq(index).remove();
        });
        $('#li5').click(function () {
            var index = $("#t1").val();
            var v = $('#u1 li').eq(index).clone();
            $('#u1').append(v);
        });

//        $("ul li").click(function () {
//            var v = $(this).text();
//            alert(v);
//
//        });
//        $('ul li').on('click',function(){
//            var v = $(this).text();
//            alert(v);
//        });
//        $('ul li').bind('click',function(){
//            var v = $(this).text();
//            alert(v);
//        });
        $('ul').delegate('li','click',function(){
            var v = $(this).text();
            alert(v);
        })
    </script>
</body>
</html>
View Code

 

阻止事件的发生：return false

dom示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onClick="return onClick();"href="http://www.baidu.com">百度一下</a>

    <script>
        function onClick() {
            alert("百度一下");
//            return true;    //弹窗后跳转
            return false;   //弹窗后不跳转，即阻止事件的发生
        }
    </script>
</body>
</html>
View Code

jQuery示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a id="i1" href="http://www.baidu.com">百度一下</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            alert("百度一下")
            return false;
        })
    </script>
</body>
</html>
View Code

空值不予提交并弹窗提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="s1.py" >
        <input type="text" />
        <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;   //空值不给跳转
            }
        })
    </script>
</body>
</html>
View Code

输入均不为空才允许提交后台，否则直接由前端拒绝，而且出现红色字体提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
    <form id="f1" action="s24.html" method="POST">
        <div><input tex="用户名" type="text" name="n1" /></div>
        <div><input tex="密码" type="password" name="n2" /></div>
        <div><input tex="邮箱" type="text" name="n3" /></div>
        <div><input tex="手机号" type="text" name="n4" /></div>
        <div><input tex="地址" type="text" name="n5" /></div>
        <div><input type="submit" value="提交" /></div>
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(":submit").click(function () {
            $('.error').remove();
            var flag=true;
            $("#f1").find(":text,:password").each(function () {
                var v = $(this).val();
                var n = $(this).attr("tex");
                if(v.length <= 0){
                    var tag = document.createElement("span");
                    tag.className = "error";
                    tag.innerHTML = n + "必填";
                    $(this).after(tag);
                    flag=false;

                }
            });
            return flag;
        })
    </script>
</body>
</html>
View Code

 

 

15.页面框架加载完成后，自动执行（如：图片还未加载完毕，不影响其他的效果，正常执行，提高效率）

 

$(function(){
    $(...)
})

　　

 

16.jQuery扩展

　　-　　$.extend　　　　$.方法名

　　-　　$.fn.extend　　　$(选择器).方法

$.extend({
    "方法名":function(){
        函数体;
    }
});

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js">
    </script>
    <script>
        $.extend({
            "larlly":function () {
                return "厉害了！"
            }
        });
        var v = $.larlly();
//        alert(v);
        $.fn.extend({
            "lly":function () {
                return "且听风吟"
            }
        });
        var v1 = $("#i1").lly();
        alert(v1);
    </script>
</body>
</html>
View Code

 

17.登录注册验证

1）默认事件先执行

　　checkbox

2）自定义事件先执行

　　a,submit...

<form>
    <input type="text" />
    <input type="password" />
    <input type="submit" />
</form>
$(":submit").click(function(){
    $(":text,:password").each(function(){
        ...
        return false;
    })
    return false;
})
View Code

 

18.组件

1）Bootstrap

　　- css

　　- js

需要学习Bootstrap规则

 

A.响应式

@media

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:red;
            height:50px;
        }
        /*宽度不低于900px的情况下，才使用如下样式c2*/
        @media (min-width: 900px){
            .c2{
                background-color:grey;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>
</html>
View Code

 

B.图标、字体

@font-face

点赞的手

<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-3.3.7/dist/css/bootstrap-theme.css" rel="stylesheet">
    <style>
        .body{
            background-color:#dddddd;
        }
        /*去掉标题的圆角*/
        .no-radius{
            border-radius:0 !important;
        }
    </style>
</head>
<body class="body">
    <nav class="navbar navbar-default no-radius">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
    <span class="glyphicon glyphicon-thumbs-up " aria-hidden="true"></span>
    <script src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <script src="bootstrap-3.3.7/dist/js/npm.js"></script>
</body>
</html>
View Code

 

C.基本使用

去掉标题的圆角，加　　!important　　表示自己的样式优先级最高

    <style>
        .no-radius{
            border-radius:0 !important;
        }
    </style>

　　

2）jQueryUI　　后台管理

　　- css

　　- js

需要学习jQueryUI规则

3）EasyUI　　   后台管理　　，会有Ajax操作

　　- css

　　- js

需要学习jQueryUI规则

 

 

 

 

 

 

19.

 

19.

 

20.

 

posted @ 2018-02-03 18:31  larlly  阅读(237)  评论(0)    收藏  举报