jQuery设置和获取HTML、文本和值示例


Posted in Javascript onJuly 08, 2014
<script type="text/javascript">
//<![CDATA[
$(function(){
//获取<p>元素的HTML代码
$("input:eq(0)").click(function(){
alert( $("p").html() );
});
//获取<p>元素的文本
$("input:eq(1)").click(function(){
alert( $("p").text() );
});
//设置<p>元素的HTML代码
$("input:eq(2)").click(function(){
$("p").html("<strong>你最喜欢的水果是?</strong>");
}); 
//设置<p>元素的文本
$("input:eq(3)").click(function(){
$("p").text("你最喜欢的水果是?");
}); 
//设置<p>元素的文本
$("input:eq(4)").click(function(){
$("p").text("<strong>你最喜欢的水果是?</strong>");
}); 
//获取按钮的value值
$("input:eq(5)").click(function(){
alert( $(this).val() );
}); 
//设置按钮的value值
$("input:eq(6)").click(function(){
$(this).val("我被点击了!");
}); 
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value=="请输入邮箱地址"){ 
$(this).val(""); // 如果符合条件,则清空文本框内容
} 
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val("请输入邮箱地址");// 如果符合条件,则设置内容
} 
})

$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
} 
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
} 
})
});
//]]>
</script>
<script type="text/javascript"> //<![CDATA[ $(function(){ $("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==this.defaultValue){ $(this).val(""); // 如果符合条件,则清空文本框内容 } }); $("#address").blur(function(){ // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==""){ $(this).val(this.defaultValue);// 如果符合条件,则设置内容 } })

$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value==this.defaultValue){
$(this).val("");
} 
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(this.defaultValue);
} 
})
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
//设置单选下拉框选中
$("input:eq(0)").click(function(){
$("#single").val("2");
});
//设置多选下拉框选中
$("input:eq(1)").click(function(){
$("#multiple").val(["选择2号", "选择3号"]);
});
//设置单选框和多选框选中
$("input:eq(2)").click(function(){
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
});

});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
//设置单选下拉框选中
$("input:eq(0)").click(function(){
$("#single option").removeAttr("selected"); //移除属性selected
$("#single option:eq(1)").attr("selected",true); //设置属性selected
});
//设置多选下拉框选中
$("input:eq(1)").click(function(){
$("#multiple option").removeAttr("selected"); //移除属性selected
$("#multiple option:eq(2)").attr("selected",true);//设置属性selected
$("#multiple option:eq(3)").attr("selected",true);//设置属性selected
});
//设置单选框和多选框选中
$("input:eq(2)").click(function(){
$(":checkbox").removeAttr("checked"); //移除属性checked
$(":radio").removeAttr("checked"); //移除属性checked
$(":checkbox[value=check2]").attr("checked",true);//设置属性checked
$("[value=check3]:checkbox").attr("checked",true);//设置属性checked
$("[value=radio2]:radio").attr("checked",true);//设置属性checked
}); 
});
//]]>
</script>

:checkbox 表示属性为checkbox

Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
Boostrap入门准备之border box
May 09 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
jQuery取得设置清空select选择的文本与值
Jul 08 #Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 #Javascript
Javascript遍历table中的元素示例代码
Jul 08 #Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 #Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 #Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 #Javascript
jquery中each方法示例和常用选择器
Jul 08 #Javascript
You might like
PHP中调用JAVA
2006/10/09 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
人事主管岗位职责
2014/01/30 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
委托公证书
2014/04/08 职场文书
经济管理专业求职信
2014/06/09 职场文书
学校节能减排方案
2014/06/13 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
项目转让协议书
2014/10/27 职场文书
2014年电话销售工作总结
2014/12/01 职场文书