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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
vue-router重定向不刷新问题的解决
Jun 25 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python如何实现DES加密
2020/09/21 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
高中数学教师求职信
2013/10/30 职场文书
管道维修工岗位职责
2013/12/27 职场文书
报到证丢失证明
2014/01/11 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
卖房协议书
2014/04/11 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
慰问信格式
2015/02/14 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL