jQuery设置与获取HTML,文本和值的简单实例


Posted in Javascript onFebruary 26, 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 相关文章推荐
jquery验证表单中的单选与多选实例
Aug 18 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
关于vue面试题汇总
Mar 20 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 #Javascript
Javascript高级技巧分享
Feb 25 #Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 #Javascript
js判断为空Null与字符串为空简写方法
Feb 24 #Javascript
JS清空多文本框、文本域示例代码
Feb 24 #Javascript
脚本合并提升javascript性能示例
Feb 24 #Javascript
动态加载脚本提升javascript性能
Feb 24 #Javascript
You might like
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP 高手之路(一)
2006/10/09 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
今天是星期几的4种JS代码写法
2013/09/17 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
详解a++和++a的区别
2017/08/30 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python画微信表情符的实例代码
2019/10/09 Python
python如何查看网页代码
2020/06/07 Python
python关于倒排列的知识点总结
2020/10/13 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python