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 相关文章推荐
javascript 事件处理程序介绍
Jun 27 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
JavaScript数组方法总结分析
May 06 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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
第二节 对象模型 [2]
2006/10/09 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
三年级评语大全
2014/04/23 职场文书
幼师求职信
2014/06/23 职场文书
基层党组织整改方案
2014/10/25 职场文书
2014年科普工作总结
2014/12/06 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript