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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 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 ADODB使用方法集锦
2008/03/25 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
js单例模式详解实例
2013/11/21 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
初识Javascript小结
2015/07/16 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python如何生成网页验证码
2018/07/28 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
2014初中数学教研组工作总结
2014/12/19 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
python正则表达式re.search()的基本使用教程
2021/05/21 Python