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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
js实现拖拽上传图片功能
Aug 01 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
使用Vue生成动态表单
Nov 26 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
js+canvas实现纸牌游戏
Mar 16 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实现指定字符串中查找子字符串的方法
2015/03/17 PHP
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
js中作用域的实例解析
2017/03/16 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python AES加密实例解析
2018/01/18 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python可视化实现KNN算法
2019/10/16 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
python如何提升爬虫效率
2020/09/27 Python
Python扫描端口的实现
2021/01/25 Python
Intersport西班牙:在线体育商店
2019/11/06 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
优秀求职信范文分享
2014/01/26 职场文书
新春联欢会主持词
2014/03/24 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
论群众路线学习笔记
2014/11/06 职场文书
教学质量月活动总结
2015/05/11 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
MySQL数据库 安全管理
2022/05/06 MySQL