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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
通过实例了解Javascript柯里化流程
Mar 03 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS中数组重排序方法
2016/11/11 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
拖动时防止选中
2017/02/03 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
园林技术专业求职信
2014/07/28 职场文书
检讨书模板大全
2015/05/07 职场文书
放假通知怎么写
2015/08/18 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书