使用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 相关文章推荐
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php查询ip所在地的方法
2014/12/05 PHP
php经典算法集锦
2015/11/14 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
详解JS函数防抖
2020/06/05 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python 打印中文字符的三种方法
2018/08/14 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
保卫钓鱼岛口号
2014/06/20 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
农行心得体会
2014/09/02 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
廉政承诺书范文
2015/04/28 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
python实现简单倒计时功能
2021/04/21 Python
golang 如何用反射reflect操作结构体
2021/04/28 Golang