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 相关文章推荐
图片翻转效果具体实现代码
Jan 09 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php 表单验证实现代码
2009/03/10 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
python中类的一些方法分析
2014/09/25 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python入门之后再看点什么好?
2018/03/05 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python实现FTP循环上传文件
2020/03/20 Python
Python字典dict常用方法函数实例
2020/11/09 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
请假条格式范文
2014/04/10 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
师德师风个人反思
2014/04/28 职场文书
师德演讲稿范文
2014/05/06 职场文书
产品生产计划书
2014/05/07 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014年施工员工作总结
2014/11/18 职场文书
主婚人致辞精选
2015/07/28 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript