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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 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管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python动态加载模块的3种方法
2014/11/22 Python
Python的装饰器使用详解
2017/06/26 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
python__name__原理及用法详解
2019/11/02 Python
pytorch构建多模型实例
2020/01/15 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python接入支付宝的实例操作
2020/07/20 Python
Python实现异步IO的示例
2020/11/05 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
房地产融资计划书
2014/01/10 职场文书
教师个人自我鉴定
2014/02/08 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android