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模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 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中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP获取url的函数代码
2011/08/02 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php建立Ftp连接的方法
2015/03/07 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
js数组操作学习总结
2013/11/04 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
React组件的三种写法总结
2017/01/12 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
周年庆典邀请函范文
2014/01/24 职场文书
社区交通安全实施方案
2014/03/22 职场文书
班级旅游计划书
2014/05/03 职场文书
超市创意活动方案
2014/08/15 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2015年社区文体活动总结
2015/03/25 职场文书