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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
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中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
python使用列表的最佳方案
2020/08/12 Python
Python面试题集
2012/03/08 面试题
资产经营总监岗位职责
2013/12/04 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
稽核岗位职责
2015/02/10 职场文书
信仰观后感
2015/06/03 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript