使用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 文件夹选择框的两种解决方案
Jul 01 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
JavaScript实现音乐播放器
Aug 14 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
jquery选择器使用详解
2014/04/08 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
python实现简易云音乐播放器
2018/01/04 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python tornado上传文件的功能
2020/03/26 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
建筑学推荐信
2013/11/03 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
领导班子整改措施
2014/10/24 职场文书
后勤个人工作总结
2015/02/28 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL