m.lom599.com_手机版乐白家网址_乐百家手机首页登录

dom对象的方法,方法示例及jquery

作者: 手机版乐白家网址  发布:2019-07-16

本文实例讲述了JS CSS3实现的类似于苹果iwatch计时器特效。分享给大家供大家参考。具体如下:
带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟。
运行效果图:                    -------------------查看效果 下载源码-------------------

原html字符串如下:

jQuery on()方法是官方推荐的绑定事件的一个方法。

图片 1

var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>"
          "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>"
          "</div>";
$(selector).on(event,childSelector,data,function,map)

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery带时间的日期控件代码如下

   1、下面使用Jquery库将text字符串变量转为Jquery对象。

由此扩展开来的几个以前常见的方法有.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery带时间的日期控件代码</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/admin.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-zh-CN.js"></script>
<style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
</style>
</head>
<body>
<div class="wrap">
<ul class="sub-nav">
 <li ><a href="javascript:void(0);">基础信息</a></li>     
 </ul> 
 <ul class="doc-set">
 <li>
 <div class="doc-dt">
  <p>活动时间</p>
 </div>
 <div class="doc-dd">
  <input name="act_start_time" type="text" class="text-box" value="" placeholder="开始时间≥当前时间" title="开始时间≥当前时间" readonly="readonly" style="cursor:pointer;"/>
  <input name="act_stop_time" type="text" class="text-box" value="" placeholder="结束时间>开始时间" title="结束时间>开始时间" readonly="readonly" style="cursor:pointer;"/>
 </div>
 </li> 
</ul>
</div>
<script type="text/javascript">
 $( "input[name='act_start_time'],input[name='act_stop_time']" ).datetimepicker();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

Jquery代码如下:

bind()

以上就是为大家分享的jQuery带时间的日期控件代码,希望大家可以喜欢。

  alert($(text).html());
 $("p").bind("click",function(){
    alert("The paragraph was clicked.");
  });
  $("p").on("click",function(){
    alert("The paragraph was clicked.");
  });

您可能感兴趣的文章:

  • jQuery插件datepicker 日期连续选择
  • Jquery日期选择datepicker插件用法实例分析
  • jQuery实现简单的日期输入格式化控件
  • jquery获取当前日期的方法
  • jquery实现在页面加载的时自动为日期插件添加当前日期
  • jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
  • JQuery EasyUI 日期控件如何控制日期选择区间
  • jquery validate 自定义验证方法介绍 日期验证
  • jquery 日期控件datepicker属性详细解析
  • jQuery之日期选择器的深入解析
  • 获取客户端电脑日期时间js代码(jquery)
  • jQuery获取某天的农历日期并判断是否除夕或新年的方法

  其中$(text)就text字符串转为了一个Jquery对象,最后将该Jquery对象的html()将html内容以字符串的形式输出,结果如下:

delegate()

<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>
$("#div1").on("click","p",function(){
    $(this).css("background-color","pink");
  });
  $("#div2").delegate("p","click",function(){
    $(this).css("background-color","pink");
  });

  说明了,$(text)Jquery对象代表的是最外层的html元素div。

live()

  2、将Jquery对象和DOM对象之间互转。

  $("#div1").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("#div2").live("click",function(){
    $(this).css("background-color","pink");
  });

代码如下:

以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。

var element= $(text).get(0) //element就是一个dom对象
  var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

注意:DOM对象和Jquery对象区别

$(document).ready(function(){
  $("p").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("button").click(function(){
    $("p").off("click");
  });
});

在我理解,Jquery对象和DOM对象都是封装的html元素,可以对html元素节点进行操作,方便编程,但是他们之间的方法有些是不能共用的,如Jquery对象的html()方法,DOM对象就使用不了;而DOM对象的GetElementById(),Jquery对象也不能使用。所以在必须要的时候可以进行相互转换。

tip:如果你的事件只需要一次的操作,可以使用one()这个方法

  3、使用js代码将text字符串变量转为DOM对象。

$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:" =6px"});
  });
});

js代码如下:

trigger()绑定

/*字符串转dom对象*/
function loadXMLString(txt) 
{
  try //Internet Explorer
   {
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.loadXML(txt);
     //alert('IE');
     return(xmlDoc); 
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert('FMO');
        return(xmlDoc);
      }
     catch(e) {alert(e.message)}
   }
  return(null);
}
$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
  $("input").select(function(){
    $("input").after(" Text marked!");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:dom对象的方法,方法示例及jquery

关键词: m.lom599.com