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 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 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
PHP动态图像的创建
2006/10/09 PHP
php的计数器程序
2006/10/09 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
ScrollDown的基本操作示例
2013/06/09 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python 除法小技巧
2008/09/06 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python实现猜数游戏
2020/03/27 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python 5个顶级异步框架推荐
2020/09/09 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
技术学校毕业生求职信分享
2013/12/02 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
高中英语教学反思范文
2016/03/02 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android