使用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 相关文章推荐
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
vue打包后显示空白正确处理方法
Nov 01 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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动态生成虚拟现实VRML网页
2006/10/09 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python模拟登录验证码(代码简单)
2016/02/06 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Java基础面试题
2014/07/19 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
仙境之桥观后感
2015/06/16 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP