使用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 $.getJSON()跨域请求
Dec 21 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
JS实现网页时钟特效
Mar 25 Javascript
js仿淘宝放大镜效果
Dec 28 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
保护黄河倡议书
2014/05/16 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
本溪水洞导游词
2015/02/11 职场文书
大学生个人总结范文
2015/02/15 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
KVM基础命令详解
2022/04/30 Servers