zoukankan      html  css  js  c++  java
  • jQuery知识点总结(一)

    jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

    一、jQuery介绍
    $(document).ready(function(){})
    类似window.onload 等待dom文件加载完开始执行
    区别:window.onload只能执行一次,$(document).ready():可以执行多次

    JavaScript脚本语言也可以放在jQuery容器内使用

    jQuery的优点:
    简洁的写法,write less,do more,即写的更少,实现的功能更多

    二、jQuery语法
    jQuery的基本语法
    $(document).ready(function(){
    $(选择器).事件(function(){
    $(选择器).效果(参数); //效果(参数,[callback]),callback:回调函数function(){}
    })
    })

    三、jQuery的效果
    css({属性:"值",属性:"值",...}):css样式
    show(speed,[callback]):隐藏显示 speed:fast,slow,normal,1000
    hide(speed,[callback]):显示隐藏
    toggle(speed,[callback]):切换
    slideToggle(speed,[callback]):上下滑动,实现切换
    slideUp(speed,[callback]):向上滑动
    slideDown(speed,[callback]):向下滑动
    addClass('类名称'):为选择器添加css样式类 类名不加‘.’
    removeClass('类名称'):为元素去掉css样式类
    fadeIn(speed,[callback]):淡入
    fadeOut(speed,[callback]):淡出
    fadeTo(speed,opacity,[callback]):变淡指定效果
    animate({params},duration,easing,[callback]):动画
    params:变化后的css样式 {height:300}
    duration:变化速度用毫秒
    easing:变化效果名称,用插件

    获取元素内的html内容:$(选择器).html();
    给指定元素设置html内容:$(选择器).html('内容');
    获取元素内的文本内容:$(选择器).text();
    设置元素内的文本:$(选择器).text('文本');

    html和text的区别:
    html:选择器里面的的所有元素
    text:文本内容,不包括标签

    四、jQuery选择器
    基本选择器:
    标记选择器:$('tagName')
    类选择器:$('.className')
    ID选择器:$("#id")
    *选择器:$('*');所有的元素
    多个选择器:$('div,p,ul')
    层次选择器:
    后代选择器:$('ul li a')所有的子元素(子,孙,子子孙孙)
    子代选择器:$('ul>li')只有子代元素(子)
    prev+next:$('li+li')或$(选择器).next(); 同辈中的下一个
    prev`sibling:$('li`li')或$(选择器).sibling(); 同辈,不包括自己

    五、jQuery元素的查找与筛选
    eq(index):指定第N个元素,从0开始算
    first():第一个元素
    last():最后一个元素
    find():查找所有与指定元素匹配的后代元素
    children(参数):子元素 //加参数就是第几个子元素,不加就是所有
    parent():父元素
    siblings():出自己以外的同辈元素

      选项卡案例:

    
    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            dl,dt,dd,ul,li,div{margin:0;padding:0;list-style:none;display: block;}
            .box{320px;border:1px solid #ccc;margin:50px auto;height:340px;}
            .box dt{height:30px;border-bottom: solid 1px #ccc;}
            .box dt ul li{80px;line-height:30px;text-align: center;background:#eee;float: left;}
            .box dt ul li.cli{background:#333;color:#fff;}
            .box dd div{320px;height:300px;line-height:320px;text-align:center;font-size:40px;display: none;}
        </style>
        <script src="js/jquery1.9.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".box dt ul li").click(function(){
                    $(this).addClass("cli").siblings().removeClass("cli");
                    var $k=$(".box dt ul li").index(this);
                    $(".box dd div").eq($k).css({display:"block"}).siblings().css({display:"none"});
                })
            })
        </script>
    </head>
    <body>
    <dl class="box">
        <dt>
            <ul>
                <li class="cli">新闻</li>
                <li>电影</li>
                <li>娱乐</li>
                <li>体育</li>
            </ul>
        </dt>
        <dd>
            <div style="display: block;">新闻</div>
            <div>电影</div>
            <div>娱乐</div>
            <div>体育</div>
        </dd>
    </dl>
    </body>
    </html>
  • 相关阅读:
    According to TLD or attribute directive in tag file, attribute end does not accept any expressions
    Several ports (8080, 8009) required by Tomcat v6.0 Server at localhost are already in use.
    sql注入漏洞
    Servlet—简单的管理系统
    ServletContext与网站计数器
    VS2010+ICE3.5运行官方demo报错----std::bad_alloc
    java 使用相对路径读取文件
    shell编程 if 注意事项
    Ubuntu12.04下eclipse提示框黑色背景色的修改方法
    解决Ubuntu环境变量错误导致无法正常登录
  • 原文地址:https://www.cnblogs.com/wangqiniqn/p/6270971.html
Copyright © 2011-2022 走看看