使用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 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
js保留两位小数方法总结
Jan 31 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
JavaScript流程控制(循环)
Dec 06 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无限分类的类
2007/01/02 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
基于JQuery的密码强度验证代码
2010/03/01 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
flask框架视图函数用法示例
2018/07/19 Python
Python多继承原理与用法示例
2018/08/23 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
合同专员岗位职责
2013/12/18 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
高中生操行评语大全
2014/04/25 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
人民调解员培训方案
2014/06/05 职场文书
公共场所标语
2014/06/30 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
培训班开班主持词
2015/07/02 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
导游词之张家界
2019/10/31 职场文书
Python编写冷笑话生成器
2022/04/20 Python