使用jQuery获得内容以及内容的属性


Posted in Javascript onFebruary 26, 2015
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

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

    </head>

<style>

body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}

    .box{

        width: 300px;

        height: 300px;

        background: green;

        border: 1px solid #e6e6e6;

        line-height: 200px;

        position: absolute;

    }

button{

    border: none;

    background: green;    

    width: 125px;

    height: 50px;

    line-height: 50px;

    color: #fff;

    font-size: 16px;

    margin-top: 50px;

    font-family: "微软雅黑";

    }

</style>

    <body>

        <button id="btn1">显示text</button>

        <button id="btn2">显示html</button>

        <button id="btn3">显示输入内容</button>

        <p id="text">这是要显示<b>粗体</b>的节奏</p>

        <br />

        <input id="input" value="买房子"> 

        <script>

            $(document).ready(function(){

                $("#btn1").click(function(){

                    alert("Text: " + $("#text").text());

                });

                $("#btn2").click(function(){

                    alert("HTML: " + $("#text").html());

                });

                $("#btn3").click(function(){

                    alert("Value: " +$("#input").val());

                });

            });

        </script>

    </body>

</html>

Tips:

1、点击事件节点的选择 #botton

2、alert 的代码规则  ("Value: " + $("#id").html)

今天的分享就先到这里了,后续我们还将持续更新一些新的jQuery实例。

Javascript 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
vue-ajax小封装实例
Sep 18 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 #Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 #Javascript
2则自己编写的jQuery特效分享
Feb 26 #Javascript
javascript制作网页图片上实现下雨效果
Feb 26 #Javascript
js实现格式化金额,字符,时间的方法
Feb 26 #Javascript
如何减少浏览器的reflow和repaint
Feb 26 #Javascript
详谈javascript中DOM的基本属性
Feb 26 #Javascript
You might like
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python中enumerate函数代码解析
2017/10/31 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
python实现剪切功能
2019/01/23 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Linux常见面试题
2016/10/04 面试题
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
入党函调证明材料
2014/12/24 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书