使用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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
javascript 实现map集合
Apr 03 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
js微信分享实现代码
Oct 11 Javascript
vue 文件目录结构详解
Nov 24 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
深入了解query和params的使用区别
Jun 24 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的QRcode类与大家分享
2011/11/13 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
详解jQuery事件
2017/01/13 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Pandas标记删除重复记录的方法
2018/04/08 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python如何重新加载模块
2020/07/29 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
导师评语大全
2014/04/26 职场文书
关于读书的活动方案
2014/08/14 职场文书
公司地址变更通知
2015/04/25 职场文书
2015年教研组工作总结
2015/05/04 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
html5调用摄像头实例代码
2021/06/28 HTML / CSS
js不常见操作运算符总结
2021/11/20 Javascript
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL