物勒工名,以考其诚

关键词搜索结果:

了解下jQuery里面的jQuery.fx.off属性

jQuery里面的jQuery.fx.off属性。定义和用法jQuery.fx.off属性用于对所有动画进行全局禁用或启用。默认值是false,它允许动画正常运行。当设置为true时,将禁用所有动画方法,这样会把元素设置为其最后的状态,而不是显示效果。提示:如需简化代码,可以使用$.fx.off来代替jQuery.fx.off。语法jQuery.fx.off = true|false;属性描述true  规定应该禁用动画。   false默认。规定应该启用动画。   上DEMO:<!DOCTYPE html><html lang="ja"><head>  <meta charset="UTF-8">  <title>了解下jQuery里面的jQuery.fx.off属性</title></head><body><button id="disable">jQuery.fx.off = true ( 禁用 )</button><button id="enable">jQuery.fx.off = false ( 启用 )</button><br><br><button id="toggle">切换动画</button><div style="background:#98bf21;height:100px;width:100px;margin:50px;"></div><script src="/demo/js/jq.js"></script><script>$(document).ready(function(){  $("#disable").click(function(){    jQuery.fx.off = true;  });  $("#enable").click(function(){    jQuery.fx.off = false;  });  $("#toggle").click(function(){    $("div").toggle("slow");  });});</script></body></html>...

如何用jQuery去重复数据

jQuery去重复数据?直接上代码:for(var i=0;i<arr.length;i++) {  var items=arr[i];  //判断元素是否存在于new_arr中,如果不存在则插入到new_arr的最后  if($.inArray(items,new_arr)==-1) {    new_arr.push(items);  }}在jQuery中使用循环遍历数组,将其写入一个新的数组中,在写入前使用$.inArray()方法判断新数组中是否已有此数据,若没有再写入,以此方法获取的新数组就去除了重复数据。$.inArray()函数用于在数组中查找指定值,并返回它的索引值(如果没有找到,则返回-1)。...

聊聊如何将jQuery的$.ajax()用于异步HTTP请求

jQuery的$.ajax()用于异步HTTP请求”的技术。有童鞋就问了,现在谁还用jQuery?其实如果你只是做一个简单的页面,用很简单的代码搞定了,你还要用去框架?废话不多说,开始学习吧!描述jQuery的最常用的Ajax的速记方法:$.get(),$.post(),和$.load()。它们是在几行代码中发出Ajax请求的便捷方法。有时,我们需要对要进行的Ajax调用进行更多控制。例如,我们要指定在Ajax调用失败或需要执行Ajax请求的情况下应该发生的情况,但是只有在一定时间内检索到它的结果才需要。在这种情况下,我们可以依靠jQuery提供的另一个函数,称为$.ajax()本教程的主题。$.ajax()功能jQuery $.ajax()函数用于执行异步HTTP请求。它是很久以前添加到库中的,自1.0版开始存在。该$.ajax()函数是前面提到的文章中讨论的每个函数使用预设配置在后台调用的功能。该函数的签名如下所示:$.ajax(url[, settings])$.ajax([settings])该url参数是一个字符串,其中包含您要通过Ajax调用访问的URL,而它settings是一个对象文字,其中包含Ajax请求的配置。在第一种形式中,此函数使用中url指定的参数和选项执行Ajax请求settings。在第二种形式中,URL是在settings参数中指定的,或者可以省略,在这种情况下,将向当前页面发出请求。下一部分将描述此功能接受的选项列表,该列表很长,因此我将简短说明。如果您想深入研究它们的含义,可以参考的官方文档$.ajax()。该settings参数您可以指定许多不同的选项$.ajax()来满足您的需求。在下面的列表中,您可以找到它们的名称和描述(按字母顺序排列):accepts:在请求标头中发送的内容类型,它告诉服务器它将接受哪种响应。async:将此选项设置false为执行同步请求。beforeSend:请求前的回调函数,可用于jqXHR在发送对象之前对其进行修改。cache:设置此选项可false强制浏览器不缓存请求的页面。complete:请求完成时(执行after success和errorcallbacks)将要调用的函数。contents:确定库将如何解析响应的对象。contentType:发送到服务器的数据的内容类型。context:一个对象,用作this所有与Ajax相关的回调的上下文()。converters:包含dataType到dataType转换器的对象。crossDomain:将此属性设置true为在同一域上强制执行跨域请求(例如JSONP)。data:执行Ajax请求时要发送到服务器的数据。dataFilter:用于处理XMLHttpRequest的原始响应数据的函数。dataType:期望从服务器返回的数据类型。error:如果请求失败,将调用的函数。global:是否为此请求触发全局Ajax事件处理程序。headers:附加标头的对象发送给服务器。ifModified:将此选项设置true为仅当自上一个请求以来响应已更改时才想强制请求成功。isLocal:true如果要强制jQuery将当前环境识别为“本地”,请设置此选项。jsonp:一个字符串,用于覆盖JSONP请求中的回调函数名称。jsonpCallback:指定JSONP请求的回调函数名称。mimeType:一个字符串,用于指定要覆盖XHRMIME类型的MIME类型。password:与XMLHttpRequest一起用于响应HTTP访问认证请求的密码。processData:false如果您不希望传递到该data选项的数据(如果还没有字符串)被处理并转换为查询字符串,则将该选项设置为。scriptAttrs:定义一个具有附加属性的对象,以在“脚本”或“jsonp”请求中使用。scriptCharset:在请求中使用的脚本标签上设置charset属性,但仅在使用“脚本”传输时才适用。statusCode:数字HTTP代码和响应中具有相应代码的函数的对象。success:如果请求成功,将调用的函数。timeout:一个数字,用于指定请求的超时时间(以毫秒为单位)。traditional:true如果您希望使用传统的参数序列化样式,请将其设置为。type:发出的请求类型,可以是“POST”或“GET”。url:包含请求发送到的URL的字符串。username:XMLHttpRequest用来响应HTTP访问认证请求的用户名。xhr:用于创建XMLHttpRequest对象的回调。xhrFields:要在本机XHR对象上设置的对象。那是一个很长的列表,不是吗?好吧,作为一名开发人员,您可能在我猜的第五或第六个元素处停止阅读此列表,但这很好。下一节将更加令人兴奋,因为我们将把$.ajax()函数和其中一些选项付诸实践。全部放在一起在本节中,我们将看到此功能及其一些选项的使用。第一个例子 $.ajax()我们将从一个简单的演示开始,该演示复制与上一篇文章中开发的代码相同的代码,但是这次我们将采用$.ajax()。为了方便起见,下面显示的是我正在谈论的代码:$('#main-menu a').on('click', function(event) {  event.preventDefault();  $('#main').load(this.href + ' #main *', function(responseText, status) {  if (status === 'success') {    $('#notification-bar').text('The page has been successfully loaded');  } else {      $('#notification-bar').text('An error occurred');    }  });});更新此代码片段以使用该$.ajax()功能,我们获得以下代码:$('#main-menu a').on('click', function(event) {  event.preventDefault();  $.ajax(this.href, {    success: function(data) {      $('#main').html($(data).find('#main *'));      $('#notification-bar').text('The page has been successfully loaded');},    error: function() {      $('#notification-bar').text('An error occurred');    }  });});在这里您可以看到我使用了函数的第一种形式。我已指定将请求发送到的URL作为第一个参数,然后将设置对象发送为第二个参数。后者仅利用上一节中讨论的几个属性中的两个- success和error-分别指定在请求成功或失败的情况下该怎么做。从Joined.in中检索讲话 $.ajax()我要讨论的第二个示例创建一个JSONP请求,以从名为Joind.in的服务中检索一些信息。后者是一个网站,活动参加者可以在其中留下有关活动及其会话的反馈。具体来说,我将创建一个代码片段,使用该$.ajax()函数,以PHP开发人员的眼光检索我的演讲Modern前端的标题和描述。实现此目标的代码如下:$.ajax({  url: 'http://api.joind.in/v2.1/talks/10889',  data: {    format: 'json'  },  error: function() {    $('#info').html('<p>An error has occurred</p>');  },  dataType: 'jsonp',  success: function(data) {    var $title = $('<h1>').text(data.talks[0].talk_title);    var $description =  $('<p>').text(data.talks[0].talk_description);    $('#info')    .append($title)    .append($description);  },  type: 'GET'});在上面的代码段中,我使用了上面列出的几个属性。首先,您可以看到我正在使用的第二种形式$.ajax(),该形式允许我将请求发送到的URL作为url对象文字的属性()指定。由于Joined.in的API接受JSONP请求,因此在上面的代码中,我通过指定dataType属性来设置要使用的请求类型。然后,data根据API的要求,使用该属性来定义要从服务器获取的格式类型。但是,后者需要此数据作为GET请求的查询字符串的一部分,因此我还将type属性设置指定GET为其值。最后,我编写了一个error回调以在出现错误的情况下显示一条消息,success 回调,以在成功的情况下显示演讲的标题和描述。该代码的实时演示如下所示:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <button id="action-button">Click me to load info!</button>    <div id="info"></div>    <small>Demo created by <a href="https://www.jiangweishan.com">Web前端之家</a></small>    <script src="http://libs.baidu.com/jQuery/2.0.0/jQuery.min.js"></script>    <script>        $('#action-button').click(function() {            $.ajax({                url: 'https://api.joind.in/v2.1/talks/10889',                data: {                    format: 'json'                },                error: function() {                    $('#info').html('<p>An error has occurred</p>');                },                dataType: 'jsonp',                success: function(data) {                    var $title = $('<h1>').text(data.talks[0].talk_title);                    var $description = $('<p>').text(data.talks[0].talk_description);                    $('#info')                        .append($title)                        .append($description);                },                type: 'GET'            });        });    </script></body></html>结论在本教程中,我讨论了jQuery提供的最强大的Ajax函数$.ajax()。它使您可以执行Ajax请求,并且可以控制如何将请求发送到服务器以及如何处理响应。借助此功能,万一所有速记功能都不适合,您将拥有满足项目所有需求所需的工具。为了更好地了解此功能的潜力,我建议您使用代码示例,并尝试修改代码以使用settings参数接受的其他选项。...

使用jQuery判断一个元素是否有子元素

jQuery判断一个元素是否有子元素的方法:1、使用children()方法通过判断子元素长度来判断是否有子元素。2、使用has()方法判断是否有子元素。jQuery判断一个元素是否有子元素的方法介绍:方法一:jQuery--children() 判断子元素长度var number = $("#div_id").children().length;console.log(number);if (number == 0) {  //不含子元素}else{      //含有子元素}children()方法返回返回被选元素的所有直接子元素。语法:.children(selector)该方法接受一个选择器表达式作为可选参数,与我们传递到$()的参数的类型是相同的。如果应用该选择器,将测试元素是否匹配该表达式,以此筛选这些元素。方法二:jQueryhas()方法if($("#div_id:has(div)").length){     //含有子元素}else{     //不含子元素}has()方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素。语法:$(selector).has(element)OK,您学会了吗?...

jQuery从select选项框中删除选项?

jQuery实现?想要使用jQuery从select元素中删除options元素,可以先使用jQuery选择器从select中选择需要删除的options元素,然后使用jQuery的remove()方法从HTML文档中删除该选项。remove()方法用于法移除被选元素,包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。示例1:使用remove()方法删除value='val_1'的选项<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="text-align:center;" id="body">     <p style="font-size: 15px; font-weight: bold;">单击按钮,从select选择框中删除选项</p>     <select>         <option value="val_1"> Val_1</option>         <option value="val_2"> Val_2</option>         <option value="val_3"> Val_3</option>         <option value="val_4"> Val_4</option>     </select>     <br>     <br>     <button> 单击 </button>     <p id="Text" style="color: green;font-size: 24px;font-weight: bold;"></p>     <script src="https://code.jQuery.com/jQuery-3.3.1.min.js"></script>     <script>               $('button').on('click', function() {             $("option[value='val_1']").remove();             $('#Text').text('值为val_1的选项已删除!');         });     </script> </body>   </html>示例2:使用remove()方法删除class='val'的选项<!DOCTYPE html><html><head>   <meta charset="utf-8"></head><body style="text-align:center;" id="body">     <p style="font-size: 15px; font-weight: bold;">单击按钮,从select选择框中删除选项</p>     <select>         <option class="val" value="val_1"> Val_1 </option>         <option class="val" value="val_2"> Val_2 </option>         <option value="val_3"> Val_3 </option>         <option value="val_4"> Val_4 </option>     </select>    <br>     <br>     <button> 单击 </button>     <p id="Text" style="color: green;font-size: 24px;font-weight: bold;"></p>     <script src="https://code.jQuery.com/jQuery-3.3.1.min.js"></script>     <script>               $('button').on('click', function() {             $("option[class='val']").remove();             $('#Text').text(               'class = "val"的选项已删除!');         });     </script> </body>   </html>...

jQuery向select选项框中添加新选项

jQuery向select选项框中添加新选项,即如何向select元素中添加options元素?方法1:将options标签添加到select元素中先使用jQuery选择器选择select元素,然后使用append()方法添加options标签元素。append()方法将指定的内容插入jQuery集合的最后一个子集合。这样options元素就被添加到select元素中。语法:$('#selectBox').append(`${optionText}`)示例:<!DOCTYPE html><html><head><meta charset="utf-8"><title>如何使用jQuery向select元素中添加options?</title></head><body>     <h2 style="color: green"> 使用jQuery向select元素中添加options</h2>     <p>                     从给定选项中选择一个:         <select id="select">             <option value="free">Free</option>             <option value="basic">Basic</option>         </select>     </p>     <p>单击下面的按钮,向选择框添加一个选项。</p>         <button onclick="addOption()">添加option</button>         <script src="https://code.jQuery.com/jQuery-3.3.1.min.js"></script>     <script type="text/javascript">         function addOption() {             optionText = 'Premium';             optionValue = 'premium';               $('#select').append(`<option value="${optionValue}"> ${optionText} </option>`);         }     </script> </body> </html>方法2:使用Option()方法创建新选项Option()方法用于创建新的option元素。该方法将使用文本和选项的值作为参数创建一个新选项。然后使用append()方法将此option元素添加到选择框中。语法:$('#selectBox').append(new Option(optionText, optionValue))示例:<!DOCTYPE html><html><head><meta charset="utf-8"><title>如何使用jQuery向select元素中添加options?</title></head><body>     <h2 style="color: red"> 使用jQuery向select元素中添加options</h2>     <p>                     从给定选项中选择一个:         <select id="select">             <option value="hello">Hello</option>             <option value="hi">Hi</option>         </select>     </p>     <p>单击下面的按钮,向选择框添加一个选项。</p>         <button onclick="addOption()">添加option</button>         <script src="https://code.jQuery.com/jQuery-3.3.1.min.js"></script>     <script type="text/javascript">         function addOption() {             optionText = 'welcome';             optionValue = 'welcome';               $('#select').append(new Option(optionText, optionValue));         }     </script> </body>   </html>方法3:使用值和文本创建创建新的option元素使用option标签创建一个新的jQueryDOM元素。option标签的值是用val()方法设置的,option标签的文本是用text()方法设置的。然后使用append()方法将创建的option元素添加到选择框中。语法:$('#selectBox').append($('<option>').val(optionValue).text(optionText))示例:<!DOCTYPE html><html><head><meta charset="utf-8"><title>如何使用jQuery向select元素中添加options?</title></head><body>     <h2 style="color: green"> 使用jQuery向select元素中添加options</h2>     <p>                     从给定选项中选择一个:         <select id="select">             <option value="free">Free</option>             <option value="basic">Basic</option>         </select>     </p>     <p>单击下面的按钮,向选择框添加一个选项。</p>         <button onclick="addOption()">添加option</button>         <script src="https://code.jQuery.com/jQuery-3.3.1.min.js"></script>     <script type="text/javascript">         function addOption() {             optionText = 'Extra';             optionValue = 'extra';               $('#select').append($('<option>').val(optionValue).text(optionText));         }     </script> </body> </html>...

jQuery ajax中 cache: true和false的区别

jQueryajax中cache:true和false的区别:true的话会读缓存,可能真的到服务器上。假如上次访问了a.html,第二次的时候得到的是上次访问的a.html的结果,而不是重新到服务器获取。false的话会在url后面加一个时间缀,让它跑到服务器获取结果。cache只有GET方式的时候有效。...

2种用jQuery按name属性选择元素的方法

jQuery按name属性选择元素的方法,拿走不谢!给定一个HTML文档,如何使用jQuery按name属性选择元素?在jQuery中,可以使用2个方法通过name属性选择元素;下面就来通过示例来介绍一下。方法1:使用name属性选择器name属性选择器可用于按name属性选择元素。此选择器选择值与指定值完全相等的元素。语法:[name="nameOfElement"]例子:<!DOCTYPE html><html><head><meta charset="utf-8">   </head>     <body>     <center>         <p> 下面的文本框中有 <b>name属性 'address'.</b>             <form>                 <textarea rows="4" cols="40" name="address"></textarea>             </form>         </p>         <p> 下面的文本框中有 <b>name属性 'area'.</b>             <form>                 <input type="text" name="area">             </form>         </p>         <p>单击按钮,隐藏name为“area”的input输入框</p>         <button onclick="selectByName()">隐藏</button>        <script src="https://code.jQuery.com/jQuery-3.3.1.min.js">         </script>         <script type="text/javascript">             function selectByName() {                 element = $('[name="area"]');                   //hide the element                 element.hide();             }         </script>     </center> </body>   </html>方法2:使用javascript按名称获取元素并将其传递给jQuery可以使用javascriptgetElementsByName()方法选择所需的元素,并将其传递给jQuery函数,以进一步用作jQuery对象。语法:selector = document.getElementsByName('nameOfElement');element = $(selector);实例:<!DOCTYPE html><html><head><meta charset="utf-8">   </head>     <body>     <center>         <p> 下面的文本框中有 <b>name属性 'address'.</b>             <form>                 <textarea rows="4" cols="40" name="address"></textarea>             </form>         </p>         <p> 下面的文本框中有 <b>name属性 'area'.</b>             <form>                 <input type="text" name="area">             </form>         </p>         <p>单击按钮,隐藏name为“address”的文本框</p>         <button onclick="selectByName()">隐藏</button>        <script src="https://code.jQuery.com/jQuery-3.3.1.min.js">         </script>         <script type="text/javascript">             function selectByName() {                 selector = document.getElementsByName('address');                 element = $(selector);                   // hide the element                 element.hide();             }         </script>     </center> </body>   </html>...

jQuery中使用一些内置方法来更改元素id

jQuery中可以使用一些内置方法来更改元素id,下面本篇文章就来给大家介绍一下使用jQuery更改元素id的方法,希望对大家有所帮助。方法1:jQueryattr()方法attr()方法设置/返回选定元素的属性和值。如果此方法用于返回属性值,则返回第一个选定元素的值。如果此方法用于设置属性值,则为所选元素集设置一个或多个属性/值对。示例:使用attr()方法更改元素的ID<!DOCTYPE html><html><head><meta charset="UTF-8"><style>#myCol {background: green;}#newID {background: palevioletred;}table {color: white;}td {padding: 10px;}</style></head><body><center><table><colgroup><col id="myCol" span="3"><col style="background-color:green"></colgroup><tr><th>S.No</th><th>Title</th><th>id</th></tr><tr id="row1"><td>No.1</td><td>Hello</td><th>id_1</th></tr><tr><td>No.2</td><td>Hi</td><th>id_2</th></tr></table><br><button onclick="Geeks()">单击</button></center><script src="https://cdn.staticfile.org/jQuery/1.10.2/jQuery.min.js"></script><script>function Geeks() {$("col").attr('id', 'newID');}</script></body></html>方法2:jQueryprop()方法prop()方法设置/返回匹配元素的属性和值。如果此方法用于返回属性值,则返回第一个选定元素的值。如果此方法用于设置属性值,则它为所选元素集设置一个或多个属性/值对。示例:使用prop()方法更改元素的ID<!DOCTYPE html><html><head><meta charset="UTF-8"><style>#myCol {background: lightcoral;}#newID {background: palevioletred;}table {color: white;}td {padding: 10px;}</style></head><body><center><table><colgroup><col id="myCol" span="3"><col style="background-color:lightcoral"></colgroup><tr><th>S.No</th><th>Title</th><th>id</th></tr><tr id="row1"><td>No.1</td><td>Hello</td><th>id_1</th></tr><tr><td>No.2</td><td>Hi</td><th>id_2</th></tr></table><br><button onclick="Geeks()">单击</button></center><script src="https://cdn.staticfile.org/jQuery/1.10.2/jQuery.min.js"></script><script>function Geeks() {$("col").prop('id', 'newID'); }</script></body></html>介绍了2种方法,预览看下效果吧。...

jQuery中的内置方法:unbind()

jQuery中的内置方法,用于删除任何选定的事件处理程序。此方法可用于删除特定的事件处理程序或停止特定的函数。它可以在任何使用事件对象的事件处理程序上工作。如果没有提供参数,则unbind()方法对指定元素的所有事件处理程序都有效。语法:$(selector).unbind(event, function, eventObj)参数:此方法接受上述三个参数event:一个可选参数,用于指定从元素中删除它们的事件(一个或多个)。function:一个可选参数,用于指定要从元素的指定事件中取消绑定的函数的名称。eventObj:一个可选参数,用于指定要从事件绑定函数中删除的事件对象。示例:使用unbind()方法从选定元素中删除事件处理程序。<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="https://code.jQuery.com/jQuery-3.3.1.min.js"></script> <script>         $(document).ready(function() {             $("h1").click(function() {                 $(this).css( "background-color", "lightpink");            });                           $("button").click(function() {                 $("h1").unbind();             });         });     </script></head><body style="text-align:center;"><h1 style = "color:red;">Hello World!</h1>                    <button>单击</button> </body></html>试试预览效果吧。...

jQuery中的getScript()方法

jQuery中的getScript()方法,了解下吧。定义和用法getScript()方法使用AJAX的HTTPGET请求获取和执行JavaScript。语法$(selector).getScript(url,success(response,status))参数描述url必需。规定将请求发送到哪个URL。success(response,status)可选。规定当请求成功时运行的函数。额外的参数:response-包含来自请求的结果数据status-包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")<script>$(document).ready(function(){$("button").click(function(){$.getScript("demo_ajax_script.js");});});</script></head><body><button>使用 Ajax 来获取JavaScript脚本并执行</button>...

学习下jQuery之first()的应用

jQuery对象,.first()方法会用第一个匹配元素构造一个新的jQuery对象。语法:$(selector).first()返回值:返回所选元素中的第一个元素。示例:<html><head><meta charset="UTF-8"><script src="/demo/js/jq.js"></script><script>$(document).ready(function() {$('li').first().css('background-color', 'red');});</script></head><body><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul></body></html>以上就是jQuery的first()方法怎么用?的详细内容,更多请关注html中文网其它相关文章!...

分享TIPS:如何分别用JS和jQuery获取屏幕高度

jQuery的各种高度首先来说一说$(document)和$(window),如下:$(document).height();//整个网页的高度$(window).height();//浏览器可视窗口的高度$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()注意,是拉到最低端!当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()假如您要获取整个网页的高度,不建议用$("html").height()、$("body").height()的高度,原因:$("body").height():body可能会有边框,获取的高度会比$(document).height()小;$("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。说道这里,提及边框和margin还有padding,我们自然想到了jQuery的另外的两个高度,那就是innerHeight()和outerHeight()。innerHeight()和outerHeight()不适用于window和document对象,对于window和document对象可以使用.height()代替。innerHeight()和outerHeight()主要用来获取标签的高度。innerHeight()innerHeight:高度+补白outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距innerHeight(value)这个“value”参数可以是一个字符串(数字加单位)或者是一个数字,如果这个“value”参数只提供一个数字,jQuery会自动加上像素单位(px)。如果只提供一个字符串,任何有效的CSS尺寸都可以为高度赋值(就像100px,50%,或者auto)。注意在现代浏览器中,CSS高度属性不包含padding,border,或者margin,除非box-sizingCSS属性被应用。jQuery高度,放到浏览器中试一下:alert($(window).height());                           //浏览器当前窗口可视区域高度alert($(document).height());                        //浏览器当前窗口文档的高度alert($(document.body).height());                //浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width());                            //浏览器当前窗口可视区域宽度alert($(document).width());                        //浏览器当前窗口文档对象宽度alert($(document.body).width());                //浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding marginjavascript的各种高度网页可见区域宽[仅针对body]: document.body.clientWidth网页可见区域高[仅针对body]: document.body.clientHeight网页可见区域宽[仅针对body]: document.body.offsetWidth (包括滚动条和边框,若滚动条和边框为0,则和clientWidth相等)网页可见区域高[仅针对body]: document.body.offsetHeight (包括滚动条和边框,若滚动条和边框为0,则和clientHeight相等)可视窗口宽度(包括滚动轴宽度):window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari可视窗口高度,不包括浏览器顶部工具栏: window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari网页正文全文宽(不包括滚动轴的宽度): document.body.scrollWidth网页正文全文高:document.body.scrollHeight//假如网页中没有滚动轴,document.body.scrollWidth和window.innerWidth相等,document.body.scrollHeight和window.innerHeight相等。网页被卷去的高: document.body.scrollTop网页被卷去的左: document.body.scrollLeft网页正文部分上: window.screenTop网页正文部分左: window.screenLeft屏幕分辨率的高(整个屏幕的高度): window.screen.height屏幕分辨率的宽(整个屏幕的宽度): window.screen.width屏幕可用工作区高度: window.screen.availHeight屏幕可用工作区宽度: window.screen.availWidth整个浏览器可用工作区高度: window.outerHeight整个浏览器可用工作区宽度: window.outerWidth...

分享几个jQuery代码片段应用

jQuery代码片段应用,帮助开发者在最短时间内快速创建网站/网页。1)禁用右键单击功能如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。$(document).ready(function() {//catch the right-click context menu$(document).bind("contextmenu",function(e) { //warning prompt - optionalalert("No right-clicking!");//delete the default context menureturn false;});});2)使用jQuery设定文本大小使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。$(document).ready(function() {//find the current font sizevar originalFontSize = $('html').css('font-size');//Increase the text size$(".increaseFont").click(function() {var currentFontSize = $('html').css('font-size');var currentFontSizeNumber = parseFloat(currentFontSize, 10);var newFontSize = currentFontSizeNumber*1.2;$('html').css('font-size', newFontSize);return false;});//Decrease the Text Size$(".decreaseFont").click(function() {var currentFontSize = $('html').css('font-size');var currentFontSizeNum = parseFloat(currentFontSize, 10);var newFontSize = currentFontSizeNum*0.8;$('html').css('font-size', newFontSize);return false;});// Reset Font Size$(".resetFont").click(function(){$('html').css('font-size', originalFontSize);  });});3)在新窗口打开链接 使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。 $(document).ready(function() {//select all anchor tags that have http in the href//and apply the target=_blank$("a[href^='http']").attr('target','_blank');});4)更改样式列表<h3使用这段代码帮助你更改样式列表。$(document).ready(function() {$("a.cssSwap").click(function() { //swap the link rel attribute with the value in the rel    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); });5)返回到顶部链接此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能。 $(document).ready(function() {//when the id="top" link is clicked$('#top').click(function() {//scoll the page back to the top$(document).scrollTo(0,500);}});6)获取鼠标指针的X/Y轴$().mousemove(function(e){    //display the x and y axis values inside the P element    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);});7)检测当前鼠标坐标使用这个脚本,你可以在任何网络浏览器获取鼠标坐标。 $(document).ready(function() {$().mousemove(function(e){$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);});8)图片预加载此段代码帮助用户快速加载图片或网页页面。jQuery.preloadImagesInWebPage = function() {     for(var ctr = 0; ctr<arguments.length; ctr++){jQuery("").attr("src", arguments[ctr]);}}To use the above method, you can use the following piece of code:$.preloadImages("image1.gif", "image2.gif", "image3.gif");To check whether an image has been loaded, you can use the following piece of code:$('#imageObject').attr('src', 'image1.gif').load(function() {alert('The image has been loaded…');});...

学习jQuery同步提交

jQuery同步提交的方法。分享给大家供大家参考,具体如下:使用jQuery框架,同步提交演示在一些严格检测或者递归、循环调用的情况下,如果不能同步返回数据则可能会出现错误结果,所以需要使用同步提交技术,jQuery默认是异步操作,需要显式设置异步属性async为false,便可以实现同步。自定data提交functionGroupCheck(url,operate,check,group,joker){varresult=-1;$.ajax({type:"POST",async:false,url:url,data:{operate:operate,id_atGroup:group,id_atJoker:joker}}).done(function(msg){if(msg!=null&&msg!=""){if(msg==0){alert("操作成功2");}else{alert("操作失败2");}}else{alert("服务器异常2");//check.checked=true;}}).fail(function(){//alert("error");}).always(function(){//alert("complete");});returnresult;}取得form作为提交的数据var$form=$('#theForm1');url=$form.attr('action');$.ajax({type:"POST",async:false,url:url,data:$form.serialize()}).done(function(msg){//完成代码});注意1.8以后,废弃jqXHR.success(),jqXHR.error(),andjqXHR.complete(),改为jqXHR.done(),jqXHR.fail(),andjqXHR.always()...

jQuery学习之DOM节点

jQuery中DOM节点的插入方法,以及各种方法的注意点,下面话不多说,来看看详细的介绍吧。一、内部插入append()与appendTo()append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。append()和appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同,append()前面是要选择的对象,后面是要在对象内插入的元素内容,appendTo()前面是要插入的元素内容,而后面是要选择的对象。$("#bt1").on('click', function() { //.append(), 选择表达式在函数的前面, //参数是将要插入的内容。 $(".content").append('<div class="append">通过append方法添加的元素</div>') }) $("#bt2").on('click', function() { //.appendTo()刚好相反,内容在方法前面, //无论是一个选择器表达式 或创建作为标记上的标记 //它都将被插入到目标容器的末尾。 $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content")) })二、内部插入prepend()与prependTo()在元素内部进行操作的方法,除了在被选元素的结尾(仍然在内部)通过append与appendTo插入指定内容外,相应的还可以在被选元素之前插入,jQuery提供的方法是prepend与prependTo.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素(如果要作为最后一个子元素插入用.append())..prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同对于.prepend()而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数而.prependTo()正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。$("#bt1").on('click', function() { //找到class="aaron1"的div节点,然后通过prepend在内部的首位置添加一个新的p节点 $('.aaron1').prepend('<p>prepend增加的p元素</p>') }) $("#bt2").on('click', function() { //找到class="aaron2"的div节点,然后通过prependTo内部的首位置添加一个新的p节点 $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2')) })这里总结下内部操作四个方法的区别:append()向每个匹配的元素内部追加内容prepend()向每个匹配的元素内部前置内容appendTo()把所有匹配的元素追加到另一个指定元素的集合中prependTo()把所有匹配的元素前置到另一个指定的元素集合中三、外部插入after()与before()节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系。之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配I的元素前后插入内容。before与after都是用来对相对选中元素外部增加相邻的兄弟节点2个方法都是都可以接收HTML字符串,DOM元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面2个方法都支持多个参数传递after(div1,div2,....)可以参考右边案例代码注意点:after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入,before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插。$("#bt1").on('click', function() { //在匹配test1元素集合中的每个元素前面插入p元素 $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>') })$("#bt2").on('click', function() { //在匹配test1元素集合中的每个元素后面插入p元素 $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')})四、外部插入insertAfter()与insertBefore()与内部插入处理一样,jQuery由于内容目标的位置不同,然增加了2个新的方法insertAfter与insertBefore.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面.after()和.insertAfter()实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。对于after()选择表达式在函数的前面,参数是将要插入的内容。对于.insertAfter(),刚好相反,内容在方法前面,它将被放在参数里元素的后面before、after与insertBefore。insertAfter的除了目标与位置的不同外,后面的不支持多参数处理注意事项:insertAfter将jQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将jQuery对象插入;insertBefore将jQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将jQuery对象插入;$("#bt1").on('click', function() { //在test1元素前后插入集合中每个匹配的元素,不支持多参数 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))})$("#bt2").on('click', function() { //在test2元素前后插入集合中每个匹配的元素,不支持多参数 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))}...

jQuery zClip插件实现复制页面内容到剪贴板

jQuery库和zclip插件<scripttype="text/javascript"src="js/jQuery-1.8.1.min.js"></script><scriptsrc="js/jQuery.zclip.min.js"></script>下面是一个小demo,主要是复制文本框中的链接到剪贴板。HTML<inputtype="text"value="Web前端之家"id="link"><spanid="copyBtn">复制链接</span>然后加入脚本<script>$('#copyBtn').zclip({path:"ZeroClipboard.swf",copy:function(){return$('#link').val();     }});</script>然后就可以直接打开网页测试了,这只是一个简单的小应用,希望大家可以迅速掌握。...

jQuery实现select模糊查询(反射机制)

jQuery.select.js如下: (function($) { $.selectSuggest = function(target, data, itemSelectFunction) { var defaulOption = {  suggestMaxHeight: '200px',//弹出框最大高度  itemColor : '#000000',//默认字体颜色  itemBackgroundColor:'RGB(199,237,204)',//默认背景颜色  itemOverColor : '#ffffff',//选中字体颜色  itemOverBackgroundColor : '#C9302C',//选中背景颜色  itemPadding : 3 ,//item间距  fontSize : 12 ,//默认字体大小  alwaysShowALL : true //点击input是否展示所有可选项  };  var maxFontNumber = 0;//最大字数  var currentItem;  var suggestContainerId = target + "-suggest";  var suggestContainerWidth = $('#' + target).innerWidth();  var suggestContainerLeft = $('#' + target).offset().left;  var suggestContainerTop = $('#' + target).offset().top + $('#' + target).outerHeight();  var showClickTextFunction = function() {  $('#' + target).val(this.innerText);  currentItem = null;  $('#' + suggestContainerId).hide();  }  var suggestContainer;  if ($('#' + suggestContainerId)[0]) {  suggestContainer = $('#' + suggestContainerId);  suggestContainer.empty();  } else {  suggestContainer = $('<div></div>'); //创建一个子<div>  }  suggestContainer.attr('id', suggestContainerId);  suggestContainer.attr('tabindex', '0');  suggestContainer.hide();  var _initItems = function(items) {  suggestContainer.empty();   var itemHight=0;  for (var i = 0; i < items.length; i++) {   if(items[i].text.length > maxFontNumber){    maxFontNumber = items[i].text.length;    }   var suggestItem = $('<div></div>'); //创建一个子<div>   suggestItem.attr('id', items[i].id);   suggestItem.append(items[i].text);   suggestItem.css({    'padding':defaulOption.itemPadding + 'px',   'white-space':'nowrap',   'cursor': 'pointer',   'background-color': defaulOption.itemBackgroundColor,   'color': defaulOption.itemColor   });   suggestItem.bind("mouseover",   function() {   $(this).css({    'background-color': defaulOption.itemOverBackgroundColor,    'color': defaulOption.itemOverColor   });   currentItem = $(this);   });   suggestItem.bind("mouseout",   function() {   $(this).css({    'background-color': defaulOption.itemBackgroundColor,    'color': defaulOption.itemColor   });   currentItem = null;   });   suggestItem.bind("click", showClickTextFunction);   suggestItem.bind("click", itemSelectFunction);   suggestItem.appendTo(suggestContainer);   suggestContainer.appendTo(document.body);  }  }  var inputChange = function() {  var inputValue = $('#' + target).val();  inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");  var matcher = new RegExp(inputValue, "i");  return $.grep(data,  function(value) {   return matcher.test(value.text);  });  }  $('#' + target).bind("keyup",  function() {  _initItems(inputChange());  });  $('#' + target).bind("blur",  function() {   if(!$('#' + suggestContainerId).is(":focus")){   $('#' + suggestContainerId).hide();   if (currentItem) {   currentItem.trigger("click");   }   currentItem = null;   return;   }    });  $('#' + target).bind("click",  function() {  if (defaulOption.alwaysShowALL) {   _initItems(data);  } else {   _initItems(inputChange());  }  $('#' + suggestContainerId).removeAttr("style");  var tempWidth = defaulOption.fontSize*maxFontNumber + 2 * defaulOption.itemPadding + 30;  var containerWidth = Math.max(tempWidth, suggestContainerWidth);  var h = this.scrollHeight;  $('#' + suggestContainerId).css({   'border': '1px solid #ccc',   'max-height': '100px',   'top': suggestContainerTop,   'left': suggestContainerLeft,   'width': containerWidth,   'position': 'absolute',   'font-size': defaulOption.fontSize+'px',   'font-family':'Arial',   'z-index': 99999,   'background-color': '#FFFFFF',   'overflow-y': 'auto',   'overflow-x': 'hidden',   'white-space':'nowrap'  });  $('#' + suggestContainerId).show();  });  _initItems(data);  $('#' + suggestContainerId).bind("blur",  function() {  $('#' + suggestContainerId).hide();  }); } })(jQuery);html如下: <!DOCTYPE html> <html lang="zh_cn">  <head>  <title>select.suggest</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Bootstrap -->  <script src="js/jQuery-1.10.2.js"></script>  <script src="js/jQuery.select.js"></script>  </head>  <body>  <h1>Hello, world!</h1>  <div>   <div>   <div>.col-md-1   </div>   <div style="">    <input id="testInput" type="text" />   </div>   </div>  </div>  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  <!-- Include all compiled plugins (below), or include individual files as needed -->  </body>  <script type="text/javascript">  var datas =[{"id":"2","text":"中国石油"},   {"id":"4","text":"中国建筑"},  {"id":"3","text":"中国移动"},  {"id":"5","text":"中国工商银行"},  {"id":"7","text":"中国铁建"},  {"id":"8","text":"上海汽车集团"},  {"id":"9","text":"中国建设银行"},  {"id":"10","text":"联想集团"}];  var itemSelectFuntion = function(){   alert(this.id + "," + this.innerHTML);  };  $.selectSuggest('testInput',datas,itemSelectFuntion);  </script> </html>...

学习下jQuery的一些基础知识

jQuery的一些基础知识。1、基础 jQuery对象集:  $():jQuery对象集合  获取jQuery对象集中的元素:   使用索引获取包装器中的javascript元素:vartemp=$('img[alt]')[0]   使用jQuery的get方法获取jQuery对象集中的javascript元素:vartemp=$('img[alt]').get(0)   使用jQuery的eq方法获取jQuery对象集中的jQuery对象元素:    $('img[alt]').eq(0)    $('img[alt]').first()    $('img[alt]').last()  jQuery对象集转换成javascript数组:   vararr=$('label+button').toArray()label后面所有同级button元素,转换成javascript数组  jQuery对象集的索引:   varn=$('img').index($('img#id')[0])注意:index()参数是javascript元素   varn=$('img').index('img#id')等同于上一行找不到返回-1   varn=$('img').index()img在同级元素中的索引  向jQuery对象集中添加更多的jQuery对象集:      使用逗号:$('img[alt],img[title]')   使用add方法:$('img[alt]').add('img[title]')   对不同的jQuery对象集中采取不同的方法:    $('img[alt]').addClass('thickBorder').add('img[title]').addClass('');   向jQuery对象集中添加新创建的元素:    $('p').add('<div></div>');  删除jQuery对象集中的元素:   $('img[title]').not('[title*=pu]')   $('img').not(function(){return!$(this).hasClass('someClassname')})   过滤jQuery对象集:    $('td').filter(function(){returnthis.innerHTML.match(^\d+$)})过滤包含数字的td   获取jQuery对象集的子集    $('*').slice(0,4)包含前4个元素的新的jQuery对象集    $('*').slice(4)包含前4个元素的新的jQuery对象集    $('div').has('img[alt]')  转换jQuery对象集中的元素   varallIds=$('div').map(function(){    return(this.id==undefined)?null:this.id;   }).get();通过get方法转换成javascript数组  遍历jQuery对象集中的元素   $('img').each(function(n){    this.alt='这是第['+n+']张图片,图片的id是'+this.id;   })   $([1,2,3]).each(function(){alert(this);})  使用元素间关系获取jQuery对象集   $(this).closest('div')比如触发的按钮在哪个div中发生   $(this).siblings('button[title="Close"]')所有同级元素,不包含本身   $(this).children('.someclassname')所有子节点元素,不包含重复子节点   $(this).closest('')临近祖先元素   $(this).contents()由元素内容组成的jQuery对象集,比如可以获取<iframe>元素内容   $(this).next('.someclassname')下一个同级元素   $(this).nextAll()后面所有的同级元素   $(this).nextUntil('.someclassname')后面所有的同级元素直到遇到目标元素   $(this).offsetParent()离jQuery对象集最近的父辈元素   $(this).parent()直接父元素   $(this).parents()所有父元素   $(this).parrentsUntil()所有父元素,直到目标父元素   $(this).prev()上一个同级元素   $(this).prevAll()之前的所有同级元素   $(this).prevTntl()之前的所有同级元素,直到目标元素  其它获取jQuery对象集的方式   $(this).find(pspan)  判断是否是某个jQuery对象集   varhasImg=$('*').is('img'); jQuery方法:  $().hide()  $().addClass('')  $().html('')  $('a').size()元素数量  jQuery选择器:   $('p:even')     $('tr:nth-child(1)')   $('body>div')直接子元素   $('a[href=$='pdf']')根据属性选择   $(div:has(a))过滤 jQuery函数:  $.trim() jQuery执行时间:  $(document).ready(function(){});  $(function(){}); 创建DOM元素:  $('<p></p>').insertAfter();  $('<img>',{   src:'',   alt:'',   title:'',   click:function(){}  }).css({   cursor:'pointer',   border:'',   padding:'',   backgroundColor:'white'  }).append(''); jQuery扩展:  $.fn.disable=function(){   returnthis.each(function(){    if(this.disabled!=null)this.disabled=true;   })  };  $('').disable(); jQuery测试元素是否存在:  if(item)(){}else{}宽松测试  if(item!=null)推荐测试,能把null和undefined区别开2、选择要操作的元素 根据标签名:$('a')   根据id:$('#id') 根据类名:$('.someclassname') 满足多个条件:$('a#id.someclassname')或$('div,span') 某个元素的所有子节点:$(pa.someclassname) 某个元素的直接子节点:$(ul.myList>li) 根据属性名:  $(a[href^='http://'])以...开头  $(href$='.pdf')以...结尾  $(form[method])包含method属性的form  $(intput[type='text'])  $(intput[name!=''])  $(href*='some')包含 某元素后的第一个元素:$(E+F)匹配的是F,F是E后面的第一个元素 某元素后的某一个元素:$(E~F)匹配的是F,F是E后面的某一个元素 通过位置:  $(li:first)第一个li  $(li:last)最后一个li  $(li:even)偶数行li  $(li:odd)奇数行li  $(li:eq(n))第n个元素,索引从0开始  $(li:gt(n))第n个元素之后的元素,索引从0开始  $(li:lt(n))第n个元素之前的元素,索引从0开始  $(ul:first-child)列表中的第一个li  $(ul:last-child)列表中的最后一个li  $(ul:nth-child(n))列表中的第n个li  $(ul:only-child)没有兄弟li的ul  $(ul:nth-child(even))列表中的偶数行li,odd为计数行li  $(ul:nth-child(5n+1))列表中被5除余1的li 通过过滤器:  $(input:not(:checkbox))  $(':not(img[src*="dog"])')  $('img:not([src*="dog"])')  $(div:has(span))  $('tr:has(img[src$="pu.png"])')  $(tr:animated)处于动画状态的tr  $(input:button)包括type类型为button,reset,submit的Input  $(input:checkbox)等同于$(input[type=checkbox])  $(span:contains(food))包含文字food的span  $(input:disabled)禁用  $(input:enabled)启用  $(input:file)等同于$(input[type=file])  $(:header)h1到h6  $(input:hidden)  $(input:image)等同于$(input[type=image])  $(:input)包括input,select,textarea,button元素  $(tr:parent)  $(input:password)等同于$(input[type=password])  $(input:radio)等同于$(input[type=radio])  $(input:reset)等同于$(input[type=reset])或$(button[type=reset])  $('.clssname:selected')  $(input:submit)等同于$(input[type=submit])或$(button[type=submit])  $(input:text)等同于$(input[type=text])  $(div:visible)3、处理DOM元素   操作元素的属性:  $('*').each(function(n){   this.id=this.tagName+n;  }) 获取属性值:$('').attr(''); 设置属性值:  $('*').attr('title',function(index,previousValue){   returnpreviousValue+'Iamelement'+index+'andmynameis'+this.id;  })为一个属性设置值  $('input').attr({   value:'',   title:''  });为多个属性设置值 删除属性:  $('p').removeAttr('value'); 让所有链接都在新窗口中打开:  $('a[href^="http://"]').attr('target',"_blank"); 避免表单多次提交:  $("form").submit(function(){   $(":submit",this).attr("disabled","disabled");  }) 添加类名:$('#id').addClass('') 删除类名:$('#id').removeClass('') 切换类名:$('#id').toggleClass('')存在就删除类名,不存在就添加类名 判断是否含有类名:$('p:first').hasClass('')$('p:first').is('') 以数组形式返回类名列表:  $.fn.getClassNames=function(){   varname=this.attr('someclsssname');   if(name!=null){    returnname.split("");   }   else   {    return[];   }  } 设置样式:  $('div.someclassname').css(function(index,currentWidth){   returncurrentWidth+20;  });  $('div').css({   cursor:'pointer',   border:'1pxsolidblack',   padding:'12px12px20px20x',   bacgroundColor:'White'  }); 有关尺寸:  $(div).width(500)  $('div').height()  $('div').innerHeight()  $('div').innerWidth()  $('div').outerHeight(true)  $('div').outerWidth(false) 有关定位:  $('p').offset()相对于文档的参照位置  $('p').position()偏移父元素的相对位置  $('p').scrollLeft()水平滚动条的偏移值  $('p').scrollLeft(value)  $('p').scrollTop()  $('p').scrollTop(value) 有关元素内容:  $('p').html()  $('p').html('')  $('p').text()  $('p').text('') 追加内容  在元素末尾追加一段html:$('p').append('<b>sometext</b>');  在元素末尾dom中现有的元素:$('p').append($(a.someclassname))  在元素开头追加:$("p").prepend()  在元素的前面追加:$("span").before()  在元素的后面追加:$("span")after()  把内容追加到末尾:appendTo(targets)  把内容追加到开头:prependTo(targets)  把内容追加到元素前面:insertBefore(targets)  把内容追加到元素后面:$('<p></p>').insertAfter('pimg'); 包裹元素:  $('a.someclassname').wrap("<divclass='hello'></div>")  $('a.someclassname').wrap($("div:first")[0])  $('a.someclassname').wrapAll()  $('a.someclassname').wrapInner()  $('a.someclassname').unWrap() 删除元素:  $('.classname').remove()删除元素,绑定到元素上的事件和数据也会被删除  $('.classname').detach()删除元素,但保留事件和数据  $('.classname').empty()不删除元素,但清空元素内容 复制元素:  $('img').clone().appendTo('p.someclassname')  $('ul').clone().insertBefore('#id') 替换元素:  $('img[alt]').each(function(){   $(this).replaceWith('<span>'+$(this).attr('alt')+'</span>');  })  $("p").replaceAll("<b></b>") 关于表单元素的值:  $('[name="radioGroup"]:checked').val()获取单选按钮的值,如果没有选中一个,返回undefined  varcheckboxValues=$('[name="checkboxGroup"]:checked').map(function(){   return$(this).val();  }).toArray();获取多选框的值  对于<selectid="list"multiple="multiple">使用$('#list').val()返回值的数组  $('input').val(['one','two','three'])如果单选框或复选框与数组中的元素匹配,则选中状态...

了解过jQuery validate插件中表单验证吗?

jQueryvalidate插件中表单验证吗?一、目的为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈。二、validate插件简介  validate()是插件的核心方法,定义了基本的校验规则和一些有用的配置项。rule:设置表单的验证规则;messages:设置表单不符合验证规则的提示信息;debug:如果这个参数为true,那么表单还会提交,只进行检查,调试时十分方便。required:必填minlength:最小长度maxlength:最大长度rangelength:长度范围,以数组呈现[2,10],表示表单输入长度为2到10位remote:可以通过发现GET或者POST请求进行远程验证,与Ajax的验证进行比较。就是通过ajax实现的{   url:   type:默认为GET请求   data:发送的数据}发送GET请求例子:check:{          required:true,          remote:{            url:"__CONTROLLER__/check?check="+$("#icode").val            //__CONTROLLER__表示当前控制器          }}基本的校验规则序号规则描述1required:true必须输入的字段。2remote:"check.php"使用ajax方法调用check.php验证输入值。3email:true必须输入正确格式的电子邮件。4url:true必须输入正确格式的网址。5date:true必须输入正确格式的日期。日期校验ie6出错,慎用。6dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。7number:true必须输入合法的数字(负数,小数)。8digits:true必须输入整数。9creditcard:必须输入合法的信用卡号。10equalTo:"#field"输入值必须和#field相同。11accept:输入拥有合法后缀名的字符串(上传文件的后缀)。12maxlength:5输入长度最多是5的字符串(汉字算一个字符)。13minlength:10输入长度最小是10的字符串(汉字算一个字符)。14rangelength:[5,10]输入长度必须介于5和10之间的字符串(汉字算一个字符)。15range:[5,10]输入值必须介于5和10之间。16max:5输入值不能大于5。17min:10输入值不能小于10。validator对象validator.form()验证表单是否有效,返回true或者false;validator.element(element)验证表单中某个元素是否有效,返回true或者false;validator.resetForm()把表单恢复到验证前原来的状态;validator.showErrors(error)针对元素显示特定的错误信息;validator.numberOfInvalids()返回无效的元素数量;validator对象的静态方法jQuery.validator.addMethod()增加自定义的验证方法; (即$.validator.addMethod())jQuery.validator.format()格式化字符串,用参数代替模板中的{n};jQuery.validator.setDefaults()修改插件默认设计;jQuery.validator.addClassRules()为某些包含名为name的class增加组合验证类型。$.validator.addClassRules({  txt:{    required:true,    rangelength:[2,10]  }})//这时class="txt"的类都具备了这个两个验证规则获取表单元素的验证规则:$("#username").rules();为表单元素添加验证规则:$("#username").rules('add',rules);为表单元素删除验证规则:$("#username").rules('remove',rules);三、正则表达式常用正则表达式:用户名的正则表达式验证:/^[\w\u4e00-\u9fa5]{2,10}/g(含汉字)用户名验证:/^\w{2,10}$/(不含汉字,只允许英文字母、数字和下画线,长度为2-10位)QQ号验证:/^[1,9][0,9]{4,19}$/(第一位数字不为0,5-19位数字)邮箱验证:/^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i(不区分大小写)密码验证:/^\w{6,16}$/(只允许6-16位英文字母、数字和下画线)手机号验证:/^1[3,5,7,8]\d{9}$/URL验证:/^http:\/\/[a-z\d-]+(\w\/)+)$/i$(document).ready(function(){   $("#table").validate({     rules:{       admin_name:{         required:true,         checkName:true,       },       name:{         required:true,                },       admin_pwd:{         required:true,         checkPwd:true,       },       con_pwd:{         required:true,         equalTo:admin_pwd,       },       email:{         required:true,         checkEmail:true,       },       qq:{         required:true,         checkQQ:true,       },       s_page:{         url:true,                },       check:{         //required:true,         //remote:{           //url:"__CONTROLLER__/check?check="+$("#icode").val,           //__CONTROLLER__表示当前控制器           //dataType:"json",         //}       }     },     messages:{       admin_name:{         required:"*必填!",         rangelength:"*长度为2到10位!",       },       name:{         required:"*必填!",       },       admin_pwd:{         required:"*必填!",         rangelength:"*长度为6到16位!",       },       con_pwd:{         required:"*必填!",         equalTo:"*两次输入的密码不一致!"       },       email:{         required:"*必填!",         email:"*请输入正确的邮箱!",       },       qq:{         required:"*必填!",       },       s_page:{         url:"*请输入正确的网页地址!",       },       check:{         required:"*必填!",         remote:"*验证码有误!",       },     },     //是否在获取焦点时验证     //onfocusout:false,     //是否在敲击键盘时验证     //onkeyup:false,     //提交表单后,(第一个)未通过验证的表单获得焦点     focusInvalid:true,     //当未通过验证的元素获得焦点时,移除错误提示     focusCleanup:true,   });      //自定义正则表达示验证方法   $.validator.addMethod("checkQQ",function(value,element,params){       var checkQQ = /^[1-9][0-9]{4,19}$/;       return this.optional(element)||(checkQQ.test(value));     },"*请输入正确的QQ号码!");        $.validator.addMethod("checkEmail",function(value,element,params){       var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;       return this.optional(element)||(checkEmail.test(value));     },"*请输入正确的邮箱!");        $.validator.addMethod("checkName",function(value,element,params){       var checkName = /^\w{2,10}$/g;       return this.optional(element)||(checkName.test(value));     },"*只允许2-10位英文字母、数字或者下画线!");      $.validator.addMethod("checkPwd",function(value,element,params){       var checkPwd = /^\w{6,16}$/g;       return this.optional(element)||(checkPwd.test(value));     },"*只允许6-16位英文字母、数字或者下画线!"); });OK,就这样啦,大家有兴趣去学习下吧。...

学习jQuery数组处理代码详解(含实例演示)

jQuery数组处理代码详解(含实例演示)。演示所用数组。var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤'];1.$.each遍历示例[常用]$.each(_mozi,function(key,val){ //回调函数有两个参数,第一个是元素索引,第二个为当前值 alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val); });2.$.grep()过滤数组[常用]$.grep(_mozi,function(val,key){ //过滤函数有两个参数,第一个为当前元素,第二个为元素索引 if(val=='墨子'){ alert('数组值为 墨子 的下标是: '+key); } }); var _moziGt1=$.grep(_mozi,function(val,key){ return key>1; }); alert('_mozi数组中索引值大于1的元素为: '+_moziGt1); var _moziLt1=$.grep(_mozi,function(val,key){ return key>1; },true); //此处传入了第三个可靠参数,对过滤函数中的返回值取反 alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);3.$.map()按给定条件转换数组[一般]var _mapArrA=$.map(_mozi,function(val){ return val+'[新加]'; }); var _mapArrB=$.map(_mozi,function(val){ return val=='墨子' ? '[只给墨子加]'+val : val; }); var _mapArrC=$.map(_mozi,function(val){ //为数组元素扩展一个新元素 return [val,(val+'[扩展]')]; }); alert('在每个元素后面加\'[新加]\'字符后的数组为: '+ _mapArrA); alert('只给元素 墨子 添加字符后的数组为: '+ _mapArrB); alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '+_mapArrC);4.$.inArray()判断值是否存在于数组中[常用]var _exist=$.inArray('墨子',_mozi); var _inexistence=$.inArray('卫鞅',_mozi) if(_exist>=0){     alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist); } if(_inexistence<0){     alert('卫鞅 不存在于数组_mozi中!,返回值为: '+_inexistence+'!'); }5.$.merge()合并两个数组[一般]//原生concat()可能比它还简洁点 _moziNew=$.merge(_mozi,['鬼谷子','商鞅','孙膑','庞涓','苏秦','张仪']) alert('合并后新数组长度为: '+_moziNew.length+'. 其值为: '+_moziNew);6.$.unique()过滤数组中重复元素[不常用]var _h2Arr=$.makeArray(h2obj); //将数组_h2Arr重复一次 _h2Arr=$.merge(_h2Arr,_h2Arr); var _curLen=_h2Arr.length; _h2Arr=$.unique(_h2Arr); var _newLen=_h2Arr.length; alert('数组_h2Arr原长度值为: '+_curLen+' ,过滤后为: '+_newLen +' .共过滤 '+(_curLen-_newLen)+'个重复元素')7.$.makeArray()类数组对象转换为数组[不常用]var _makeArr=$.makeArray(h2obj); alert('h2元素对象集合的数据类型转换为: '+_makeArr.constructor.name);8.$.toArray()将所有DOM元素恢复成数组[不常用]var _toArr=$('h2').toArray(); alert('h2元素集合恢复后的数据类型是: '+_toArr.constructor.name);...

如何玩转jQuery之each遍历循环

jQuery之each遍历循环,大晚上的学习下啦。1、选择器+遍历$('div').each(function (i){  i就是索引值  this 表示获取遍历每一个dom对象});2、选择器+遍历$('div').each(function (index,domEle){  index就是索引值 domEle 表示获取遍历每一个dom对象});3、更适用的遍历方法(1).先获取某个集合对象(2).遍历集合对象的每一个元素var d=$("div");$.each(d,function (index,domEle){ d是要遍历的集合 index就是索引值 domEle 表示获取遍历每一个dom对});下面看下jQuery遍历-each()方法var totalMoney = $("#money").val(); //获取 id="money"元素的value值var monthMoney = 0; //获取 具有 class="month" 的input元素 $("input.month").each(function(){  var monthVal = $.trim($(this).val()); //去除空格  if(monthVal.length > 0){ //非空值    monthMoney = accAdd(monthMoney,monthVal); //另外写的 浮点型相加 函数  }//欢迎加入全栈开发交流圈一起学习交流:864305860});//面向1-3年前端人员if(monthMoney > totalMoney){  alert("每月分配金额累计大于总预算金额,请重新填写!");//帮助突破技术瓶颈,提升思维能力  return false;}...

如何处理jQuery插件版本冲突

jQuery插件版本冲突的处理方法。分享给大家供大家参考,具体如下:jQuery的某个插件当有多个版本同时可能会有冲突,导致代码错误参考typeahead的处理方法,可以在插件中增加noconflict方法来解决这个问题(在进入版本的时候讲老版本保存,退出的时候还原老版本)demo如下:<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <script src="jQuery.js"></script></head><body><div>  你好</div><script>  (function ($) {    $.fn.myshowHtml = function () {      alert("我是老版本:" + this.html());    }  })(window.jQuery);  (function ($) {    var old = $.fn.myshowHtml;    $.fn.myshowHtml = function () {      alert("我是新版本:" + this.html());    }    $.fn.myshowHtml.noConflict = function () {      $.fn.myshowHtml = old;      return this;    };  })(window.jQuery);  $(function () {    $(".container").myshowHtml();    $.fn.myshowHtml.noConflict();    $(".container").myshowHtml();  })</script></body></html>...

学习用 jQuery操作表格table方法和应用

jQuery操作表格table方法和应用。虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Tabletrtd常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率。1.鼠标移动行变色$(“#table1tr”).hover(function(){$(this).children(“td”).addClass(“hover”)},function(){$(this).children(“td”).removeClass(“hover”)})方法二:$(“#table1tr:gt(0)”).hover(function(){$(this).children(“td”).addClass(“hover”);},function(){$(this).children(“td”).removeClass(“hover”);});2.奇偶行不同颜色$(“#table1tbodytr:odd”).css(“background-color”,“#bbf”);$(“#table1tbodytr:even”).css(“background-color”,”#ffc”);$(“#table1tbodytr:odd”).addClass(“odd”)$(“#table1tbodytr:even”).addClass(“even”)3.隐藏一行$(“#table1tbodytr:eq(3)”).hide();4.隐藏一列$(“#table1trtd::nth-child(3)”).hide();方法二:[html]viewplaincopy("#table1 tr").each(function(){("#table1 tr").each(function(){(“td:eq(3)”,this).hide()});5.删除一行//删除除第一行外的所有行$(“#table1tr:not(:first)”).remove();//删除指定行$(“#table1tr:eq(3)”).remove();6.删除一列//删除除第一列外的所有列$(“#table1trth:not(:nth-child(1))”).remove();$(“#table1trtd:not(:nth-child(1))”).remove();//删除第一列$(“#table1trtd::nth-child(1)”).remove();7.得到(设置)某个单元格的值//设置table1,第2个tr的第一个td的值。$(“#table1tr:eq(1)td:nth-child(1)”).html(“value”);//获取table1,第2个tr的第一个td的值。$(“#table1tr:eq(1)td:nth-child(1)”).html();8.插入一行:<strong>//在第二个tr后插入一行("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter(("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter((“#table7tr:eq(1)”));9、获取每一行指定的单元格的值vararr=[];$(“#table1trtd:nth-child(1)”).each(function(key,value){arr.push($(this).html());});varresult=arr.join(‘,’);10、全选或全不选//方法一://全选或全不选此传入的参数为event如:checkAll(event)functioncheckAll(evt){evt=evt?evt:window.event;varchall=evt.target?evt.target:evt.srcElement;vartbl=$(“#table1”);vartrlist=tbl.find(“tr”);for(vari=1;i<trlist.length;i++){vartr=$(trlist[i]);varinput=tr.find(“INPUT[type=‘checkbox’]”);input.attr(“checked”,chall.checked);}}//方法二://全选或全不选此传入的参数为this如:checkAll(this)functioncheckAll(evt){vartbl=$(“#table1”);vartrlist=tbl.find(“tr”);for(vari=1;i<trlist.length;i++){vartr=$(trlist[i]);varinput=tr.find(“INPUT[type=‘checkbox’]”);input.attr(“checked”,evt.checked);}}//方法三://全选或全不选此传入的参数为this如:checkAll(this)functioncheckAll(evt){$(“#table1tr”).find(“input[type=‘checkbox’]”).each(function(i){$(this).attr(“checked”,evt.checked)});}//方法四://全选或全不选此传入的参数为this如:checkAll(this)functioncheckAll(evt){$(“#table1tr”).find(“input[type=‘checkbox’]”).attr(“checked”,evt.checked);}11、客户端动态添加行、删除行functionbtnAddRow(){//行号是从0开始,最后一行是新增、删除、保存按钮行故减去2varrownum=$(“#table1tr”).length-2;varchk=““;vartext=““;varsel=“<optionvalue=‘1’>男<optionvalue=‘0’>女“;varrow=“”+chk+”<td>“+text+”<td>“+sel+”<td>“+text+”<td>“+text+”“;(row).insertAfter((row).insertAfter((“#table1tr:eq(“+rownum+”)”));}//客户端删除一行//每次只能删除一行,删除多行时出错functionbtnDeleteRow(){$(“#table1tr”).find(“input[type=‘checkbox’]”).each(function(i){if($(this).attr(“checked”)){if(i!=0)//不能删除行标题{$(“#table1tr:eq(“+i+”)”).remove();}}});}//这个比上面的要好,可以一下删除多个记录functionbtnDeleteRow(){$(“#table1tr”).each(function(i){varchk=$(this).find(“input[type=‘checkbox’]”);if(chk.attr(“id”)!=”checkall”)//不能删除标题行{if(chk.attr(“checked”)){$(this).remove();}}});}//客户端保存functionbtnSaveClick(){//find()方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值//$(“#table1trtd”).find(“input[type=‘text’]”||“select”).each(function(i){//alert($(this).val());//});$(“#table1tr”).find(“td”).each(function(i){if($(this).find(“input[type=‘text’]”).length>0){alert($(this).find(“input[type=‘text’]”).val());}elseif($(this).find(“select”).length>0){alert($(this).find(“select”).val());}});}...

jQuery常用函数小应用

jQuery常用函数小应用。1.delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。jQuery1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行,也可以用于自定义队列。duration:延时时间,单位:毫秒queueName:队列名词,默认是Fx,动画队列。例:头部与底部延迟加载动画效果$(document).ready(function() {  $('#header') .css({ 'top':-50 }) .delay(1000).animate({'top': 0}, 800);  $('#footer') .css({ 'bottom':-15 }) .delay(1000).animate({'bottom': 0}, 800); });2.jQuerylive(type,fn)委派事件实现Query1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。目前支持click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,keydown,keypress,keyup。还不支持blur,focus,mouseenter,mouseleave,change,submit与bind()不同的是,live()一次只能绑定一个事件。这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。.live()与流行的liveQuery插件很像,但有以下几个主要区别:.live目前只支持所有事件的子集,支持列表参考上面的说明。.live不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。.live没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。要移除用live绑定的事件,请用die方法用法示例:<div class=”myDiv”></div>jQuery:$(“.myDiv”).live(“click”, function(){alert(“clicked!”);});如果使用javascript动态创建一个class为mydiv的元素,点击元素依然会有弹出。为什么使用live后就有了呢?这是因为jQuery利用了事件的冒泡机制,直接把事件绑定在了document上,然后通过event.target找出事件的来源。这跟jQuery.livequery插件不一样,jQuery.livequery每20毫秒做一次检查,如有新生成则重新绑定一次事件。使用live当然有利也有弊:好处就是:元素更新时不用反复去定义事件。坏处就是:把事件绑定在document上会在页面上每一个元素都呼叫一次,如使用不当会严重影响性能。而且不支持blur,focus,mouseenter,mouseleave,change,submit。2.移除live绑定的事件在jQuery里,使用live来绑定事件,若想移除该事件,要使用die方法。如:$(“.myDiv”).die("click");这样就好将绑定的click事件移除掉。3.jQueryoffset(),position()获得绝对,相对位置的坐标方法获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin:0;padding:0;)var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left;例如:$(".produc a span").click(function(){ $('body, html').animate({scrollTop:$('#buy').offset().top }, 'slow'); });获取相对(父元素)位置:var X = $('#DivID').position().top; var Y = $('#DivID').position().left; var left = $("selector").offset().left;//元素相当于窗口的左边的偏移量var top = $("selector").offset().top;//元素相对于窗口的上边的偏移量var pleft = $("selector").scrollLeft();//元素相对于滚动条左边的偏移量var pTop = $("selector").scrollTop();//元素相对于滚动条顶部的偏移量4.jQuery获取鼠标位置 $(function () {      //e为事件名;      $(document).mousemove(function (e) {        $("p").text("X:" + e.pageX + "  Y:" + e.pageY);      });    });5.jQuery判断某个元素是否含有某个class,是否存在某些属性,怎样移除某些属性。在jQuery编码中,我们会判断元素是否存在某个属性.比如是否包含class="new"的样式呢.jQuery判断就非常简单了,因为有hasClass这个方法$("input[name=new]").hasClass("new")即可判断.这时就没有现成的方法了.如果存在某个属性$("#aid").attr("rel")会返回rel的值,如果不存在rel属性则会返回"undefined"undefined就是undefined类型,if($("#aid").attr("rel")=="undefined")这个判断可能不成立.因为类型不相同.建议使用if(typeof($("#aid").attr("rel"))=="undefined")即可。jQuery移除某个jQuery对象的某个属性:$(".main").removeAttr("style");6.jQuerystop()的用法(清除动画积累的有效方法)1、stop([stopAll],[gotoEnd])方法有两个参数(当然可以不传或直传一个),其中stopAll的意思是清除之后的所有动画。gotoEnd的意思是,执行完当前动画。2、stopAll==true时,停止队列中的所有动画,stopAll==false时,只停止队列中的当前动画,后续动画继续执行。3、gotoEnd==true时,立即跳到当前动画的末尾,gotoEnd==false时,停在当前状态。且gotoEnd只有在设置了stopAll的时候才起作用4、在项目中,如果不进行动画队列清理,就会产生动画积累的问题。因此在写入动画时,最好先清除队列中的重复动画。在项目中,例如做下拉二级导航效果,用到jQuery的slideDown()与slideUp()方法,当鼠标快速晃动后,如果不进行动画队列清理,就会产生动画积累,出现问题。例如:$(".nav li.has_list").hover(function(){  $(this).children("a").addClass("curr");  $(".nav li.has_list").children("div").stop(false,true);  $(this).children("div").slideDown(400).end();              },function(){  $(this).children("a").removeClass("curr");  $(".nav li.has_list").children("div").stop(false,true);  $(this).children("div").slideUp(400).end();  });以上内容就是本文关于jQuery常用函数与方法汇总,希望大家喜欢。...

如何用jQuery获取table中行id和td值

jQuery获取table中行id和td值<%@pagelanguage="java"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();%><!DOCTYPEhtml><html><head><title>点击</title><metacontent="IE=edge"http-equiv="X-UA-Compatible"><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><metahttp-equiv="Content-Language"content="zh-cn"/><metaname="author"content="linjiqin218@126.com"/><metaname="Copyright"content="parami|脚本之家"/><metahttp-equiv="pragma"content="no-cache"><metahttp-equiv="cache-control"content="no-cache"><metahttp-equiv="expires"content="0"><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="Thisismypage"><jsp:includepage="/demo/base/js_bootstrap.jsp"/><scripttype="text/javascript">$(function(){//用jQuery获取table中td值$("#mytabletd").click(function(){alert("tabletd值:"+$(this).text());});//jQuery获取table中点击位置所在行的id$("#mytabletd").click(function(){//td的idalert($(this).attr("id"));//tr的idalert($(this).parent().attr("id"));});});</script></head><body><tableid="mytable"width="708px;"cellpadding="5"cellspacing="1"><tbody><trbgcolor="#DEE9F4"id="tr_1"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr><trbgcolor="#DEE9F4"id="tr_2"><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td></tr><trbgcolor="#DEE9F4"id="tr_3"><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tdbgcolor="red">10</td><td>11</td></tr><trbgcolor="#DEE9F4"id="tr_4"><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr></tbody></table></body></html>...

学习jQuery事件的ready()方法

jQuery代码内,假设jQuery的版本是jQuery-1.11.3.js。ready的关键代码(3507~3566行),关键代码用红色标出:jQuery.ready.promise = function( obj ) {  if ( !readyList ) {    readyList = jQuery.Deferred();    // Catch cases where $(document).ready() is called after the browser event has already occurred.    // we once tried to use readyState "interactive" here, but it caused issues like the one    // discovered by ChrisS here: http://bugs.jQuery.com/ticket/12282#comment:15    if ( document.readyState === "complete" ) {      // Handle it asynchronously to allow scripts the opportunity to delay ready      setTimeout( jQuery.ready );    // Standards-based browsers support DOMContentLoaded    } else if ( document.addEventListener ) {      // Use the handy event callback      document.addEventListener( "DOMContentLoaded", completed, false );      // A fallback to window.onload, that will always work      window.addEventListener( "load", completed, false );    // If IE event model is used    } else {      // Ensure firing before onload, maybe late but safe also for iframes      document.attachEvent( "onreadystatechange", completed );      // A fallback to window.onload, that will always work      window.attachEvent( "onload", completed );      // If IE and not a frame      // continually check to see if the document is ready      var top = false;      try {        top = window.frameElement == null && document.documentElement;      } catch(e) {}      if ( top && top.doScroll ) {        (function doScrollCheck() {          if ( !jQuery.isReady ) {            try {              // Use the trick by Diego Perini              // http://javascript.nwbox.com/IEContentLoaded/              top.doScroll("left");            } catch(e) {              return setTimeout( doScrollCheck, 50 );            }            // detach all dom ready events            detach();            // and execute any waiting functions            jQuery.ready();          }        })();      }    }  }  return readyList.promise( obj );};上面的代码在触发ready时可以分成两部分1.标准浏览器下的触发当浏览器是基于标准浏览器时,会在加载完DOM结构后触发“DOMContentLoaded”事件,jQuery内部就用此事件作为ready的触发源。document.addEventListener( "DOMContentLoaded", completed, false );2.IE浏览器下的触发当浏览器是IE浏览器时,因为IE浏览器(蛋疼并强大着)不支持“DOMContentLoaded”事件,所以只能另谋它法,(function doScrollCheck() {          if ( !jQuery.isReady ) {            try {              // Use the trick by Diego Perini              // http://javascript.nwbox.com/IEContentLoaded/              top.doScroll("left");            } catch(e) {              return setTimeout( doScrollCheck, 50 );            }            // detach all dom ready events            detach();            // and execute any waiting functions            jQuery.ready();          }        })();IE下的做法就是上面代码的红字处,用“document.documentElement.doScroll("left")”的方法去滚动页面,如果没加载完就等个50毫秒后继续滚,直到滚的动后就触发ready。但是,如果页面中有frame的场合,会使用window.onload事件作为ready的触发源。所以在IE下,页面中有frame时,ready也是等到页面内的所有内容加载完成后再触发。jQuery中ready与load事件的区别大家在工作中用jQuery的时候一定会在使用之前这样://document ready$(document).ready(function(){  ...code...})//document ready 简写$(function(){  ...code...})有些时候也会这么写://document load$(document).load(function(){  ...code...})一个是ready一个是load,这两个到底有什么区别呢?今天我们来聊一聊。ready与load谁先执行:大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行。DOM文档加载的步骤:要想理解为什么ready先执行,load后执行就要先聊一下DOM文档加载的步骤:(1) 解析HTML结构。(2) 加载外部脚本和样式表文件。(3) 解析并执行脚本代码。(4) 构造HTML DOM模型。//ready(5) 加载图片等外部文件。(6) 页面加载完毕。//load从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了。但是load要在第(6)步完成之后才执行。ready事件:ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。load事件:load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。总结:相信大家已经了解了ready与load的区别,其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready。...

基于jQuery实现页面滚动时顶部导航显示隐藏

jQuery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下:运行效果截图如下:具体代码如下:引入核心文件<script src="js/jQuery/1.11.1/jQuery.min.js"></script>构建html,margint这个div中为了出现滚动条而建,并无实际作用。<div class="top-title">这是顶部导航条</div><div class="margint"><p>滚动看效果</p><p>滚动看效果</p></div>写入CSS.top-title {background:#e74c3c;color:white;font-size:24px;padding:5px;text-align:center;position: fixed;left:0;top:0;width:100%;transition: top .5s;}.hiddened{top: -90px;}.showed{top:0;z-index: 9999;}top-title中定义了transition:top.5s;是指.5S时间内动画展示top方向数值的改为。如添加hidden类后,top-title会在0.5s内从top的0动画缓冲到-90PX。写入JS$(function(){    var winHeight = $(document).scrollTop();   $(window).scroll(function() {    var scrollY = $(document).scrollTop();// 获取垂直滚动的距离,即滚动了多少     if (scrollY > 550){ //如果滚动距离大于550px则隐藏,否则删除隐藏类      $('.top-title').addClass('hiddened');    }     else {      $('.top-title').removeClass('hiddened');    }     if (scrollY > winHeight){ //如果没滚动到顶部,删除显示类,否则添加显示类      $('.top-title').removeClass('showed');    }     else {      $('.top-title').addClass('showed');    }            });});以上就是基于jQuery实现页面滚动时顶部导航显示隐藏的总体构思,希望大家沿着这个思路完成导航显示隐藏的效果,谢谢大家阅读。...

GitHub工程师为什么选择放弃了jQuery

jQuery的GitHub工程师,将介绍最初GitHub使用jQuery的历史背景、和后来不再需要jQuery的原因,并讲解GitHub如何在不引入其他库、或框架的情况下,通过标准浏览器API,来实现他们需要的功能的。为什么最初需要jQuery我们最近刚刚完成了一个里程碑,成功地从GitHub.com的前端代码的依赖中去掉了jQuery。这标志着这项一点一滴持续了多年的jQuery解耦合工作的完成,以及我们终于可以完全删除这个库了。GitHub.com在2007年末引入了jQuery1.2.1作为依赖。当时距离Google发布Chrome浏览器的第一版,还有一年的时间。当时没有什么标准的方法,通过CSS选择器,来查询DOM元素,也没有标准的方式,来实现元素的视觉动画,而由InternetExplorer倡导的XMLHttpRequest接口,也像许多其他API一样,在各种浏览器上的实现不一致。而jQuery使得操作DOM、定义动画和实现“AJAX”请求,变得十分简单。简单来说,它使得Web开发者可以创建更现代、更动态的效果。最重要的是,通过jQuery在一种浏览器上实现的功能,基本上也能在其他浏览器上运行。在GitHub的早期,许多功能才刚刚起步,有了jQuery,我们的小团队才能迅速地建立原型、并推出新功能,而不需要为每种Web浏览器调整代码。我们还把jQuery简单的接口,作为蓝图来构建扩展库,这些库(pjax,https://github.com/defunkt/jQuery-pjax和Facebox,https://github.com/defunkt/facebox),后来成了GitHub.com前端的其他部分的组成部分。我们会永远感谢JohnResig和其他jQuery贡献者们,创建并维护了这个十分有用、并且在历史上十分重要的库。后来的Web标准多年以后,GitHub成长为拥有数百名工程师的公司,还逐渐组成了一个独立的团队,专门负责我们发送到浏览器上的JavaScript代码的尺寸和质量。我们一直在监视技术债务,而有些技术债务的原因,是那些曾经有价值、但后来随着时间的发展而失去了价值的依赖。而对于jQuery,我们将它与现代浏览器中迅速发展的Web标准做了比较,结果发现:$(selector)可以简单地用querySelectorAll()替换;CSS类名切换,可以通过Element.classList实现;CSS现在支持在样式表中定义视觉动画,无需使用JavaScript;$.ajax请求可以用Fetch标准实现;addEventListener()接口已经十分稳定,足以跨平台使用;我们可以用一个轻量级的库,来封装事件代理模式;jQuery提供的一些语法糖,已随着JavaScript语言的发展,而变得多余。而且,链式语法并不能满足我们直观地书写代码的需要。例如:$('.js-widget').addClass('is-loading').show()这种语法很容易编写,但以我们的标准来看,它并不能很好地传达作者的意图。作者希望页面上只有一个JS-Widget元素、还是有多个?而且,如果我们修改网页代码时,一不小心删掉了JS-Widget类名,浏览器会产生异常并告诉我们发生了错误吗?默认情况下,如果类名不匹配,jQuery会静默地忽略整个表达式,但在我们看来,这种行为与其说是功能,不如说是个Bug。最后一点,我们想使用Flow(https://flow.org/)进行标注,从而在构建时实现静态类型检查。但我们得出结论,链式语法并不能很好地适应静态分析,因为几乎所有jQuery的函数的返回值,都是同一种类型。我们选择Flow、而不是其他库的原因是因为当时像@flowweak模式等特性可以让我们逐渐地、有效地给大量几乎没有任何类型的代码添加类型。总的来说,jQuery解耦合,意味着我们可以更依赖于Web标准,将MDNWeb文档,作为事实上的前端开发标准,方便以后维持代码的灵活性,并最终从打包文件中,去掉一个30KB的依赖,提高页面加载速度、和JavaScript的执行时间。增量解耦合即使确定了最终目标,我们也不能简单地,把所有资源都花在,使用原生JS重写jQuery的事情上。一旦发生什么事情,这种急功近利,会导致许多网站功能倒退,从而不得不花更多时间去解决。我们必须要这样做:设定好度量标准,跟踪jQuery调用次数和全部代码行数的比例,并随时监视该度量,保证它不变或减小,而不会增加。我们不鼓励在任何新代码中使用jQuery。为了使用自动化减轻工作量,我们创建了eslint-plugin-jQuery(https://github.com/dgraham/eslint-plugin-jQuery#readme),如果任何人尝试使用jQuery功能(如$.ajax),它就会造成CI检查失败。旧代码中有大量的ESLint规则违反,这些违反我们都使用eslint-disable规则在代码注释中标注出来了。这样就能尽快进行代码审查、并集思广益。许多旧代码显式地耦合了Pjax和Facebox这两个jQuery插件的外部接口,因此我们在使用原生JS,替换这两者的实现时,尽力保持接口不变。静态检查让我们能更信心地进行重构。许多就代码都与rails-behaviors(http://josh.github.io/rails-behaviors/)有接口,后者是我们在RubyonRails和JS之间的适配器。这种接口会为特定的表单,添加一个AJAX生命周期处理函数。//LEGACYAPPROACH$(document).on('ajaxSuccess','form.js-widget',function(event,xhr,settings,data){//insertresponsedatasomewhereintotheDOM})为避免不得不用新方法,一次性重写整个网站,我们采用了触发伪“*AJAX*”生命周期事件的方式,使这些表单,能像以前一样继续异步提交内容,只不过内部使用的是fetch()。我们定制了一个jQuery,一旦我们认为某个模块不再需要,就把它从定制版本中删掉,使jQuery更灵巧。例如,在删除最后一个jQuery专用的CSS伪类(:visible、:CheckBox等),我们就删掉了Sizzle模块(https://sizzlejs.com/);在使用fetch()替换了最后一个$.ajax调用之后,就删掉了AJAX模块。这样做有两个目的,一是加快JavaScript执行速度,一是确保新功能不会使用被删掉的功能。根据网站访问分析的结果,只要有可能,我们就会删掉支持旧InternetExplorer版本的部分。当某个IE版本的使用率,降到某个阈值之下,我们就不会再为其提供JavaScript,从而得以专注于,支持更多现代浏览器。提早去掉IE8~9的支持,使得我们可以使用更多的原生浏览器功能,不用再勉强进行Polyfill。作为构建GitHub.com前端的新方法的一部分,我们尽可能采用基础的HTML来实现功能,只把JavaScript用作渐进式增强。这样,即使Web表单和其他UI元素上使用了JS,它们也能在禁用了JavaScript的浏览器中运行。一些情况下,我们可以删掉整个旧有行为,不用再使用原生JS重写。通过这些方法(以及多年来积累的其他方法),我们得以逐渐地减小对jQuery的依赖,直到没有一行代码使用它。自定义元素近几年人们谈论得最多的一项技术就是自定义元素,它是个浏览器原生的组件库,也就是说用户无需下载、解析或编译任何框架。我们从2014年起,就根据v0规格,建立了一些自定义元素。但是,由于当时的Web标准依然不明确,所以我们并没有深入研究。直到2017年,Web组件的v1规格发布,而且Chrome和Safari都开始支持,我们才开始在大范围内使用自定义元素。在jQuery迁移过程中,我们寻找适合提取成自定义元素的部分。例如,我们将使用Facebox显示对话框的代码,改成了元素。渐进式增强的思想,也应用到了自定义元素中。就是说,我们尽可能保持标签的内容,仅在标签不能实现的地方,添加新的行为。例如,默认会显示原始的时间戳,然后增强翻译成本地时区内的时间;而如果嵌入到元素中,那么即使没有JavaScript,本身也是交互式的,但会利用提高可用性的功能进行增强。下面是实现自定义元素的例子。// The local-time element displays time in the user's current timezone// and locale.//// Example://   Sep 6, 2018//classLocalTimeElementextendsHTMLElement{staticgetobservedAttributes() {return['datetime']}attributeChangedCallback(attrName, oldValue, newValue) {if(attrName ==='datetime') {constdate =newDate(newValue)this.textContent = date.toLocaleString()}}}if(!window.customElements.get('local-time')) {window.LocalTimeElement = LocalTimeElementwindow.customElements.define('local-time', LocalTimeElement)}我们在试图采用的Web组件功能之一,就是ShadowDOM。ShadowDOM的强大功能,可以给Web带来许多可能性,但也使得它很难polyfill。因为现在的polyfill方式,会给那些操纵与Web组件无关的DOM的代码,也造成大量性能损失,所以还不适合在生产环境中使用。Polyfill我们在转换成标准浏览器功能的过程中,使用了下面这些polyfill。我们尽量仅在绝对必须时——即需要兼容旧版本浏览器时——才使用polyfill。github/eventlistener-polyfill;github/fetch;github/form-data-entries;iamdustan/smoothscroll;javan/details-element-polyfill;jonathantneal/closest;kumarharsh/custom-event-polyfill;marvinhagemeister/request-idle-polyfill;mathiasbynens/Array.from;mathiasbynens/String.prototype.codePointAt;mathiasbynens/String.prototype.endsWith;mathiasbynens/String.prototype.startsWith;medikoo/es6-symbol;nicjansma/usertiming.js;rubennorte/es6-object-assign;stefanpenner/es6-promise;webcomponents/template;webcomponents/URL;webcomponents/webcomponentsjs;WebReflection/url-search-params;yola/classlist-polyfill。...

jQuery模拟福利彩票双色球机选

jQuery模拟福利彩票双色球机选.<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *            {                margin: 0;                padding: 0;            }            div            {                width: 100px;                height: 100px;                border-radius: 50%;                background: red;                float: left;                margin-left: 10px;                box-shadow:2px 2px 2px 2px ;                position: relative;            }            span            {                width: 60px;                height: 60px;                background: white;                position: absolute;                left: 20px;                top: 20px;                text-align: center;                font-size: 50px;                font-weight: bold;                color: greenyellow;            }            #b1            {                background: linear-gradient(to top,blue,#fff);                box-shadow: 2px 2px 2px 2px blue;            }            button                {                width: 100px;                height: 50px;                position: relative;                left: -500px;                top: 120px;            }        </style>    </head>    <body>        <div><span></span></div>        <div><span></span></div>        <div><span></span></div>        <div><span></span></div>        <div><span></span></div>        <div><span></span></div>        <div id="b1"><span></span></div>         <button id="btn">机选一注</button>        <button id="btn1">清空</button>    </body>    <script type="text/javascript">        var ospan=document.getElementsByTagName('span');        var btn=document.getElementById('btn');        var btn1=document.getElementById('btn1');        btn.onclick=function()        {            var arr=[]            btn.disabled=true;            btn1.disabled=true;            reset()            while(arr.length<ospan.length)            {                var n=Math.floor(Math.random()*35+1);               var num=doit(n);                if(arr.indexOf(num)==-1)                 {                    arr.push(num)                }            }//          console.log(arr)                var i=0;        var s=setInterval(function()        {            ospan[i].innerHTML=arr[i]            i++;            if(i>=7)            {                clearInterval(s)                btn.disabled=false;                btn1.disabled=false;            }        },100)    }        function reset()        {            for (var i=0;i<ospan.length;i++)             {                ospan[i].innerHTML=""                         }        }        btn1.onclick=function()        {            reset()        }        function doit(n)        {            if(n<10)            {                return"0"+n            }else            {                return n            }        }    </script></html>...

笔记:jQuery中的的attr与val区别

jQuery中的的attr与val区别.attr(attributeName)attributeName:需要获取属性的名称。获取匹配集中第一个元素的属性值。1.6中attr返回属性的值为undefined,如果没有设置(set)。另外,.attr不应该在普通对象、数组(array)、窗口(window)或者文档中(document)。如果需要获取或者设置DOM属性,则应该使用.prop()方法。  使用.attr方法获取元素属性的值有两个主要优点:方便(Convenience):这个方法可以在jQuery对象上直接调用和串联别的jQuery的方法。跨浏览器的一致性(Cross-browserconsistency):有报告说一些属性值在跨浏览器时的不一致性,甚至在同一浏览器的不同版本上也有不一致性。.attr减少这种不一致性.val()获取匹配集中第一个元素当前的值。.val()就去主要用来获取表单中元素的值,例如input,select或者textarea。不同<inputdata-name="user"id="name"value="aaaa"/>?$('#name').val();/*'aaaa'*/$('#name').attr('data-name');/*user*/下面通过一段代码给大家介绍jQueryattr("value")和val的区别if(!getSetInput||!getSetAttribute){jQuery.attrHooks.value={get:function(elem,name){varret=elem.getAttributeNode(name);returnjQuery.nodeName(elem,"input")?//Ignorethevalue*property*byusingdefaultValueelem.defaultValue:ret&&ret.specified?ret.value:undefined;},}这边返回值的逻辑判断有变化jQuery.nodeName(elem,"input")?elem.defaultValue:ret&&ret.specified?ret.value:undefined;//Ignorethevalue*property*byusingdefaultValue要我们使用defaultValue.JavaScriptattrHooks:{type:{set:function(elem,value){if(!jQuery.support.radioValue&&value==="radio"&&jQuery.nodeName(elem,"input")){//SettingthetypeonaradiobuttonafterthevalueresetsthevalueinIE6-9//Resetvaluetodefaultincasetypeissetaftervalueduringcreationvarval=elem.value;elem.setAttribute("type",value);if(val){elem.value=val;}returnvalue;}}}},而1.8.3代码如下JavaScript//2361行attrHooks:{type:{set:function(elem,value){//Wecan'tallowthetypepropertytobechanged(sinceitcausesproblemsinIE)if(rtype.test(elem.nodeName)&&elem.parentNode){jQuery.error("typepropertycan'tbechanged");}elseif(!jQuery.support.radioValue&&value==="radio"&&jQuery.nodeName(elem,"input")){//SettingthetypeonaradiobuttonafterthevalueresetsthevalueinIE6-9//Resetvaluetoit'sdefaultincasetypeissetaftervalue//Thisisforelementcreationvarval=elem.value;elem.setAttribute("type",value);if(val){elem.value=val;}returnvalue;}}},//Usethevaluepropertyforbackcompat//UsethenodeHookforbuttonelementsinIE6/7(#1954)value:{get:function(elem,name){if(nodeHook&&jQuery.nodeName(elem,"button")){returnnodeHook.get(elem,name);}returnnameinelem?elem.value:null;},set:function(elem,value,name){if(nodeHook&&jQuery.nodeName(elem,"button")){returnnodeHook.set(elem,value,name);}//DoesnotreturnsothatsetAttributeisalsousedelem.value=value;}}},可见1.9删除了attrHooks.value方法导致非IE的attr("value")为undefined或默认值,而IE的attr("value")为""或默认值...

记下jQuery几个方法

jQuery几个方法:$().empty();//该方法会删除当前节点下的所有子节点,请注意当前节点不会被删除$().remove();//该方法会删除当前节点下的所有子节点,请注意当前节点会 被删除$().append('<a>something</a>') //该方法在当前节点的末尾添加这个a标签$().after('<spanstyle="font-family:Arial,Helvetica,sans-serif;"><a>something</a></span>')  //该方法在当前节点后面添加这个a标签相当于添加了一个兄弟元素$().before('<span></span>')同理在特定元素前面增加一个span$().prev();//该方法会找到当前节点的上一个兄弟节点,相邻的上一个兄弟节点$().next();//该方法会找到当前节点的下一个兄弟节点,相邻的下一个兄弟节点$().prevAll();//该方法找到当前节点的之前的所有兄弟节点$().nextAll();//该方法找到当前节点之后的所有兄弟节点$().siblings();//该方法找到当前节点的所有兄弟节点包括之前和之后的//---这些方法括号里面请自行添加选择器 去过滤请注意:兄弟节点和兄弟节点下面的子节点是不同的概念//这些都是简单的方法 复杂的还得参考jQuery的api...

jQuery类数组的应用操作

jQuery的$()函数都返回一个类似数据的jQuery对象,例如$(‘div')将返回div里面的所有div元素包装的jQuery对象。在这种情况下,jQuery提供了几个常用的属性和方法来操作jQuery对象。length:该属性返回jQuery里包含的DOM元素的个数。context:该属性返回获取该jQuery对象传入context参数jQuery:该属性返回jQuery的版本each(fn(index)):该方法是是一个迭代器函数,它将使用fn函数迭代处理jQuery里包含的每个元素。get():该方法返回由jQuery里包含的所有DOM元素组成的数组。get(index):该方法返回jQuery里包含的第index+1个DOM元素。toArray():该将jQuery对象中包含的所有的DOM对象转换成数据。以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助。...

基于jQuery倒计功能(倒计时年月日可自己输入)

jQuery倒计功能(倒计时年月日可自己输入)$(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = ""; //输入的日期 var iRemain = ""; //开始和结束之间相差的毫秒数 var sDate = ""; //倒计的天数 var sHour = ""; //倒计时的小时 var sMin = ""; //倒计时的分钟 var sSec = ""; //倒计时的秒数 var sMsec = ""; //毫秒数 //通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零 function setDig(num,n){ var str = ""+num; while(str.length<n){ str="0"+str } return str; } //获得相差的天,小时,分钟,秒 function getdate(){ //创建开始时间和结束时间的日期对象 var oStartDate = new Date(); var oEndDate = new Date(); //获取文本框的值 tYear = $("#tyear").val(); tMonth = $("#tmonth").val(); tDate = $("#tdate").val(); //设置结束时间 oEndDate.setFullYear(parseInt(tYear)); oEndDate.setMonth(parseInt(tMonth)-1); oEndDate.setDate(parseInt(tDate)); oEndDate.setHours(0); oEndDate.setMinutes(0); oEndDate.setSeconds(0); //求出开始和结束时间的秒数(除以1000) iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;  //总的秒数除以一天的秒数,再取出整数部分,就得出有多少天。 sDate = setDig(parseInt(iRemain/(60*60*24)),3); //总的秒数除以一天的秒数,然后取其中的余数,就是把整数天扣除之后,剩下的总秒数。 iRemain %= 60*60*24;  //剩下的总秒数除以一个小时的秒数,再取整数部分,就是有多少小时。 sHour = setDig(parseInt(iRemain/(60*60)),2) //剩下的总秒数除以一个小时的秒数,再取其余数,这个余数,就是扣除小时这后,剩下的总秒数。 iRemain %= 60*60; //剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。 sMin = setDig(parseInt(iRemain/60),2) //剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。 iRemain%=60; //剩下的秒数 sSec = setDig(iRemain,2); //毫秒数 sMsec = sSec*100;  } //更改显示的时间 function updateShow(){ $(".showdate span").text(tYear+"-"+tMonth+"-"+tDate); $(".count span").each(function(index, element) { if(index==0){ $(this).text(sDate); }else if(index==1){ $(this).text(sHour); }else if(index == 2){ $(this).text(sMin); }else if(index == 3){ $(this).text(sSec); }else if(index == 4){ $(this).text(sMsec); }  }); }  //每一秒执行一次时间更新 function autoTime(){ getdate(); //如果小于零,清除调用自己,并且返回 if(iRemain<0){ clearTimeout(setT); return; } updateShow(); var setT = setTimeout(autoTime,1000);  }  //点击按钮开始计时 $("button").click(function(){ autoTime(); })})记录需要注意的地方:  1.取模运算:  iRemain%=60*60*24;  就是返回余数,在这个实例中的余数,就是把整数拿走后,剩下的秒数。 2.工具函数setDig(num,n)  可以根据传入的参数,自动在传入的数字前加零...

如何基于jQuery获取键盘事件

jQuery简单获取键盘事件的方法。分享给大家供大家参考,具体如下:一、我们什么时候要用到获取键盘事件做web的时候,为了更人性的设计,我们有的时候会用到键盘事件。例如:输入框下拉提示框,通过键盘的上下键盘来选择自己想要的内容,google的输入框的下拉提示。当我们浏览相册的时候,我们可以能过键盘的左右键,来查看相片。当我们浏览长篇小说,用鼠标滚动很容易不知道看到哪一个行了,可以通键盘上下键来进行翻页,这些小细节也是非常重要的。做网站很大程度在于细节的处理。二、jQuery的键盘事情函数种类1.keydown事件是在键盘按下时触发的事件2.keyup事件是在按下键弹起时触发的事件3.keypress事件是在键盘按下时触发的事件keypress和keydown在功能差不多,但是在获取事件的内容上有所不同。二、举例说明<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"dir="ltr"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="/demo/js/jq.js"type="text/javascript"></script></head><body><inputvalue="fi"name="search"id="search_input"maxlength="50"autocomplete="off"><scripttype="text/javascript">$('#search_input').keypress(function(event){alert("keypress");}).keydown(function(event){alert("keydown");}).keyup(function(event){alert("keyup");});</script></body></html>三、试验结果1.在上面的输入框中,输入一个字母r时,第一次会弹出keydown,以后都会提示keypress2.当我们按下pgdn銉时,会先弹出keyup然后在弹出keydown3.当我们按下shift+c时,只会弹出keypress4.当我们按下ctrl+alt时,就不会出现keypress,第一次会出现二个keydown,第二次按的时候,先出现keyup,然后在出现keydown可能性有很多,我们只要试一试常用的銉就可以了。四、获得键盘事件对应的ASCII值<scripttype="text/javascript">$('#search_input').keydown(function(event){alert(event.keyCode);})</script>...

每日一学笔记:jQuery为a绑定点击事件

jQuery为a绑定点击事件$(document).ready(function() {$("a[name='del']").click(function(){Ext.Msg.confirm('提示','你确定要删除该公告吗?',function(button,text){if(button=='yes'){window.location.href="/admin/note!delete.action?id=${id}";}});});$("a[class='del2']").click(function(){Ext.Msg.confirm('提示','你确定要删除该公告吗?',function(button,text){if(button=='yes'){window.location.href="/admin/note!delete.action?id=${id}";}});});});<a name="del">删除</a><a class="del2">删除2</a>...

学习jQuery object and DOM element的笔记

jQueryobjectandDOMelement的笔记。源起:<div id="test1">    <span>text1</span>    <span>text2</span>    <span>text3</span></div>想取得spanelement里面的文本,发现$("#test1span")[0]取出来的不是jQueryobject,只能用$($("#test1span")[0]).text()转为jQuery再取了,但是两个$一起总感觉怪怪的,退而求其次便用了取值$("#test1span")[0].textContentor$("#test1span")[0].innerHTMLjQueryobjectandDOMelementjQueryobject是一种类数组对象(array-like),可以包含一个或者多个DOMelement(s)。而jQueryfunctions的操作是建立在jQueryobject上而不是DOMobject上。eg.jQueryobject “Object[span,span,span]”包含一个或者多个DOMelement“<span>”。访问jQueryobject里面DOMelement的方式:$("selector")[0] // Accesses the first DOM element in this jQuery object$("selector").get(0) // Equivalent to the code above$("selector").get() // Retrieve a true array of DOM elements matched by this selector或者非jQuery方式:document.getElementsByTagName("div") // Return HTMLcollection...

学习jQuery.event的用法和应用

jQuery的一个方法jQuery.event.fix(event||window.event);此方法个浏览器的event对象转换为jQuery.event;如果您的事件是通过jQuery方法绑定的,就不需要进行转换了!jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。1.event.type属性该方法作用是可以获取到时间的类型$("a").click(function(event){alert(event.type);//获取时间类型returnfalse;//阻止链接跳转})以上代码运行后会返回:“click”。2.event.preventDefault()方法该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。3.event.stopPropagation()方法该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。4.event.target属性event.target属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。$("a[href=http://www.jb51.net]").click(function(event){alert(event.target.href);//获取触发事件的<a>元素的href属性值alert(event.target.tagName);//获取触发事件的元素的标签名称returnfalse;//阻止链接跳转})5.event.relatedTarget属性在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法来访问,相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性,在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装,使之能兼容各种浏览器。6.event.pageX/event.pageY属性该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时,那么IE浏览器中是用event/event.y方法,而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条,则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。$(function(){$("a").click(function(event){alert("Currentmouseposition:"+event.pageX+","+event.pageY);//获取鼠标当前相对于页面的坐标returnfalse;//阻止链接跳转});})7.event.which属性该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按钮。$(function(){$("body").mousedown(function(e){alert(e.which);//1=鼠标左键;2=鼠标中键;3=鼠标右键。})})以上代码加载到页面中,用鼠标单击页面时,单击左、中、右键分别返回1、2、3.8.event.metaKey属性针对不同浏览器对键盘中的<ctrl>按键解释不同,jQuery也进行了封装,并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。9.event.originalEvent属性。该方法的作用是指向原始的事件对象。...

jQuery each打印JS对象

jQuery可以用这个方法循环遍历读出对象的值,假如这个对象名称是obj,循环遍历打印它的值:$.each(obj,function(key,val){if($.isPlainObject(val)||$.isArray(val)){subObj(val);}else{alert(key+'='+val);}});...

javascript与jQuery中跳出循环

jQuery:returnfalse相当于break跳出循环returntrue相当于contiune跳出当前循环继续下面的循环javascript停止函数执行return只能用于函数内部...

jQuery遍历table的tr获取td值

jQuery遍历table的tr获取td的值实现方法。html代码:<tbodyid="history_income_list"><tr><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><aclass=""onclick="history_income_del(this);"href="###">删除</a></td></tr><tr><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><aclass=""href="###">删除</a></td></tr><tr><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><inputtype="text"class="input-sinput-winput-hs"></td><tdalign="center"><aclass=""href="###">删除</a></td></tr></tbody>方法一:vartrList=$("#history_income_list").children("tr")for(vari=0;i<trList.length;i++){vartdArr=trList.eq(i).find("td");varhistory_income_type=tdArr.eq(0).find("input").val();//收入类别varhistory_income_money=tdArr.eq(1).find("input").val();//收入金额varhistory_income_remark=tdArr.eq(2).find("input").val();//备注alert(history_income_type);alert(history_income_money);alert(history_income_remark);}方法二:$("#history_income_list").find("tr").each(function(){vartdArr=$(this).children();varhistory_income_type=tdArr.eq(0).find("input").val();//收入类别varhistory_income_money=tdArr.eq(1).find("input").val();//收入金额varhistory_income_remark=tdArr.eq(2).find("input").val();//备注alert(history_income_type);alert(history_income_money);alert(history_income_remark);});...

浅谈叠加jQuery绑定事件的心得

jQuery的学习中我忽略了一个取消绑定事件.unbind()的使用,也不知道绑定事件会累加的情况,结果因为这个原因,让我在项目上栽了坑。只能说自己还太年轻,需要学习掌握的知识还有很多。我遇到的问题我在项目中遇到的状况,一个评价页面,简单的来说就是左右两个表格,ajax分别动态加载学生姓名学号信息和不同科目对学生评价内容两部分,两边表格我都每行写了checkbox并对tabletbodytr绑定click事件执行行选功能,起初我写的是静态页面html,行选功能完全没有问题,后来换成jsp页面,ajax动态加载数据进来后,问题就来了,由于ajax异步请求,两边表格发送请求加载数据有先后,之前静态页面测试好的行选功能就出了问题,每次刷新页面,只有后加载的部分才可以行选,之前加载的部分行选失效。自己控制台打印点击的状态console.log(chkBoxStatus);测试发现前加载的部分总是打印两次falsetrue,而后加载的部分只打印一次false或是true。我之前的行选代码段://行选功能$("tabletbodytr").click(function(event){//遍历tr下的checkbox元素var$check=$(this).find("input[type=checkbox]");//判断非点击checkbox本身if($check.length>0&&event.target!=$check[0]){varchkBoxStatus=$check.is("input:checked");console.log(chkBoxStatus);$check.prop("checked",!chkBoxStatus);}});起初我认为我肯定是jQuery功能代码不对,于是自己检查了html里id,class,发现并没有出错,于是我便一直在想为何控制台会意外打印两次,后面室友提示我说,试试在执行功能之前清除事件绑定,于是我便照做了用jQuery的.unbind("click"),清除所有table上的click事件。结果!结果竟然成功了!!!两边的表格数据都可以正常进行行选功能,虽然是完成了预期功能,但是我当时不知道为什么要这样去做清除事件。后面我突然想到原来是执行了两次click事件的结果,每次先加载的数据,加载完毕后就被绑定click事件一次,后加载的数据加载完毕后,之前先加载的数据再次被绑定一次click事件,所以也就是为什么先加载的数据行选失效,打印两次falsetrue,而后加载的数据行选正常,打印一次。下面是修改后的代码://行选功能$("tabletbodytr").unbind("click");//清除table的所有click事件$("tabletbodytr").click(function(event){//遍历tr下的checkbox元素var$check=$(this).find("input[type=checkbox]");//判断非点击checkbox本身if($check.length>0&&event.target!=$check[0]){varchkBoxStatus=$check.is("input:checked");console.log(chkBoxStatus);$check.prop("checked",!chkBoxStatus);}});虽然问题很小,但是也是学习,总之自己还是需要不断努力,完善自己。...

学习jQuery包裹节点

jQuery包裹节点用法。分享给大家供大家参考,具体如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="/demo/js/jq.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[$(function(){  $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来  //$("strong").wrapAll("<b></b>");  //$("strong").wrapInner("<b></b>");});//]]></script></head><body><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong><ul>  <li title='苹果'>苹果</li>  <li title='橘子'>橘子</li>  <li title='菠萝'>菠萝</li></ul></body></html>运行效果图如下:...

jQuery对checkbox 复选框的全选全不选反选的操作

jQuery代码:<scripttype="text/javascript">$(function(){//全选/全不选$("#all").click(function(){$("[name=items]:checkbox").attr("checked",this.checked);});$("[name=items]:checkbox").click(function(){varflag=true;$("[name=items]:checkbox").each(function(){if(!this.checked){flag=false;}});$("#all").attr("checked",flag);})//全选$("#selectAll").click(function(){$("[name=items]:checkbox").each(function(){$(this).attr("checked",true);});});//全不选$("#unSelect").click(function(){$("[name=items]:checkbox").each(function(){$(this).attr("checked",false);});});//反选$("#reverse").click(function(){$("[name=items]:checkbox").each(function(){//遍历每一个复选框//$(this).attr("checked",!$(this).attr("checked"));//jQuery方法取复选框的反向值this.checked=!this.checked;//js方法});});//输出选中的值$("#btn").click(function(){varstr="你选中的是:\r\n";$("[name=items]:checkbox:checked").each(function(){str+=$(this).val()+"\r\n";});alert(str);});})</script>注:由于jQuery版本的变更,新版本出现只能点击一次,老一点的版本是可以的,新的版本不可以使用attr来设置选中状态了,第一种解决方法是可以使用js原生的方法this.checked=true/false;第二种解决方法是把attr换成prop。...

新手学习jQuery的animate自定义动画

jQuery的animate自定义动画动画animate()01.animate()方法的简单使用有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了。操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别。$(elem).fadeOut(3000) $(elem).animate({ opacity:0},3000)显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画。语法:1.animate(properties[,duration][,easing][,complete])2.animate(properties,options)  .animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用,几乎差不多了,唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。参数分解:properties:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以,因为参数是red或者GBG这样的值,非常用插件,否则正常情况下是不能只能动画效果的。注意,CSS样式使用DOM名称(比如"fontSize")来设置,而非CSS名称(比如"font-size")。特别注意单位,属性值的单位像素(px),除非另有说明。单位em和%需要指定使用。.animate({left: , width: 'px' opacity: 'show', fontSize: "em",}, );除了定义数值,每个属性能使用'show','hide',和'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。.animate({width: "toggle"});如果提供一个以+=或-=开始的值,那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的.animate({ left: '+50px'}, "slow");duration:时间动画执行的时间,持续时间是以毫秒为单位的;值越大表示动画执行的越慢,不是越快。还可以提供'fast'和'slow'字符串,分别表示持续时间为200和600毫秒。easing动画运动的算法:jQuery库中是默认的时调用swing。在一个恒定的速度进行动画,如果需要其他的动画算法,请查找相关的插件complete回调动画完成时执行的函数,这个可以保证当前动画确定完成后发会触发02.animate()方法来依次执行多个动画animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate的提供第二种设置语法,传递一个对象参数,可以拿到动画执行状态一些通知。.animate(properties,options)options参数duration-设置动画执行的时间easing-规定要使用的easing函数,过渡使用哪种缓动函数step:规定每个动画的每一步完成之后要执行的函数progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念complete:动画完成回调如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次。列出常用的方式$('#elem').animate({width: 'toggle', height: 'toggle'}, {duration: ,specialEasing: {width: 'linear',height: 'easeOutBounce'},complete: function() {$(this).after('<div>Animation complete.</div>');}});调用animate()方法可以创建自定义动画效果,它的调用格式为:$(selector).animate({params},speed,[callback])其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。例如,调用animate()方法以由小到大的动画效果显示图片,如下图所示:<h1>制作简单的动画效果</h1><img src="images/.png" alt=""/><div id="tip"></div><script type="text/javascript">$(function() {$('img').animate({width: 'px';height:'px'}, , function() {$("#tip").html('执行完成!');});})</script>在浏览器中显示的效果:从图中可以看出,调用animate()方法,以渐渐放大的动画效果显示图片元素,当动画执行完成后,通过回调函数在页面的<div>元素中显示“执行完成!”的字样。...

收集一些jQuery使用技巧

jQuery使用技巧。1.使用最新的jQuery版本觉得这个建议有待商榷,虽然越新的jQuery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,建议是旧的页面的jQuery升级需谨慎,新项目可以大胆的使用jQuery新版本。2.保持选择器的简单这个建议明河非常赞同,有很多朋友不喜欢给元素增加样式或id,希望保持html的简洁,使用jQuery强大的选择器去检索元素,这不是好的习惯。首先越复杂的选择器,遍历的效率越低,这是显而易见的,最高效率无疑是使用原生的getElementById();其次,复杂的选择器将标签名称和层级结构固化在里面,假如你的html结构发生了改变,或标签发生了改变,都直接造成检索失败。$('li[data-selected="true"] a') // Fancy, but slow $('li.selected a') // Better $('#elem') // Best访问DOM,是javascript最耗资源和性能的部分,所以尽量避免复杂或重复的遍历DOM。避免重复遍历DOM的方法就是将$()检索的元素存储到变量,比如下面的代码:var buttons = $('#navigation a.button');//使用$前缀来标示jQuery对象,是非常好的习惯,推荐使用。var $buttons = $('#navigation a.button'); var $buttons = $('#navigation a.button');jQuery选择器支持大部分的css3伪类方法,像:visible,:hidden,:animated,虽然很便利,但请慎用,因为当你使用伪类选择器的时候,jQuery不得不使用querySelectorAll(),性能的损耗更大。3.jQuery对象作为数组处理jQuery对象定义了length属性,当使用数组的形式操作时候返回其实是DOM元素而不是子jQuery对象,比如下面代码。// Selecting all the navigation buttons: var buttons = $('#navigation a.button');// 遍历buttons对象for(var i=0;i<buttons.length;i++){ console.log(buttons[i]); // 是DOM元素,而不是jQuery对象! }//Wecanevensliceit:var firstFour = buttons.slice(0,4);根据实验,使用for或while循环,执行效率比$.each()来的高。详细测试可以看severaltimesfaster。使用length属性来检查元素存在性:if(buttons){ // This is always true // Do something } if(buttons.length){ // True only if buttons contains elements // Do something }4.selector属性jQuery对象都带有一个selector属性,用于获取选择器名称,比如:$('#container li:first-child').selector // #container li:first-child $('#container li').filter(':first-child').selector // #container li.filter(:first-child)留意第二行代码,selector返回的是获取的元素完整的选择器。这个属性常用于编写jQuery插件的时候。5.创建一个空的jQuery对象这种情况应用场景不多,当你需要先创建个空的jQuery对象,然后使用add()方法向此对象注入jQuery对象时会用到。var container = $([]); container.add(another_element);)6.选择随机元素应用场景不多,举个例子,现在你需要随机给li增加一个red的class。需要扩展jQuery的选择器,这段代码很好的演示了jQuery.expr的用法。(function($){ var random = 0; $.expr[':'].random = function(a, i, m, r) { if (i == 0) { random = Math.floor(Math.random() * r.length); } return i == random; };  })(jQuery);   $('li:random').addClass('glow');7.使用css钩子jQuery.cssHooks是1.4.3新增的方法,用的不估计不多,当你定义新的CSSHooks时实际上定义的是getter和setter方法,举个例子,border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器,需要增加属性前缀,比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSSHooks将其封装成统一的接口borderRadius,而不是一一设置css属性。$.cssHooks['borderRadius'] = { get: function(elem, computed, extra){ // Depending on the browser, read the value of // -moz-border-radius, -webkit-border-radius or border-radius }, set: function(elem, value){ // Set the appropriate CSS3 property } }; // Use it without worrying which property the browser actually understands: $('#rect').css('borderRadius',5);8.使用自定义的Easing(缓动动画效果)函数easingplugin是用的非常多的函数,可以实现不少华丽的效果。当内置的缓动效果无法满足你的需求时,还可以自定义缓动函数。$.easing.easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }; // To use it: $('#elem').animate({width:200},'slow','easeInOutQuad');9.$.proxy()的使用jQuery有个让人头疼的地方,回调函数过多,上下文this总是在变化着,有时候我们需要控制this的指向,这时候就需要$.proxy()方法。<div id="panel" style="display:none"> <button>Close</button> </div> $('#panel').fadeIn(function(){ // this points to #panel $('#panel button').click(function(){ // this points to the button $(this).fadeOut(); }); });嵌套的二个回调函数this指向是不同的!现在我们希望this的指向是#panel的元素。代码如下:$('#panel').fadeIn(function(){ // Using $.proxy to bind this: $('#panel button').click($.proxy(function(){ // this points to #panel $(this).fadeOut(); },this)); });10.快速获取节点数这是个常用的技巧,代码如下:console.log( $('*').length );11.构建个jQuery插件(function($){ $.fn.yourPluginName = function(){ // Your code goes here return this; }; })(jQuery);关于jQuery插件的构建,明河曾发过系列教程,传送门:制作jQuery文字提示插件—jQuery插件实战教程(1)。这里就不再详述。12.设置ajax全局事件关于ajax全局事件,明河曾发过完整的介绍文章,传送门:《jQuery的ajax全局事件详解—明河谈jQuery》。13.延迟动画// This is wrong: $('#elem').animate({width:200},function(){ setTimeout(function(){ $('#elem').animate({marginTop:100}); },2000); }); // Do it like this: $('#elem').animate({width:200}).delay(2000).animate({marginTop:100});当存在多个animate动画时,如何处理动画的执行顺序是个烦心事,原文作者是建议使用delay()函数,如上面的代码,但明河的建议是使用queue()方法,因为delay你要考虑延迟多少时间,而queue没有这个问题,进入队列的函数会一个个顺序执行。可以看明河以前的文章queue和dequeue—明河谈jQuery。15.jQuery的本地存储本地存储在现在web应用中使用越来越频繁,jQuery有个专门用于本地存储的插件叫$.jStoragejQueryplugin。// Check if "key" exists in the storage var value = $.jStorage.get("key"); if(!value){ // if not - load the data from the server value = load_data_from_server(); // and save it $.jStorage.set("key",value); }...

jQuery之优雅的迭代

jQuery的操作往往是分两步:1,获取元素集合(选择器)2,操作元素集合而第二步操作元素集合的主要方法就是jQuery.each。查看源码,我们发现jQuery.each及this.each分别调用了27次和31次。可见它是多么的重要。这篇将分析下jQuery.each及this.each方法。看看他们如何与jQuery.extend一起扩展jQuery库。最后我会给zChain.js加上each方法。部分源码如下:jQuery.fn = jQuery.prototype = { ... // Execute a callback for every element in the matched set. // (You can seed the arguments with an array of args, but this is // only used internally.) each: function( callback, args ) { return jQuery.each( this, callback, args ); }, ... } jQuery.extend({ ... // args is for internal usage only each: function( object, callback, args ) { var name, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction( object ); if ( args ) { if ( isObj ) { for ( name in object ) { if ( callback.apply( object[ name ], args ) === false ) { break; } } } else { for ( ; i < length; ) { if ( callback.apply( object[ i++ ], args ) === false ) { break; } } } // A special, fast, case for the most common use of each } else { if ( isObj ) { for ( name in object ) { if ( callback.call( object[ name ], name, object[ name ] ) === false ) { break; } } } else { for ( ; i < length; ) { if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { break; } } } } return object; }, ... });以上可看出,1,jQuery().each是直接挂在jQuery.prototype(jQuery.fn)上的,因此每个jQuery对象都包含each方法。2,jQuery.each是通过jQuery.extend({})方式扩展的。前面已经说过,通过这种方式扩展的方法将挂在functionjQuery上,即为jQuery类的静态方法。3,jQuery().each方法中只有一句:returnjQuery.each(this,callback,args)。即jQuery对象的each方法实现上其实就是调用jQuery静态的jQuery.each。因此jQuery.each才是关键所在。下面详细分析jQuery.each,它有三个参数object,callback,args。1,object可以为数组(Array),对象(Object),甚至是函数类型(Functoin);2,callback是回调函数,类型为function;3,args为jQuery库自身使用,使用者不会用到该参数,这里暂不讨论该参数情况。函数中第一句定义必要的变量var name, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction( object );length=object.length很好理解,有三种情况length不为undefined1,object为数组类型(Array)时,数组具有length属性;2,object为函数类型(Functoin)时,length为该函数定义的参数个数,如果该函数没有定义参数,length为0;3,具有length属性的object伪数组(如:arguments,HTMLCollection,NodeList等)。变量isObj用来判断是否是对象类型,有两种情况为true:1,变量length等于undefined,即所传object没有length属性。2,参数object为函数类型这里强调下object为jQuery对象。即当在$(xx).each时发生,这时会将this传到$.each中。如:returnjQuery.each(this,callback,args)。这里第一个参数this即为jQuery对象,每个jQuery对象是具有length属性的。each中有以下两个分支1,如果isObj为true,则用forin语句去遍历该对象,如果把每个迭代的对象看出键值对形式的话。callback中的this是值object[name],callback第一个参数是键name,第二个参数是值object[name]。2,如果isObj为false,则用for循环去遍历数组(类数组)。callback中的this是数组中单独元素的值value,callback第一参数是数组的索引i,第二参数是数组单独元素值value。callback调用后返回值如果是false则停止迭代,跳出循环。这里用严格"==="来判断是否与false相等。顺便提一下,函数如果没有显示的return,默认返回undefined。总结下:1,$(xx).each的each是jQuery对象的方法,它调用静态的jQuery.each。它只用来迭代jQuery对象,jQuery对象可以看成一个伪数组(具有length属性,用索引方式存取)。2,$.each的each是functionjQuery的静态方法(即jQuery.each),可以迭代对象,数组,伪数组,函数。...

jQuery判断滚动条到底部和顶端

jQuery判断滚动条到底部和顶端。$(document).height() //是获取整个页面的高度$(window).height() //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的。要获取顶端,只需要获取到scrollTop()==0的时候就是顶端;要获取底端,只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了;$(document).scrollTop()获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离;$(document).scrollLeft()这是获取水平滚动条的距离;例子:$(document).scroll(function(){$("#lb").text($(document).scrollTop());})<spanid="lb"style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记滚动时-->...

基于jQuery表单select的应用操作

jQuery表单select的应用操作获取select:获取select选中的text:$("#ddlregtype").find("option:selected").text();获取select选中的value:$("#ddlregtype ").val();获取select选中的索引:$("#ddlregtype ").get(0).selectedindex;设置select:设置select选中的索引:$("#ddlregtype ").get(0).selectedindex=index;//index为索引值设置select选中的value:$("#ddlregtype ").attr("value","normal“);$("#ddlregtype ").val("normal");$("#ddlregtype ").get(0).value = value;设置select选中的text:var count=$("#ddlregtype option").length;for(var i=0;i<count;i++){ if($("#ddlregtype ").get(0).options[i].text == text){$("#ddlregtype ").get(0).options[i].selected = true;break;}}$("#select_id option[text='jQuery']").attr("selected", true);设置selectoption项:$("#select_id").append("<option value='value'>text</option>"); //添加一项option$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option$("#select_id option:last").remove(); //删除索引值最大的option$("#select_id option[index='0']").remove();//删除索引值为0的option$("#select_id option[value='3']").remove(); //删除值为3的option$("#select_id option[text='4']").remove(); //删除text值为4的option清空select:$("#ddlregtype ").empty();工作需要,要获得两个表单中的值。如图:如何获得从左边选择框添加到右边选择框中的值?我想了想用网页特效可以获得,这里用了比较流行的jQuery。js代码如下://获取所有属性值 var item = $("#select1").val();$(function(){    $('#select1').each( //获得select1的所有值    function(){            });})</script>值得注意的是,不能直接写成$(function(){    $('#select2').each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jQuery其实并没有真正将值从左边传到右边。    function(){        $('button').click(function(){            alert($(this).val()); //获得select2中的select1值        });    });})html:<div class="centent"><select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option><option value="7">选项7</option></select><div><span id="add" >选中添加到右边>></span><span id="add_all" >全部添加到右边>></span></div></div><div class="centent"><select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;"></select><div><span id="remove"><<选中删除到左边</span><span id="remove_all"><<全部删除到左边</span></div></div>使用jQuery,Ajax调用动态填充Select的option选项//绑定ClassLevel1单击事件$("#ClassLevel1").change(function () {    var id = $("#ClassLevel1").val();    var level2 = $("#ClassLevel2");    level2.empty();    $("#ClassLevel3").hide();    $.ajax({        url: "./askCommon.ashx?action=getclasslevel&pid=" + id,        data: { "type": "ajax" },        datatype: "json",        type: "get",        success: function (data) {        var json = eval_r(data);        for (var ind in json) {        level2.append($("<option value='" + json[ind].id + "'>" + json[ind].typename + "</option>"));        }                }    });})...

用实例介绍jQuery的attr和prop的应用

jQuery判断input里checkbox是否被选中,发现用attr()获取不到复选框改变后的状态,最后查资料发现jQuery1.6以后新增加了prop()方法,借用官方的一段描述就是:Thedifferencebetweenattributesandpropertiescanbeimportantinspecificsituations.BeforejQuery1.6,the.attr()methodsometimestookpropertyvaluesintoaccountwhenretrievingsomeattributes,whichcouldcauseinconsistentbehavior.AsofjQuery1.6,the.prop()methodprovidesawaytoexplicitlyretrievepropertyvalues,while.attr()retrievesattributes.上面翻译过来大概就是:prop()处理来自节点对象自带的属性,它包含了很多原生的property;而attr()来自对象的attributes,可能是我们在元素节点上添加属性节点才会有的。当然,前面的翻译仅代表本人观点,如有错误,可以提出来~~简单的来说就是:对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。上面的描述也许有点模糊,引用一些大神的博客内容加上我的测试,举几个例子就知道了。 第一个例子:元素的固有属性以及自定义属性说明<ahref="http://www.jiangweishan.com"target="_self"class="btn">Web前端之家</a> 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。<ahref="#"id="link1"action="delete">删除</a>这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。第二个例子:prop()与attr()在表单应用上的区别先来看一段用attr()方法代码:<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>attr()vsprop()</title></head><body><h3>用attr()判断是否选中</h3><inputtype="checkbox"id="input01"/>我是第一个复选框A<br/><inputtype="checkbox"id="input02"checked="checked"/>我是第二个复选框B<br/><inputtype="button"id="button01"value="获取A的checked状态"/><inputtype="button"id="button02"value="获取B的checked状态"/><scriptsrc="/demo/js/jq.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">$(function(){$("#button01").click(function(){var$state01=$("#input01").attr("checked");alert($state01);})$("#button02").click(function(){var$state02=$("#input02").attr("checked");alert($state02);})})</script></body></html>上面这段程序的测试结果是:从动态图可以看出来,用attr()获取不到用户选中的状态,它只返回表单的初始值。 再来看一段用prop()方法代码:<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>attr()vsprop()</title></head><body><h3>用prop()判断是否选中</h3><inputtype="checkbox"id="input01"/>我是第一个复选框A<br/><inputtype="checkbox"id="input02"checked="checked"/>我是第二个复选框B<br/><inputtype="button"id="button01"value="获取A的checked状态"/><inputtype="button"id="button02"value="获取B的checked状态"/><scriptsrc="/demo/js/jq.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">$(function(){$("#button01").click(function(){var$state01=$("#input01").prop("checked");alert($state01);})$("#button02").click(function(){var$state02=$("#input02").prop("checked");alert($state02);})})</script></body></html>上面这段程序的测试结果是:从动态图可以看出来,用prop()可以实时获取用户的选中与取消操作状态。因此我总结的差别就是:property记录的值会按照用户操作实时更新,而attribute记录的都是初始值,仅代表本人观点。...

每日一学每天一小步 成功一大步!

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2