Python菜鸟之路：JQuery基础

前言

　　JQuery可以理解为是一个模块，里边封装了DOM以及JavaScript，可以方便的对JQuery对象进行操作。

版本

　　尽量选择1.X系统的Jquery版本，例如1.12.jquery.js。因为1.X系列的兼容性最好。

　　2.X系列的版本，不再考虑兼容IE9以下的版本。

JQuery操作

　　Ps：具体操作参考链接：http://www.php100.com/manual/jquery/index.html。本文不会有太多举例，仅作小结。

查找-选择器

　　JQuery的选择器常用的有以下几种：

            - ID选择器
            - 标签选择器
            - 类选择器
            - 组合选择器
            - 层级选择器
            - 基本筛选器$('#i1:first')
            - 属性选择器

查找-筛选器

　　筛选器其实是对于选择器的一个补充，用来进一步筛选对象

操作

操作CSS

addClass(class|fn)
removeClass([class|fn])
toggleClass(class|fn[,sw])

操作属性

attr(name|pro|key,val|fn)
removeAttr(name)
prop(n|p|k,v|f)
removeProp(name)

文本操作

内部插入
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]])

事件

1. 基本事件

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])

2. 当文档加载完毕后，自动执行

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

3. 延迟绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>

    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title" >菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>

        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            // 当文档树加载完毕后，自动执行
            $('.item .title').click(function(){
                // this,$(this)
                $(this).next().removeClass('hide');
                $(this).parent().siblings().find('.body').addClass('hide');
            });
        });


        /*
        $('.item .title').bind('focus', function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.body').addClass('hide');
        })
        */
    </script>
</body>
</html>

事先绑定