使用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 实现input输入什么div图层显示什么
Jun 15 Javascript
javascript实现日期格式转换
Dec 16 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
js prototype和__proto__的关系是什么
Aug 23 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版(5)
2006/10/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JavaScript原型及原型链终极详解
2016/01/04 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
学习python (2)
2006/10/31 Python
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Python装饰器用法示例小结
2018/02/11 Python
Python之循环结构
2019/01/15 Python
python字典改变value值方法总结
2019/06/21 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Python with语句用法原理详解
2020/07/03 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
比较基础的php面试题及答案-编程题
2012/10/14 面试题
招商专员岗位职责
2014/02/08 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
父母教会我观后感
2015/06/17 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle