使用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 ul标签下拉菜单演示代码
Dec 11 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
js+html制作简单验证码
2017/02/16 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
python批量爬取下载抖音视频
2019/06/17 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
详解python logging日志传输
2020/07/01 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
公司节能减排倡议书
2014/05/14 职场文书
80后婚前协议书范本
2014/10/24 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL