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来操纵HTML DOM元素
Sep 15 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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实现mysql数据库备份类
2008/03/20 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
python解析xml文件实例分享
2013/12/04 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
python版本五子棋的实现代码
2018/12/11 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
如何撰写创业策划书
2019/06/27 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS