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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
javascript 闭包详解
Jul 02 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
详解JS ES6编码规范
May 07 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
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Python切片用法实例教程
2014/09/08 Python
python简单文本处理的方法
2015/07/10 Python
python MySQLdb使用教程详解
2018/03/20 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
技术总监个人的自我评价范文
2013/12/18 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
研究生求职自荐书
2014/06/23 职场文书
护理实习生带教计划
2015/01/16 职场文书
个人借条范本
2015/05/25 职场文书
个人欠条范本
2015/07/03 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL