使用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 相关文章推荐
自定义jQuery选项卡插件实例
Mar 27 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 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
php中常用编辑器推荐
2007/01/02 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
使用Python绘制图表大全总结
2017/02/11 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
SQL语言面试题
2013/08/27 面试题
计算机专业推荐信范文
2013/11/27 职场文书
生产副总岗位职责
2013/11/28 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL