使用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 连续列表实现代码
Dec 21 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php 中英文语言转换类
2011/09/07 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python导入坐标点的具体操作
2019/05/10 Python
python画微信表情符的实例代码
2019/10/09 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
销售文员的岗位职责
2013/11/20 职场文书
临床护理求职信
2014/04/26 职场文书
英语系本科生求职信
2014/07/15 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
财产分割协议书范本
2014/11/03 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
2015年计划生育责任书
2015/05/08 职场文书
法制主题班会教案
2015/08/13 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书