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 相关文章推荐
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python计算回文数的方法
2015/03/11 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
pandas的qcut()方法详解
2019/07/06 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
中专生自荐信
2014/06/25 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
小学生作文评语集锦
2014/12/25 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers