文档章节

jQuery 学习笔记 一 初体验

东湖畔新家
 东湖畔新家
发布于 2017/05/09 18:53
字数 374
阅读 1
收藏 0

 

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
 

 

<style type="text/css">
        .unselect{
            color: #2524ff;
            font-size: 20px;
        }
        .selected{
            color: #f54958;
            font-size: 25px;
        }
        .highlight{
            background-color: #6caeee;
        }
</style>
<div id="divMsg">Hello Word !</div>
    <input id="btnShow" type="button" value="显示"/>
    <input id="btmHide" type="button" value="隐藏" />
    <input id="btnChange" type="button" value="修改内容为  Hello Word, too !">

    <form>
        <input name="check1" type="checkbox" value="an"/>
        <input name="check2" type="checkbox" value="an"/>
        <input type="button" value="ab" />
        <input type="radio" value="ac" />
        <input type="text" value="aa">

        <p> aa</p>
        <p> ba</p>
        <p >
            <span> aa</span>
        </p>
    </form>

    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <h1>h1</h1>
    <h2>h2</h2>

    <table>
        <tr>
            <td name="cc">aa</td><td>bb</td><td><ol>p</ol></td>
        </tr>
        <tr>
            <td name="cc" id="cc">cc</td><td></td>  <td></td>
        </tr>
    </table>

    <img name="imgs" />
    <div>
        <span> aa</span>
    </div>

 

/* 此示例使用了:
         * (1) jQuery的Id选择器: $("#btnShow")
         * (2) 事件绑定函数 bind()
         * (3) 显示和隐藏函数. show()和hide()
         * (4) 修改元素内部html的函数html()
         */
        $("#btnShow").bind("click",function(event){$("#divMsg").show();});
        $("#btmHide").bind("click",function(event){$("#divMsg").hide();});
        $("#btnChange").bind("click",function(event){$("#divMsg").html("Hello Word ,too !");});

        //创建 DOM 添加到现有的 DIV上
        $("<div id='testDiv' style='border: solid 1px #ff1e37'>动态创建DIV</div> ").appendTo($("#divMsg"));

        //获取匹配的第二个元素 eq 函数 ;  gt 匹配所有大于给定索引值的元素; lt 选择结果集中索引小于 N 的 elements
        $("div:eq(1)").toggleClass("selected");

        //保留子元素中不含有ol的元素      filter 过滤器
        $("div").filter(function(index){  return $("ol",this).size() == 0;  });

        //由于input元素的父元素是一个表单元素,所以返回true       is函数
        logs( $("input[type='checkbox']").parent().is("form") )   ;
 

 

本文转载自:http://blog.csdn.net/sblig/article/details/24670167

东湖畔新家
粉丝 1
博文 170
码字总数 31582
作品 0
杭州
后端工程师
私信 提问
分享26本关于Jquery的学习书籍(免费下载)

分享26本关于Jquery的学习书籍(免费下载) 1、精通JavaScript+jQuery 2、网友small6分享锋利的jQuery实例源码 3、网友small6分享jQuery权威指南配套源代码 4、犀利开发jQuery内核详解与实践...

邓剑彬
2012/11/30
3.3K
8
从零玩转jQuery-初识jQuery

课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQu...

极客江南
2018/04/20
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
2018/06/18
0
0
seajs初尝 加载jquery返回null解决学习日志

今天早上初尝seajs,发现一个非常蛋疼的事情,使用官方demo中的jquery是没有问题, 下载官方最新版jquery 2.1.1发现console.log($)返回null,百思不得其解!只能求助度娘! 在GitHub发现了玉...

尐桀
2014/10/31
0
1
五种方法解决Magento中jQuery和Prototype兼容性

Magento的发布版本里的JS大多是用Prototype写的,如果需要引入jQuery的话,可能有些变量会冲突,所以需要做些处理来处理jQuery和Prototype的兼容性。 第一种情况:先加载Prototype,再加载j...

PHPUI
2012/04/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Disable Autostart of MySQL Server on Ubuntu

OSC Markdown Editer 真香,笔记,懒得转中文,有表述问题,请不吝指出,先谢为敬! OS: Ubuntu 19.04 When the MySQL server is installed, it automatically started with the OS. It slow......

Iridium
1分钟前
0
0
OpenStack RDO + S3

Packstack(RDO) installation "sync db timeout" issue version: openstack-packstack-13.0.0-0.1.0rc1.el7.noarchopenstack-packstack-puppet-13.0.0-0.1.0rc1.el7.noarch add timeout =>......

Firxiao
4分钟前
0
0
java运算符的优先级

https://www.cnblogs.com/zjfjava/p/5996666.html

南桥北木
9分钟前
0
0
线性代数的静态观-向量空间(一)

向量是一个具有大小和方向的量,因此只要大小与方向相同则向量也相同,从而向量可以自由平行移动。 向量与点不同,它反映的是从A到B的位移(既包含位移的方向又包含位移的大小),而点仅仅是...

FAT_mt
10分钟前
0
0
Redis缓存穿透、缓存雪崩和缓存击穿

Redis缓存穿透、缓存雪崩 缓存雪崩,是指在某一个时间段,缓存集中过期失效。 产生雪崩的原因之一,比如在写本文的时候,马上就要到双十二零点,很快就会迎来一波抢购,这波商品时间比较集中...

architect刘源源
31分钟前
10
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部