使用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 相关文章推荐
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
详解redux异步操作实践
Aug 15 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
Vue触发input选取文件点击事件操作
Aug 07 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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中define用法实例
2015/07/30 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python实现上传下载文件功能
2020/11/19 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
C#笔试题和英文面试题
2013/02/07 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
法务专员岗位职责
2014/01/02 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
五四演讲稿范文
2014/09/03 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
政工师工作总结2015
2015/05/26 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python