使用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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JavaScript switch语句使用方法简介
Dec 30 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多线程下载远程多个文件
2013/06/25 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Django Form常用功能及代码示例
2020/10/13 Python
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
完美的中文自荐信
2014/05/24 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
高一地理教学工作总结
2015/08/12 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
二年级数学教学反思
2016/02/16 职场文书