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 匿名调用实现代码
Jun 19 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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 date与gmdate的获取日期的区别
2010/02/08 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jcrop基本参数一览
2013/07/16 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python获取文件扩展名的方法
2015/07/06 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
行政内勤岗位职责
2014/04/07 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
党员个人党性分析材料
2014/12/18 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android