使用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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
学习Vue组件实例
Apr 28 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
js实现无缝轮播图
Mar 09 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
小程序实现分类页
2019/07/12 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
宿舍违规检讨书
2014/01/12 职场文书
升旗仪式主持词
2014/03/19 职场文书
高中教师考核方案
2014/05/18 职场文书
旅游节目策划方案
2014/05/26 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
flex弹性布局详解
2022/03/20 HTML / CSS
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL