jQuery

jQuery

1. 介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法

jQuery最大的特点是：浏览器兼容，链式编程，隐式迭代，丰富的选择器操作。

1.1 jQuery环境

Jquery它是一个JavaScript类库，要想使用它，必须先引入；jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版），它们的区别如表1-1所示。

​ 表1-1　几种jQuery库类型对比

名　　称	大　　小	说　　明
jquery.js（开发版）	约229 KB	完整无压缩版本，主要用于测试、学习和开发
jquery.min.js（生产版）	约31 KB	经过工具压缩或经过服务器开启Gzip压缩 主要应用于产品和项目

1.2 jQuery简单案例

1. 引入jQuery的js文件
2. 文件初始化代码$(function () {});与原生的window.onload()代码类似，不过还是有区别的，对它们进行了简单对比。

	window.onload	$(document).ready()
执行时机	必须等到页面中所有的文件都加载完毕才会执行(DOM结构、js文件、图片等)	网页中的DOM结构绘制完毕后就可以执行
编写的个数	不能同时的编写多个，当有多个window.onload=function(){};时，只有最后的一个有作用	能同时编写多个，都可以执行
简化写法	无	$(function(){、、、});

1.3 jQuery代码风格

虽然jQuery做到了行为和内容的分离，但jQuery代码本身也应该拥有良好的层次结构及规范，这样才能进一步改善代码的可读性和可维护性

（1）对于同一个对象不超过3个操作的，可以直接写成一行

（2）对于同一个对象的较多操作，建议每行写一个操作

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进

（4）为代码添加注释

1.4 jQuery对象和DOM对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。例如：

$('#foo').html()  //获取id为foo的元素内的html代码。html()是jQuery的方法

这段代码等同于：

document.getElementById('foo').innerHtml()

在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr("checked")之类的jQuery方法来代替。同样，DOM对象也不能使用jQuery里的方法。例如document.getElementById("id").html()也会报错，只能用document.getElementById("id").innerHTML语句。

jQuery对象和DOM对象是可以相互转化的

• jQuery对象转化为DOM对象

var $cr = $('#cr');  
// 第一种方法
var cr  = $cr[0];
// 第二种方法
var cr  = $cr.get(0);

• DOM对象转化为jQuery对象

var cr = document.getElementById('cr');
// 转化为jQuery对象
var $cr = $(cr);

2. 选择器

jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。

需要注意的是，$('#tt')获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时，不能使用以下代码:

if($('tt')){
    //do something
}

应该根据元素的长度判断

if($('tt').length>0){
    //do something
}

2.1 基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如表2-1所示。

​ 2-1 基本选择器

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$('#test')选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$('.test')选取class为test的元素
element	根据给定元素名匹配元素	集合元素	$(p)选取所有的 元素

2.2 层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等那么层次选择器是一个非常好的选择。层次选择器的介绍说明如表2-2所示

选择器	描述	返回	示例
$(ancestor descendent)	选取ancestor（祖先）里面的所有descendent（后代）元素	集合元素	$(div span)选择div里的所有的span标签
$(parent->child)	选取parent下的child（子元素)，不包括孙子代	集合元素	$(div-> span)`选择div里的所有的子span标签
$(pre+next)	选取紧接在pre元素后面的next元素	集合元素	$(.one+div)选取class为one的下一个 同辈元素
$(pre~siblings)	选取pre元素之后的所有siblings元素	集合元素	$(#two~div)选取id为two的元素后面的所有 同辈

可以使用next()方法来替代pre+next

	选择器	方法
等价关系	$('.one+div')	$('.one').next('div')

可以使用nextAll()方法来代替$('prev〜siblings')选择器

	选择器	方法
等价关系	$('.pre ~ div')	$('.pre').nextAll('div')

在此我将后面要讲解的siblings()方法拿出来与$("#prev〜div")选择器只能选择“prev”元素后面的同辈

元素。而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

2.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。这里只对最为常用的过滤器进行介绍

2.3.1 基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$('div:first'):选取所有 中的第一个元素
:last	选取最后一个元素	单个元素	$('div:last'):选取所有 中的最后一个元素
：not(selector)	去除于给定选择器匹配的元素	集合元素	$(input:not(myClass)：选取classs不是myClass的元素
:even	选取索引值为偶数的元素（索引从0开始）	集合元素	$(input:even：选取索引是偶数的元素
:odd	选取索引值为奇数的元素（索引从0开始）	集合元素	$(input:odd)：选取索引是奇数的元素
:eq(index)	选取索引值等于index的元素（index从0开始）	集合元素	$(input:eq(1))：选取索引等于1的元素
:gt(index)	选取索引值大于index的元素（index从0开始）	集合元素	$(input:gt(1))：选取索引大于1的元素
:lt(index)	选取索引值小于index的元素（index从0开始）	集合元素	$(input:lt(1))：选取索引大于1的元素

2.3.2 内容过滤器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为“text”的元素	集合元素	$("div.contains('我')")选择文本含有‘我’的 元素
:has(selector)	选择含有选择器所匹配的元素的元素	集合元素	$(div:has(p))选取包含 元素的 元素
:empty	选择不包含子元素或者是文本的元素	集合元素	$(div:empty)选取不包括子元素（文本元素）的 空元素

2.3.3 可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

选择器	描述	返回	示例
:hidden	选取所有不可见元素	集合元素	$(:hidden)选取所有的不可见的元素。包括, 和 等元素。如果只想选取元素，可以使用$(input:hidden)
:visibe	选取所有可见元素	集合元素	$("div:visibe")选取所有可见的 元素

2.3.4 属性过滤选择器

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")选取拥有属性为id的 元素
[attribute=value]	选取属性值为value的元素	集合元素	$("div[title=test]")选取拥有属性title的值为text的 元素
[attribute*=value]	选取属性值含有value的元素	集合元素	$("div[title*=test]")选取拥有属性title含有值为test的 元素
[attribute^=value]	选取属性值以value开头的元素	集合元素	$("div[title^=test]")选取拥有属性title值以test开头的 元素
[attribute$=value]	选取属性值以value结尾的元素	集合元素	$("div[title$=test]")选取拥有属性title值以test结尾的 元素

2.3.5 子元素选择器

子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。

选择器	描述	返回	示例
：nth-child(index/even/odd/equation)	选取父元素下的第index个子元素或者奇偶元素（index从1开始）	集合元素	:eq(index)只匹配一个元素，而:nth-child(index)为每一个父元素匹配子元素，并且index的值 从1开始的
：first-child	选取父元素的第一个元素	集合元素	:first只返回单个元素，而:first-child选择符将为每一个父元素匹配子元素。例如$(ul li:first-child)选取每个 中第一个 元素
：last-child	选取父元素的最后一个元素	集合元素	:last只返回单个元素，而:last-child选择符将为每一个父元素匹配子元素。例如$(ul li:first-child)选取每个 中最后一个 元素

:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下。

（1）:nth-child(even)能选取每个父元素下的索引值是偶数的元素。

（2）:nth-child(odd)能选取每个父元素下的索引值是奇数的元素。

（3）:nth-child(2)能选取每个父元素下的索引值等于2的元素。

（4）:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，（n从1开始）。

（5）:nth-child(3n+1)能选取每个父元素下的索引值是（3n+1）的元素。（n从1开始）

2.3.6 表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。表单对象属性

选择器	描述	返回	示例
:enabled	选取所有可用的元素	集合元素	$(#form1 :enabled)选择id为“form1”的表单内的所有可用元素
:disabled	选取所有不可用的元素	集合元素	$(#form2 :disabled)选择id为“form2”的表单内的所有不可用元素
:checked	选取所有可用的元素（单选框，复选框）	集合元素	$("input:checked")选择所有被选中的元素
:selected	选取所有被选中的选项元素	集合元素	$(select option:selected)选取所有被选中项的元素

2.4 表单选择器

为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。

选择器	描述	返回	示例
:input	选取所有的、、<select>、<button></code> </td> <td>集合元素</td> <td> <code>$(":input")</code>：选取所有的上述元素</td> </tr> <tr> <td><code>:text</code></td> <td>选取所有的单行文本框</td> <td>集合元素</td> <td> <code>$(":text")</code>:选取所有的文本元素</td> </tr> <tr> <td><code>:password</code></td> <td>选取所有的密码框</td> <td>集合元素</td> <td> <code>$(":password")</code>:选取所有的密码元素</td> </tr> <tr> <td><code>:radio</code></td> <td>选取所有的单选框</td> <td>集合元素</td> <td> <code>$(":radio")</code>:选取所有的单选元素</td> </tr> <tr> <td><code>:checkbox</code></td> <td>选取所有的多选框</td> <td>集合元素</td> <td> <code>$(":checkbox")</code>选取所有的复选框</td> </tr> <tr> <td><code>:submit</code></td> <td>选取提交按钮</td> <td>集合元素</td> <td> <code>$(":submit")</code>选取所有的提交按钮</td> </tr> <tr> <td><code>:image</code></td> <td>选取图像按钮</td> <td>集合元素</td> <td> <code>$(":image")</code>选取所有的图像按钮</td> </tr> </tbody> </table> <h3>2.5 jQuery的遍历方法</h3> <p>另外的常用的遍历方法如下表所示：</p> <table> <thead> <tr> <th>方法</th> <th>描述</th> <th>返回</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>siblings()</td> <td>返回被选元素的所有同胞元素</td> <td>集合元素</td> <td> <code>$("h2").siblings("p");</code>返回属于<code><h2></code>的同胞元素的所有<code><p></code>元素：</td> </tr> <tr> <td>children()</td> <td>返回被选元素的所有直接子元素</td> <td>集合元素</td> <td> <code>$("div").children("p.1");</code>返回类名为 "1" 的所有<code><p></code> 元素，并且它们是<code><div></code>的直接子元素：</td> </tr> <tr> <td>find()</td> <td>返回被选元素的后代元素，一路向下直到最后一个后代</td> <td>集合元素</td> <td> <code>$("div").find("span");</code>返回属于 <code><div></code> 后代的所有<code><span></code> 元素：</td> </tr> <tr> <td>parent()</td> <td>返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。</td> <td>集合元素</td> <td> <code>$("span").parent();</code>返回每个<code><span></code> 元素的的直接父元素</td> </tr> <tr> <td>parents()</td> <td>返回被选元素的所有祖先元素，它一路向上直到文档的根元素 <code><html></code> </td> <td>集合元素</td> <td> <code>$("span").parents();</code>返回所有<code><span></code> 元素的所有祖先</td> </tr> <tr> <td>first()</td> <td>返回被选元素的首个元素</td> <td>单个元素</td> <td> <code>$("div p").first();</code>选取首个 <code><div></code>元素内部的第一个 <code><p></code> 元素：</td> </tr> <tr> <td>last()</td> <td>返回被选元素的最后一个元素</td> <td>单个元素</td> <td> <code>$("div p").last();</code>选择最后一个 <code><div></code>元素中的最后一个 <code><p></code>元素：</td> </tr> <tr> <td>eq()</td> <td>返回被选元素中带有指定索引号的元素</td> <td>单个元素</td> <td> <code>$("p").eq(1);</code>引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <code><p></code>元素（索引号 1）：</td> </tr> <tr> <td>filter()</td> <td>filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回</td> <td>集合元素</td> <td> <code>$("p").filter(".url");</code>返回带有类名 "url" 的所有<code><p></code> 元素：</td> </tr> <tr> <td>not()</td> <td>not() 方法返回不匹配标准的所有元素。</td> <td>集合元素</td> <td> <code>$("p").not(".url");</code>返回不带有类名 "url" 的所有 <code><p></code>元素：</td> </tr> </tbody> </table> <h2>3. 样式操作</h2> <h3>3.1获取和设置样式</h3> <p>HTML代码如下：</p> <pre><code class="html"><p class='myClass' title="选择你喜欢的水果">你最喜欢的水果是?</p> </code></pre> <p>在上面的代码中，class也是<code><p></code>元素的属性，因此获取class和设置class都可以使用attr()方法来完成。</p> <p>例如使用attr()方法来获取<p>元素的class，jQuery代码如下：</p> <pre><code class="javascript">var p_class = $("p").attr("class"); </code></pre> <p>也可以使用attr()方法来设置<code><p></code>元素的class，jQuery代码如下：</p> <pre><code class="javascript">$("p").attr("class","high"); </code></pre> <p>运行代码后，上面的HTML代码将变为如下结构：</p> <pre><code class="html"><p class='high' title="选择你喜欢的水果">你最喜欢的水果是?</p> </code></pre> <p>上面的代码是将原来的<code>class（myClass）</code>替换为新的<code>class（high</code>）。如果此处需要的是“追加”效果，class属性变为“myClass high”，即<code>myClass</code>和<code>high</code>两种样式的叠加，那么我们可以使用==<code>addClass()</code>==方法。</p> <h3>3.2 追加样式</h3> <p>jQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解，首先在<code><style></code>标签里添加另一组样式：</p> <pre><code class="html"><style> .high { font-weight:700; color:red } .another { font-style:italic; color:'blue' } </style> </code></pre> <p>然后在网页中添加一个“追加class类”的按钮，按钮的事件代码如下：</p> <pre><code class="javascript">$("p").addClass("another"); </code></pre> <p>（1）如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。</p> <p>（2）如果有不同的class设定了同一样式属性，则后者覆盖前者。</p> <h3>3.3 移除样式</h3> <p>在上面的例子中，为<code><p></code>元素追加了another样式。此时<code><p></code>元素的HTML代码变为：</p> <pre><code class="html"><p class='high' title="选择你喜欢的水果">你最喜欢的水果是?</p> </code></pre> <p>如果用户单击某个按钮时，要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法</p> <p>来完成，它的作用是从匹配的元素中删除全部或者指定的class。</p> <p>例如可以使用如下的jQuery代码来删除<code><p></code>元素中值为“high”的class:</p> <pre><code class="javascript">$("p").removeClass("high"); </code></pre> <p>jQuery提供了更简单的方法。可以以空格的方式删除多个class名，jQuery代码如下：</p> <pre><code class="javascript">$("p").removeClass("high another"); </code></pre> <p>另外，还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时，就会将class的值全部删除，jQuery代码如下：</p> <pre><code class="javascript">$("p").removeClass(); </code></pre> <h3>3.4 切换样式</h3> <p>jQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。例如对<code><p></code>元素进行toggleClass()方法操作。jQuery代码如下：</p> <pre><code class="javascript">$("p").toggleClass('another'); //重复的切换样式 </code></pre> <h3>3.5 判断是否含有某个样式</h3> <p>hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。</p> <p>例如可以使用下面的代码来判断<code><p></code>元素中是否含有“another”的class：</p> <pre><code class="javascript">$("p").hasClass("another"); </code></pre> <blockquote> <p>注意：这个方法是为了增强代码可读性而产生的。在jQuery内部实际上是调用了is()方法来完成这个功能的。该方法等价于如下代码：$("p").is(".another");</p> </blockquote> <h2>4.链式编程</h2> <h3>4.1 链式编程要点</h3> <p>链式编程就是：多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程</p> <pre><code class="javascript"> .html(‘val’).text(‘val’).css() </code></pre> <p>链式编程，隐式迭代。</p> <p>链式编程注意：</p> <pre><code class="html">$(‘div’).html().text() </code></pre> <p>这样是不对的，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。</p> <h3>4.2 链式编程end()方法返回到上一级</h3> <p>通过end()方法取消当前的jQuery对象，返回前面的jQuery对象。</p> <p>这样当匹配某个按钮时，为其绑定事件处理函数，然后调用end()方法，则又返回前面一个jQuery对象，即按钮集合。</p> <p>链式代码已经成为jQuery 非常流行的一个特点，在使用链条方式编写代码时，可能会用到eq()、filter()的jQuery方法改变链式方法的对象，但是借助jQuery的end() 方法又能够恢复或最初的jQuery对象，从而可以实现继续执行链式操作。注意，有几个jQuery的方法并不返回jQuery 对象，所以链式操作就不能继续下去，如get() 就不能像eq() 那样使用。</p> <pre><code class="javascript">$(‘ul.first’).find(’.foo’).css(‘background-color’, ‘red’) .end().find(’.bar’).css(‘background-color’, ‘green’); </code></pre> <h2>5. 动画</h2> <p>jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。</p> <h3>5.1 显示动画</h3> <p>方式一：</p> <pre><code class="javascript">$("div").show(); </code></pre> <p>解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过<code>display: block;</code>实现的。</p> <p>方式二：</p> <pre><code class="javascript"> $("div").show(2000); </code></pre> <p>解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。</p> <p>方式三：</p> <pre><code class="javascript"> $("div").show("slow"); </code></pre> <p>参数可以是：</p> <ul> <li>slow 慢：600ms</li> <li>normal 正常：400ms</li> <li>fast 快：200ms</li> </ul> <p>解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。</p> <p>方式四：</p> <pre><code> //show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); }); </code></pre> <p>解释：动画执行完后，立即执行回调函数。</p> <p><strong>总结：</strong></p> <p>上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。</p> <h3>5.2 隐藏动画</h3> <p>方式参照上面的show()方法的方式。如下：</p> <pre><code class="javascript"> $(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){}); </code></pre> <p><strong>显示和隐藏的来回切换：</strong></p> <p>显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。</p> <p>同样是四种方式：</p> <pre><code class="javascript">$(selector).toggle(); </code></pre> <h3>5.3 滑入和滑出</h3> <p><strong>1、滑入动画效果</strong>：（类似于生活中的卷帘门）</p> <pre><code class="javascript"> $(selector).slideDown(speed, 回调函数); </code></pre> <p>解释：下拉动画，显示元素。</p> <p>注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）</p> <p><strong>2 滑出动画效果：</strong></p> <pre><code class="javascript"> $(selector).slideUp(speed, 回调函数); </code></pre> <p>解释：上拉动画，隐藏元素。</p> <p><strong>3、滑入滑出切换动画效果：</strong></p> <pre><code class="javascript"> $(selector).slideToggle(speed, 回调函数); </code></pre> <p>参数解释同show()方法。</p> <p>举例：</p> <pre><code class="html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; background-color: pink; } </style> <script src="jquery-1.11.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]); $("div").slideDown(2000, function () { alert("动画执行完毕！"); }); }) //滑出动画 $("button:eq(1)").click(function () { //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]); $("div").slideUp(2000, function () { alert("动画执行完毕！"); }); }) $("button:eq(2)").click(function () { //滑入滑出切换（同样有四种用法） $("div").slideToggle(1000); }) }) </script> </head> <body> <button>滑入</button> <button>滑出</button> <button>切换</button> <div></div> </body> </html> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 435px;"> <div class="image-view"> </div> </div> <div class="image-caption"> img </div> </div> <h3>5.4 淡入淡出动画</h3> <p>1、淡入动画效果：</p> <pre><code class="javascript"> $(selector).fadeIn(speed, callback); </code></pre> <p>作用：让元素以淡淡的进入视线的方式展示出来。</p> <p>2、淡出动画效果：</p> <pre><code class="javascript"> $(selector).fadeOut(1000); </code></pre> <p>作用：让元素以渐渐消失的方式隐藏起来</p> <p>3、淡入淡出切换动画效果：</p> <pre><code class="javascript"> $(selector).fadeToggle('fast', callback); </code></pre> <p>作用：通过改变透明度，切换匹配元素的显示或隐藏状态。</p> <p>参数的含义同show()方法。</p> <p>代码举例：</p> <pre><code class="html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; /*opacity: 1;*/ background-color: pink; } </style> <script src="jquery-1.11.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { //淡入动画用法1: fadeIn(); 不加参数 $("div").fadeIn(); }) //滑出动画 $("button:eq(1)").click(function () { //滑出动画用法2: fadeOut(2000); 毫秒值 $("div").fadeOut(2000); //通过这个方法实现的：display: none; //通过控制 透明度和display }) $("button:eq(2)").click(function () { //滑入滑出切换 //同样有四种用法 $("div").fadeToggle(1000); }) $("button:eq(3)").click(function () { //改透明度 //同样有四种用法 $("div").fadeTo(1000, 0.5, function () { alert(1); }); }) }) </script> </head> <body> <button>淡入</button> <button>淡出</button> <button>切换</button> <button>改透明度为0.5</button> <div></div> </body> </html> </code></pre> <h3>5.5 自定义动画</h3> <pre><code> $(selector).animate({params}, speed, callback); </code></pre> <p>作用：执行一组CSS属性的自定义动画。</p> <ul> <li>第一个参数表示：要执行动画的CSS属性（必选）</li> <li>第二个参数表示：执行动画时长（可选）</li> <li>第三个参数表示：动画执行完后，立即执行的回调函数（可选）</li> </ul> <p>代码举例：</p> <pre><code class="html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: pink; } </style> <script src="jquery-1.11.1.js"></script> <script> jQuery(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = { "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //自定义动画 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("动画执行完毕！"); }); }); }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html> </code></pre> <h3>5.6 停止动画</h3> <pre><code> $(selector).stop(true, false); </code></pre> <p><strong>里面的两个参数，有不同的含义。</strong></p> <p>第一个参数：</p> <ul> <li>true：后续动画不执行。</li> <li>false：后续动画会执行。</li> </ul> <p>第二个参数：</p> <ul> <li>true：立即执行完成当前动画。</li> <li>false：立即停止当前动画。</li> </ul> <p>PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。</p> <p><strong>效果演示：</strong></p> <p>当第二个参数为true时，效果如下：</p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 645px;"> <div class="image-view"> </div> </div> <div class="image-caption"> img </div> </div> <p>当第二个参数为false时，效果如下：</p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 645px;"> <div class="image-view"> </div> </div> <div class="image-caption"> img </div> </div> <p>这个<strong>后续动画</strong>我们要好好理解，来看个例子。</p> <p><strong>案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）</strong></p> <pre><code class="html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li { background-color: green; } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> <script src="jquery-1.11.1.js"></script> <script> //入口函数 $(document).ready(function () { //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。 var jqli = $(".wrap>ul>li"); //绑定事件 jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000); }); }); </script> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单1</a></li> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> </ul> </li> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单1</a></li> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> </ul> </li> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单1</a></li> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> </ul> </li> </ul> </div> </body> </html> </code></pre> <p>效果如下：</p> <div class="image-package"> <div class="image-container" style="max-width: 604px; max-height: 514px;"> <div class="image-view"> </div> </div> <div class="image-caption"> img </div> </div> <blockquote> <p>当鼠标第一次进入时，会触发<code>$(this).children("ul").stop().slideDown(1000);</code>，此时stop()会立即的停止当前的动画，由于当前没有动画，所以会执行后续的<code>slideDown(1000)</code>，此时，如果鼠标在1秒移除，会触发<code>$(this).children("ul").stop().slideUp(1000);</code>，此时stop()方法会停止未执行完的<code>slideDown(1000)</code>(滑入动画)，进而执行后续的<code>slideUp(1000)</code>(滑出动画）；如果不加stop()方法会先让滑入执行完再执行滑出动画。</p> </blockquote> <p>上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。</p> <p>如果去掉stop()函数，效果如下：（不是我们期望的效果）</p> <div class="image-package"> <div class="image-container" style="max-width: 604px; max-height: 514px;"> <div class="image-view"> </div> </div> <div class="image-caption"> img </div> </div> <p>stop方法的总结</p> <blockquote> <p>当调用stop()方法后，队列里面的下一个动画将会立即开始。<br> 但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。如果</p> <p>参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。</p> </blockquote> <p>注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。</p> <h2>6. DOM节点的相关操作</h2> <h3>6.1 创建元素</h3> <p>DOM中可以动态创建元素:</p> <ul> <li>document.write() : 会把页面中的所有的页面全部覆盖</li> <li>element.innerHTML :</li> <li>document.createElement() <推荐的方式></li> </ul> <p>jQuery中同样可以创建元素标签:</p> <ul> <li><code>$(标签代码)</code></li> <li><code>对象.html("标签代码")</code></li> </ul> <p>例如要创建两个<code><li></code>元素节点，并且要把它们作为<code><ul></code>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。</p> <p>（1）创建两个<code><li></code>新元素。</p> <pre><code class="javascript">var $li_1 = $("<li></li>"); var $li_2 = $("<li></li>"); </code></pre> <p>（2）将这两个新元素插入文档中。</p> <pre><code class="javascript">$("ul").append($li_1) </code></pre> <blockquote> <p>注意：</p> <p>（1）动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。</p> <p>（2）当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。例如创建一个<code><p></code>元素，可以用<code>$("</p>")</code>或者<code>$("<p></p>")</code>，但不要使用<code>$("<p>")</code>或者大写的<code>$("<P/>")</code>。</p> </blockquote> <h3>6.2 插入节点</h3> <p>动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。前面使用了一个插入节点的方法append()，它会在元素内部追加新创建的内容。</p> <p>将新创建的节点插入某个文档的方法并非只有一种，在jQuery中还提供了其他几种插入节点的方法，如表所示。读者可以根据实际需求灵活地做出多种选择。</p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 784px;"> <div class="image-view"> </div> </div> <div class="image-caption"> mark </div> </div> <p>这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。</p> <p>简单举例</p> <pre><code class="html"><body> <p title="选择你喜欢的水果">选择你喜欢的水果</p> <input type="button" value="元素移动" id="btn1"> <input type="button" value="插入元素" id="btn2"> <input type="button" value="元素移动" id="btn"> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="梨子">梨子</li> </ul> </body> </code></pre> <p>对元素进行插入和移动操作</p> <pre><code class="html"> <script> // 移动元素 $(function () { $('#btn').click(function () { var $one_li = $("li:eq(1)"); var $two_li = $("li:eq(2)"); console.log('置顶'); $two_li.insertBefore($one_li); }); }); // 插入元素 $(function(){ var $li_1 = $("<li title = '香蕉'>香蕉</li>"); var $li_2 = $("<li title = '雪梨'>雪梨</li>"); var $li_3 = $("<li title = '其他'>其他</li>"); var $parent = $("ul"); var $two_li = $("ul li:eq(1)"); $('#btn2').click(function(){ $parent.append($li_1); $parent.prepend($li_2); console.log($two_li.html()); console.log($li_3.html()); $two_li.after($li_3); }); }); </script> </code></pre> <h3>6.3 删除节点</h3> <p>如果文档中某一个元素多余，那么应将其删除。jQuery提供了三种删除节点的方法，即</p> <ul> <li>remove()，</li> <li>detach()</li> <li>empty()</li> </ul> <p><strong>1．remove()方法</strong></p> <p>作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。</p> <p>例如删除中<code><ul></code>节点中的第2个<code><li></code>元素节点，jQuery代码如下：</p> <pre><code class="javascript">$("ul li:eq(1)").remove(); </code></pre> <p>当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。</p> <pre><code class="javascript">var $li_2 = $("ul li:eq(1)").remove(); $li_2.appendTo($('ul')); </code></pre> <p>另外remove()方法也可以通过传递参数来选择性地删除元素，jQuery代码如下：</p> <pre><code class="javascript">$("ul li").remove("li[title!='橘子']"); </code></pre> <p><strong>2．detach()方法</strong></p> <p>detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。</p> <pre><code class="javascript"> $("ul li").click(function () { alert($(this).html()); }); // 删除元素 var $li = $("ul li:eq(1)").detach(); // 重新的添加，事件任然会绑定，不会消失,remove（）方法会消失 $li.appendTo($("ul")); }); </code></pre> <p><strong>3．empty()方法</strong></p> <p>严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。jQuery代码如下：</p> <pre><code class="javascript"> // 清空元素的内容，注意是清空内容 $('ul li:eq(1)').empty(); </code></pre> <p><strong>案例演示</strong></p> <p>详细的代码在我的githube上显示jQuery增加删除节点</p> <h3>6.4 复制节点</h3> <p>继续沿用之前水果的例子，如果单击<code><li></code>元素后需要再复制一个<code><li></code> 元素，可以使用clone()方法来完成，jQuery代码如下：</p> <pre><code class="javascript">$(function(){ $("ul li").click(function(){ $(this).clone().appendTo($("ul")); }) }); </code></pre> <p>复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能（本例中是单击事件），可以使用如下jQuery代码：</p> <pre><code class="javascript">$(function(){ $("ul li").click(function(){ $(this).clone(true).appendTo($("ul")); }) }); </code></pre> <p>在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能（本例中是单击事件）。</p> <h3>6.5 替换节点</h3> <p>如果要替换某个节点，jQuery提供了相应的方法，即<code>replaceWith()</code>和<code>replaceAll()</code>。<code>replaceWith()</code>方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。例如要将网页中“<code><p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>”替换成“<strong>你最不喜欢的水果是？</strong>”，</code>可以使用如下jQuery代码：</p> <pre><code class="javascript"> // 替换节点 replaceWith $(function(){ $('#btn1').click(function (e) { e.preventDefault(); $("p").replaceWith("<strong>你最喜欢的水果是？</strong><br>"); }); }); </code></pre> <p>也可以使用jQuery中另一个方法replaceAll()来实现，该方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作，可以使用如下jQuery代码实现同样的功能：</p> <pre><code class="javascript">$("<strong>你最喜欢的水果是？</strong><br>").replaceAll($("p")); </code></pre> <blockquote> <p>注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。</p> </blockquote> <h3>6.6 属性操作</h3> <p>在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。</p> <p><strong>1．获取属性和设置属性</strong></p> <p>如果要获取<code><p></code>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称。jQuery代码如下：</p> <pre><code class="javascript"> var p_txt = $('p').attr('title'); console.log(p_txt); </code></pre> <p>如果要设置<code><p></code>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。jQuery代码如下：</p> <pre><code class="javascript">$('p').attr('title','your title!'); </code></pre> <p>如果需要一次性为同一个元素设置多个属性，可以使用下面的代码来实现：</p> <pre><code class="javascript">// 使用json串的格式 $("p").attr({"title":"your title","name":'test'}); </code></pre> <blockquote> <p>注意：</p> <p>jQuery中的很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法。</p> </blockquote> <p><strong>2．删除属性</strong></p> <p>在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。</p> <p>如果需要删除<code><p></code>元素的title属性，可以使用下面的代码实现：</p> <pre><code class="javascript"> $('p').removeAttr("title"); </code></pre> <blockquote> <p>注意：jQuery1.6中新增了prop()和removeProp()，分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性。</p> </blockquote> <h3>6.7 样式操作</h3> <p><strong>1．获取样式和设置样式</strong></p> <p>HTML代码如下：</p> <pre><code class="javascript"><p class="myClass" title="选择你喜欢的水果">选择你喜欢的水果</p> </code></pre> <p>在上面的代码中，class也是<code><p></code>元素的属性，因此获取class和设置class都可以使用attr()方法来完成。</p> <p>例如使用attr()方法来获取<code><p></code>元素的class，jQuery代码如下：</p> <pre><code class="javascript">var p_class = $("p").attr("class"); //获取p元素的class </code></pre> <p>也可以使用attr()方法来设置<code><p></code>元素的class，jQuery代码如下：</p> <pre><code class="javascript">$("p").attr("class","high"); //设置<p>元素的class为high </code></pre> <p>上面的代码是将原来的class（myClass）替换为新的class（high）。如果此处需要的是“追加”效果，class属性变为“myClass high”，即myClass和high两种样式的叠加，那么我们可以使用addClass()方法。</p> <blockquote> <p>其他的细节可以查看样式的操作小节</p> </blockquote> <h3>6.7 设置和获取html、文本和值</h3> <p><strong>1．html()方法</strong></p> <p>此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。</p> <pre><code class="javascript">var p_html = $("p").html(); </code></pre> <p>如果需要设置某元素的HTML代码，那么也可以使用该方法，不过需要为它传递一个参数。例如要设置<p>元素的HTML代码，可以使用如下代码：</p> <pre><code class="javascript"> // 设置p的元素html代码 $("p").html("<strong>选择你喜欢的水果?</strong>") </code></pre> <p><strong>2．text()方法</strong></p> <p>此方法类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。继续使用以上的HTML代码</p> <pre><code class="html"><p class="myClass" title="选择你喜欢的水果"><strong>选择你喜欢的水果</strong></p> </code></pre> <p>用text()方法对<code><p></code>元素进行操作：</p> <pre><code class="javascript"> var p_text = $("p").text(); </code></pre> <p>与html()方法一样，如果需要为某元素设置文本内容，那么也需要传递一个参数。例如对<code><p></code>元素设置文本内容，代码如下：</p> <pre><code class="javascript"> $("p").text("text方法修改后的值"); </code></pre> <blockquote> <p>注意：</p> <p>（1）JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器。<br> （2）text()方法对HTML文档和XML文档都有效。</p> </blockquote> <p><strong>3．val()方法</strong></p> <p>此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。</p> <p>简单的案例说明：获得焦点、失去焦点的情况</p> <pre><code class="html"> <script> $(function(){ $("#address").focus(function(){ var text_value = $(this).val(); console.log(text_value); // 还可以用this.defaultValue if (text_value =="请输入邮箱地址"){ $(this).val(""); } }); $("#address").blur(function(){ var text_value = $(this).val(); if (text_value ==""){ $(this).val("请输入邮箱地址"); } }); }); </script> </head> <body> <input type="text" name="" id="address" value="请输入邮箱地址"><br><br> <input type="text" name="" id="password" value="请输入邮箱密码"><br><br> <input type="button" value="登录"> </code></pre> <h3>6.8 CSS操作</h3> <p><strong>1：CSS样式颜色</strong></p> <p>CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息，然而在jQuery中，这些都是非常的简单。</p> <p>可以直接利用css()方法获取元素的样式属性，jQuery代码如下：</p> <pre><code class="javascript">$("p").css("color"); //获取p元素的样式的颜色属性 </code></pre> <p>无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。</p> <p>也可以直接利用css()方法设置某个元素的单个样式，例如：</p> <pre><code class="javascript">$("p").css("color","red"); //获取p元素的样式的颜色属性 </code></pre> <p>与attr()方法一样，css()方法也可以同时设置多个样式属性，代码如下：</p> <pre><code class="javascript">$("p").css({"color":"red","fontSize":"30px"}); </code></pre> <blockquote> <p>注意：</p> <p>（1）如果值是数字，将会被自动转化为像素值。</p> <p>（2）在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：</p> <p><code>$("p").css({ fontSize : "30px"，backgroundColor : "#888888" })</code></p> <p>如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。</p> <p>总之建议大家加上引号，养成良好的习惯。</p> </blockquote> <p>对透明度的设置，可以直接使用opacity属性，jQuery已经处理好了兼容性的问题，如下代码所示，将<p>元素的透明度设置为半透明：</p> <pre><code class="javascript">$("p").css("opacity","0.5") </code></pre> <p>如果需要获取某个元素的height属性，则可以通过如下jQuery代码实现：</p> <pre><code class="javascript">$(element).css("height") </code></pre> <p><strong>2：宽度和高度</strong></p> <p>在jQuery中还有另外一种方法也可以获取元素的高度，即height()。它的作用是取得匹配元素当前计算的高度值（px）。jQuery代码如下：</p> <pre><code class="javascript">$("p").height() //获取<p>元素的高度值 </code></pre> <p>height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px。如果要用其他单位（例如em），则必须传递一个字符串。jQuery代码如下：</p> <pre><code class="javascript">$("p").height(100) //设置p元素的高度为100px </code></pre> <blockquote> <p>注意：</p> <p>（1）在jQuery1.2版本以后的height()方法可以用来获取window和document的高度。<br> （2）两者的区别是：css()方法获取的高度值与样式的设置有关，可能会得到"auto"，也可能得到"10px"之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。</p> </blockquote> <p>与height()方法对应的还有一个width()方法，它可以取得匹配元素的宽度值（px）。</p> <pre><code class="javascript">$("p").width() //获取p元素的宽度 </code></pre> <p>同样，width()方法也能用来设置元素的宽度。</p> <pre><code class="javascript">$("p").with("400px") //设置p元素的宽度 </code></pre> <p><strong>3：位置，偏移量</strong></p> <ul> <li><strong>offset()方法</strong></li> </ul> <p>它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。例如用它来获取<code><p></code>元素的的偏移量，jQuery代码如下：</p> <pre><code class="javascript">var offset = $("p").offset(); //获取元素的offset var left = offset.left; // 获取左偏移量 var top = offset.top //获取上偏移量 </code></pre> <ul> <li><strong>position()方法</strong></li> </ul> <p>它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。jQuery代码如下：</p> <pre><code class="javascript">var position = $("p").offset(); //获取元素的position var left = position.left; // 获取左偏移量 var top = position.top //获取上偏移量 </code></pre> <ul> <li><strong>scrollTop()方法和scrollLeft()方法</strong></li> </ul> <p>这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取<code><p></code>元素的滚动条距离：</p> <pre><code class="javascript">var $p = $("p"); //获取元素 var top = $p.scrollTop(); // 获取上偏移量 var left = $p.scrollLeft(); //获取左偏移量 </code></pre> <p>另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置：</p> <pre><code class="javascript">$("textarea").scrollTop(300) //元素的垂直滚动条到指定的地方 $("textarea").scrollLeft(300) //元素的水平滚动条到指定的地方 </code></pre> <h2>7. jQuery事件</h2> <h3>7.1 事件的绑定</h3> <p>在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：</p> <pre><code class="javascript">// bind()方法：第一个参数是事件的名字 第二个参数是事件处理函数 </code></pre> <h2>8. jQuery插件</h2> <h2>参考文章</h2> <blockquote> <p>《锋利的jQuery》</p> </blockquote> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1718611912041771008"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(jQuery)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1895799376211668992.htm" title="java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档" target="_blank">java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档</a> <span class="text-muted">今晚的月亮真好看</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://p</div> </li> <li><a href="/article/1895691093136175104.htm" title="使用jQuery获取select标签选中项的值" target="_blank">使用jQuery获取select标签选中项的值</a> <span class="text-muted">YOLO_CODE</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>在开发Web应用程序时，我们经常需要从表单元素中获取用户的输入数据。当涉及到标签（下拉列表）时，我们可能需要获取用户选择的选项的值。在这种情况下，我们可以使用jQuery来轻松地获取选中项的值。以下是一个示例代码，展示了如何使用jQuery来获取select标签选中项的值：HTML代码：<optionvalue</div> </li> <li><a href="/article/1895538884847136768.htm" title="计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档" target="_blank">计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档</a> <span class="text-muted">双双科技</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：htt</div> </li> <li><a href="/article/1895479138106535936.htm" title="java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw" target="_blank">java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw</a> <span class="text-muted">练练科技</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址</div> </li> <li><a href="/article/1895477122789601280.htm" title="java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw" target="_blank">java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw</a> <span class="text-muted">你眼里的星星</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AE%A0%E7%89%A9/1.htm">宠物</a> <div>java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lwjava毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址</div> </li> <li><a href="/article/1894661602100178944.htm" title="前端知识点个人实践" target="_blank">前端知识点个人实践</a> <span class="text-muted">fan510988896</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%AE%9E%E8%B7%B5%28%E5%89%8D%E7%AB%AF%29/1.htm">个人实践(前端)</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端知识点最佳实践前端一些记录js相乘小数点问题场景解决方案table值获取问题背景：需要遍历table，获取每行数据解决方案jquery的一些实践自己看吧前端一些记录js相乘小数点问题场景在js相乘中，会发现有很多小数点解决方案首先确定相乘精确位数，然后再末尾去零handleCutZero(result.toFixed(size)functionhandleCutZero(num){//拷贝一份</div> </li> <li><a href="/article/1894459887358898176.htm" title="uniapp h5端和app端 使用 turn.js" target="_blank">uniapp h5端和app端 使用 turn.js</a> <span class="text-muted">qq_31683775</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前提:添加页后,添加页与当前页会重叠在一起,不知道为什么,没有找到解决办法1.h5端Page1Page2Page3Page4Page5//npminstalljqueryturn.jsimport$from'jquery';import'turn.js';exportdefault{data(){return{}},mounted(){//确保DOM加载完成this.$nextTick(()=>{</div> </li> <li><a href="/article/1894072945790218240.htm" title="Viewer.js----图片查看" target="_blank">Viewer.js----图片查看</a> <span class="text-muted">小丸子灬</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>Viewer.js是一个用于展示图片、视频等多媒体内容的轻量级JavaScript库，提供了现代的图片查看器功能，比如放大、缩小、旋转、拖动等操作，适用于浏览器中查看图片等资源。官网地址：Viewer.js详细说明：Viewer.js–强大的JS/jQuery图片查看器_dowebok.如何使用Viewer.js1.1引入Viewer.js首先，你需要在HTML页面中引入Viewer.js。你可以</div> </li> <li><a href="/article/1894060968971923456.htm" title="Flask应用开发综合示例——博客系统" target="_blank">Flask应用开发综合示例——博客系统</a> <span class="text-muted">Botiway</span> <a class="tag" taget="_blank" href="/search/FlaskWeb/1.htm">FlaskWeb</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a> <div>下面是一个与前面不同的综合示例，展示如何使用Python+Flask+HTML+CSS+JavaScript+jQuery+Bootstrap+SQLAlchemy开发一个简单的博客系统。用户可以注册、登录、发布博客、查看博客列表以及删除自己的博客。1.项目结构blog_system/│├──app.py#Flask应用主文件├──models.py#SQLAlchemy模型定义├──requir</div> </li> <li><a href="/article/1893984576485781504.htm" title="node.js+mongodb" target="_blank">node.js+mongodb</a> <span class="text-muted">猫咪大大</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>安装：Node.js：0.10.32Express：4.10.2MongoDB：2.6.1sublime3过程中要用到的东西amazeui前端框架，放在public文件夹下与其他并列vue和jquery：vue.js，jquery-2.1.4.min.js，JSXTranformer.js放在javascripts里安装的包有："async":"^1.5.0","bluebird":"^3.3.5</div> </li> <li><a href="/article/1893870466863525888.htm" title="前端大厂常见面试题目|react|5-reacr ajax,axios,消息订阅发布机制，react-routerdom的api，基本路由使用，rdirct,antd，navlink,switch," target="_blank">前端大厂常见面试题目|react|5-reacr ajax,axios,消息订阅发布机制，react-routerdom的api，基本路由使用，rdirct,antd，navlink,switch,</a> <span class="text-muted">学习记录wanxiaowan</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%85%AB%E8%82%A1%E6%96%87/1.htm">前端八股文</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>第4章：Reactajax4.1.理解4.1.1.前置说明React本身只关注于界面,并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)4.1.2.常用的ajax请求库jQuery:比较重,如果需要另外引入不建议使用axios:轻量级,建议使用封装XmlHttpRequest对象的ajaxpromise风格</div> </li> <li><a href="/article/1893495647710015488.htm" title="Java计算机毕业设计大学生体测数据管理系统源码+系统+数据库+lw文档" target="_blank">Java计算机毕业设计大学生体测数据管理系统源码+系统+数据库+lw文档</a> <span class="text-muted">冰冰网络</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>Java计算机毕业设计大学生体测数据管理系统源码+系统+数据库+lw文档Java计算机毕业设计大学生体测数据管理系统源码+系统+数据库+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https</div> </li> <li><a href="/article/1893296765763907584.htm" title="jQuery Mobile 工具栏详解" target="_blank">jQuery Mobile 工具栏详解</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>jQueryMobile工具栏详解引言jQueryMobile是一个基于jQuery的触摸优先的移动Web开发框架，它简化了移动Web应用的开发过程。工具栏（Toolbar）是jQueryMobile中一个重要的UI组件，它为用户提供了导航和操作的工具。本文将详细介绍jQueryMobile工具栏的用法、属性、样式以及与页面布局的结合。工具栏的基本用法在jQueryMobile中，工具栏可以通过标</div> </li> <li><a href="/article/1893275589708673024.htm" title="error Command failed with exit code 1" target="_blank">error Command failed with exit code 1</a> <span class="text-muted">泡泡Java</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>从传统JQuery转变到Node.js最烦的就是一接手新项目就得npminstall，浪费大量时间不说还总会报莫明其妙的错误，这次又遇到了一个errorCommandfailedwithexitcode1。因为它的相关处报的问题可能和npm本身有关，我就用yarninstall规避，并且也确实能yarnstart跑通项目。但就在我想把它打包成dist的时候，yarnbuild就又抛出了这么一个问题</div> </li> <li><a href="/article/1893221991972925440.htm" title="【Rust】——使用Drop Trait 运行清理代码和Rc＜T＞ 引用计数智能指针" target="_blank">【Rust】——使用Drop Trait 运行清理代码和Rc＜T＞ 引用计数智能指针</a> <span class="text-muted">Y小夜</span> <a class="tag" taget="_blank" href="/search/Rust%EF%BC%88%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3%E9%87%8D%E7%82%B9%E6%80%BB%E7%BB%93%EF%BC%89/1.htm">Rust（官方文档重点总结）</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客目录使用DropTrait运行清理代码通过std::mem::drop提早丢弃值</div> </li> <li><a href="/article/1893141289281581056.htm" title="java-net-php-python-springboot社区志愿者管理系统计算机毕业设计程序" target="_blank">java-net-php-python-springboot社区志愿者管理系统计算机毕业设计程序</a> <span class="text-muted">鸿源网络</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>java-net-php-python-springboot社区志愿者管理系统计算机毕业设计程序java-net-php-python-springboot社区志愿者管理系统计算机毕业设计程序本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据</div> </li> <li><a href="/article/1893013640957718528.htm" title="Java毕业设计——＞ Thymeleaf+SpringBoot+SpringDataJPA实现的中小医院信息管理系统" target="_blank">Java毕业设计——＞ Thymeleaf+SpringBoot+SpringDataJPA实现的中小医院信息管理系统</a> <span class="text-muted">Java天下第1</span> <a class="tag" taget="_blank" href="/search/Java%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%EF%BC%88%E6%BA%90%E7%A0%81%E5%92%8C%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">Java毕业设计（源码和数据库</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E5%88%86%E6%9C%89lunwen%EF%BC%89/1.htm">部分有lunwen）</a><a class="tag" taget="_blank" href="/search/%E5%8C%BB%E9%99%A2%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9FSSM/1.htm">医院管理系统SSM</a><a class="tag" taget="_blank" href="/search/%E5%8C%BB%E9%99%A2%E4%BF%A1%E6%81%AF%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/1.htm">医院信息管理系统</a><a class="tag" taget="_blank" href="/search/%E8%8D%AF%E6%88%BF%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/1.htm">药房管理系统</a><a class="tag" taget="_blank" href="/search/SSM%E5%8C%BB%E9%99%A2/1.htm">SSM医院</a><a class="tag" taget="_blank" href="/search/%E5%8C%BB%E9%99%A2SSM/1.htm">医院SSM</a> <div>本系统是基于Thymeleaf+SpringBoot+SpringDataJPA实现的的中小医院信息管理系统。简单实现了挂号收费，门诊管理，划价收费，药房取药，体检管理，药房管理，系统维护等基础功能。难度等级：中等技术栈编辑器IntelliJIDEA2019.1.1(UltimateEdition)前端技术基础：html+css+JavaScript框架：Bootstrap+JQuery后端技术S</div> </li> <li><a href="/article/1892401826364452864.htm" title="jQuery UI CSS 框架 API" target="_blank">jQuery UI CSS 框架 API</a> <span class="text-muted">lly202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分，它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能，帮助开发者更好地利用这一工</div> </li> <li><a href="/article/1892292232627679232.htm" title="vue面试题|[2025-1-10]" target="_blank">vue面试题|[2025-1-10]</a> <span class="text-muted">○陈</span> <a class="tag" taget="_blank" href="/search/vue%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">vue面试题</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.vue和jquery的区别是什么？1.原理不同vue就是数据绑定；jq是先获取dom再处理2.着重点不同vue是数据驱动，jq是着重于页面3.操作不同4.未来发展不同2.vuex的响应式处理vuex是vue的状态管理工具vue中可以直接触发methods中的方法，vuex是不可以的。处理异步，当触发事件的时候，会通过dispatch来访问actions中的方法，actions中的commit会</div> </li> <li><a href="/article/1892267275638075392.htm" title="electron学习笔记" target="_blank">electron学习笔记</a> <span class="text-muted">weixin_46452138</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</div> </li> <li><a href="/article/1892217314393255936.htm" title="java脚本弹出输入框,使用弹出框编辑(增加)表单内容" target="_blank">java脚本弹出输入框,使用弹出框编辑(增加)表单内容</a> <span class="text-muted">jordan.xue</span> <a class="tag" taget="_blank" href="/search/java%E8%84%9A%E6%9C%AC%E5%BC%B9%E5%87%BA%E8%BE%93%E5%85%A5%E6%A1%86/1.htm">java脚本弹出输入框</a> <div>0、背景使用Amazeui中Prompt模态窗口Modal1、JQuery功能：表单复位获取表单的值，并显示在修改弹出框中(文本框、单选、多选、下拉框)发送Post异步请求给后台自刷新$(function(){//编辑功能$('table.edit').on("click",function(){//表单复位document.getElementById("form-machineRole").r</div> </li> <li><a href="/article/1892131069923225600.htm" title="jQuery AJAX 方法详解" target="_blank">jQuery AJAX 方法详解</a> <span class="text-muted">froginwe11</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>jQueryAJAX方法详解引言随着互联网技术的不断发展，前端开发领域的技术也在不断更新迭代。jQuery作为一种广泛使用的前端JavaScript库，极大地简化了DOM操作和事件处理。在众多jQuery功能中，AJAX（AsynchronousJavaScriptandXML）方法尤为突出，它允许我们在不重新加载整个页面的情况下与服务器进行异步通信。本文将详细介绍jQueryAJAX方法的使用，</div> </li> <li><a href="/article/1891800509359124480.htm" title="基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件" target="_blank">基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件</a> <span class="text-muted">练练科技</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7</div> </li> <li><a href="/article/1891800126494666752.htm" title="java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署" target="_blank">java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署</a> <span class="text-muted">花样1999</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ</div> </li> <li><a href="/article/1891800127509688320.htm" title="java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署" target="_blank">java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署</a> <span class="text-muted">沪港</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码</div> </li> <li><a href="/article/1891700709372522496.htm" title="ASP.NET MVC5配置百度富文本编辑器" target="_blank">ASP.NET MVC5配置百度富文本编辑器</a> <span class="text-muted">plcc123</span> <a class="tag" taget="_blank" href="/search/ASP.NET/1.htm">ASP.NET</a><a class="tag" taget="_blank" href="/search/MVC/1.htm">MVC</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>简单说一下，.netMVC5如何配置百度富文本编辑器吧。1、首先去下载百度富文本编辑器2、解压放到项目文件夹Content/ueditor3、在视图里面添加@Scripts.Render("~/bundles/jqueryval","~/Content/ueditor/ueditor.config.js","~/Content/ueditor/editor_api.js","~/Content/u</div> </li> <li><a href="/article/1891524633757282304.htm" title="2021-04-15" target="_blank">2021-04-15</a> <span class="text-muted">一般橙</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>JQuery项目JS模块化分析(一)Jquery在线手册新增一个组件例按钮组件varYIUI=YIUI||{};(function(){//立即执行匿名函数,模拟模块化YIUI.Yes_Button=function(options){//匿名函数表达式varbtntemplate={el:$(""),caption:"按钮",init:function(){varself=this;var$in</div> </li> <li><a href="/article/1891490057295032320.htm" title="阿里云视频点播，基于thinkphp8上传视频" target="_blank">阿里云视频点播，基于thinkphp8上传视频</a> <span class="text-muted">quweiie</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a> <div>前端参考官方示例(jQuery版)阿里云JavaScript上传SDKDemo(使用jquery).container{width:1200px;margin:0auto;}.input-control{margin:5px0;}.input-controllabel{font-size:14px;color:#333;width:30%;text-align:right;display:inli</div> </li> <li><a href="/article/1891447924274032640.htm" title="html元素后追加内容,jquery 元素控制(追加元素/追加内容)介绍及应用" target="_blank">html元素后追加内容,jquery 元素控制(追加元素/追加内容)介绍及应用</a> <span class="text-muted">王大明白</span> <a class="tag" taget="_blank" href="/search/html%E5%85%83%E7%B4%A0%E5%90%8E%E8%BF%BD%E5%8A%A0%E5%86%85%E5%AE%B9/1.htm">html元素后追加内容</a> <div>一、在元素内部/外部追加元素append,prepend:添加到子元素before，after：作为兄弟元素添加html：在我的后面追加一条新闻Javascript:jQuery(function(){//在元素内部追加内容$("#content").append("姚明退役了...");})在#content里面添加元素，这是把姚明退役了...作为子元素添加到#content，如果想在元素外部追</div> </li> <li><a href="/article/1890984481792258048.htm" title="js 使用缓存判断在规定时间内显示一次弹框" target="_blank">js 使用缓存判断在规定时间内显示一次弹框</a> <span class="text-muted">洪洪呀</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>js使用缓存判断在规定时间内显示一次弹框功能拆分，新用户注册完成登录跳转首页，js根据注册时间判断显示一个新手指引的弹窗，只在注册当天登录且显示一次jQuery(document).ready(function($){getWinnerModalShow()});//新手指引functiongetWinnerModalShow(){varwinnerModal=newbootstrap.Modal</div> </li> <li><a href="/article/33.htm" title="Spring的注解积累" target="_blank">Spring的注解积累</a> <span class="text-muted">yijiesuifeng</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E8%A7%A3/1.htm">注解</a> <div>用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc</div> </li> <li><a href="/article/160.htm" title="传感器" target="_blank">传感器</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E4%BC%A0%E6%84%9F%E5%99%A8/1.htm">传感器</a> <div>android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void </div> </li> <li><a href="/article/287.htm" title="[光磁与探测]金吕玉衣的意义" target="_blank">[光磁与探测]金吕玉衣的意义</a> <span class="text-muted">comsci</span> <div>      这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代</div> </li> <li><a href="/article/414.htm" title="精简的反序打印某个数" target="_blank">精简的反序打印某个数</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8D%B0/1.htm">打印</a> <div>以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;</div> </li> <li><a href="/article/541.htm" title="PHP：6种方法获取文件的扩展名" target="_blank">PHP：6种方法获取文件的扩展名</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%89%A9%E5%B1%95%E5%90%8D/1.htm">扩展名</a> <div>  PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr </div> </li> <li><a href="/article/668.htm" title="面试111" target="_blank">面试111</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div> 1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final</div> </li> <li><a href="/article/795.htm" title="XML的四种解析方式" target="_blank">XML的四种解析方式</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/dom/1.htm">dom</a><a class="tag" taget="_blank" href="/search/jdom/1.htm">jdom</a><a class="tag" taget="_blank" href="/search/dom4j/1.htm">dom4j</a><a class="tag" taget="_blank" href="/search/sax/1.htm">sax</a> <div>在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server </div> </li> <li><a href="/article/922.htm" title="wordpress中常见的操作" target="_blank">wordpress中常见的操作</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E6%B3%A8%E5%86%8C/1.htm">中文注册</a><a class="tag" taget="_blank" href="/search/wordpress/1.htm">wordpress</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E9%99%A4%E8%8F%9C%E5%8D%95/1.htm">移除菜单</a> <div>1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false </div> </li> <li><a href="/article/1049.htm" title="小飞飞学管理-1" target="_blank">小飞飞学管理-1</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/%E7%AE%A1%E7%90%86/1.htm">管理</a> <div>项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指</div> </li> <li><a href="/article/1176.htm" title="IO输入输出部分探讨" target="_blank">IO输入输出部分探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a> <div>  //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt</div> </li> <li><a href="/article/1303.htm" title="getElementById的用法" target="_blank">getElementById的用法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a> <div>        getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n</div> </li> <li><a href="/article/1430.htm" title="励志经典语录" target="_blank">励志经典语录</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97/1.htm">励志</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E7%94%9F/1.htm">人生</a> <div>经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生</div> </li> <li><a href="/article/1557.htm" title="[MongoDB学习笔记三]MongoDB分片" target="_blank">[MongoDB学习笔记三]MongoDB分片</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs</div> </li> <li><a href="/article/1684.htm" title="【Spark八十三】BlockManager在Spark中的使用场景" target="_blank">【Spark八十三】BlockManager在Spark中的使用场景</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/manager/1.htm">manager</a> <div>1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan</div> </li> <li><a href="/article/1811.htm" title="yum方式部署zabbix" target="_blank">yum方式部署zabbix</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/yum%E6%96%B9%E5%BC%8F%E9%83%A8%E7%BD%B2zabbix/1.htm">yum方式部署zabbix</a> <div>安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-</div> </li> <li><a href="/article/1938.htm" title="Hibernate4和MySQL5.5自动创建表失败问题解决方法" target="_blank">Hibernate4和MySQL5.5自动创建表失败问题解决方法</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/J2EE/1.htm">J2EE</a><a class="tag" taget="_blank" href="/search/Hibernate4/1.htm">Hibernate4</a> <div>今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中</div> </li> <li><a href="/article/2065.htm" title="Netty源码学习-FrameDecoder" target="_blank">Netty源码学习-FrameDecoder</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec</div> </li> <li><a href="/article/2192.htm" title="SQL行列转换方法" target="_blank">SQL行列转换方法</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E8%A1%8C%E5%88%97%E8%BD%AC%E6%8D%A2/1.htm">行列转换</a> <div> create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93) </div> </li> <li><a href="/article/2319.htm" title="中文编码测试" target="_blank">中文编码测试</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a> <div>循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j </div> </li> <li><a href="/article/2446.htm" title="hive 客户端查询报堆内存溢出解决方法" target="_blank">hive 客户端查询报堆内存溢出解决方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E5%A0%86%E5%86%85%E5%AD%98%E6%BA%A2%E5%87%BA/1.htm">堆内存溢出</a> <div>hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us</div> </li> <li><a href="/article/2573.htm" title="人有多大懒，才有多大闲 (评论『卓有成效的程序员』)" target="_blank">人有多大懒，才有多大闲 (评论『卓有成效的程序员』)</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>  卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标</div> </li> <li><a href="/article/2700.htm" title="Eclipse简单有用的配置" target="_blank">Eclipse简单有用的配置</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation</div> </li> <li><a href="/article/2827.htm" title="在tomcat上面安装solr4.8.0全过程" target="_blank">在tomcat上面安装solr4.8.0全过程</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/Solr/1.htm">Solr</a><a class="tag" taget="_blank" href="/search/solr4.0%E5%90%8E%E7%9A%84%E7%89%88%E6%9C%AC%E5%AE%89%E8%A3%85/1.htm">solr4.0后的版本安装</a><a class="tag" taget="_blank" href="/search/solr4.8.0%E5%AE%89%E8%A3%85/1.htm">solr4.8.0安装</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址</div> </li> <li><a href="/article/2954.htm" title="Android APP通用型拒绝服务、漏洞分析报告" target="_blank">Android APP通用型拒绝服务、漏洞分析报告</a> <span class="text-muted">gg163</span> <a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E/1.htm">漏洞</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%9E%90/1.htm">分析</a> <div>点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要</div> </li> <li><a href="/article/3081.htm" title="HoverTree项目已经实现分层" target="_blank">HoverTree项目已经实现分层</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/ASP.ENT/1.htm">ASP.ENT</a> <div>HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对</div> </li> <li><a href="/article/3208.htm" title="Google Maps API v3: Remove Markers 移除标记" target="_blank">Google Maps API v3: Remove Markers 移除标记</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/google+maps+api/1.htm">google maps api</a> <div>Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )</div> </li> <li><a href="/article/3335.htm" title="jQuery选择器总结" target="_blank">jQuery选择器总结</a> <span class="text-muted">lq38366</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E9%80%89%E6%8B%A9%E5%99%A8/1.htm">选择器</a> <div>  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40</div> </li> <li><a href="/article/3462.htm" title="基础数据结构和算法六：Quick sort" target="_blank">基础数据结构和算法六：Quick sort</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Quicksort/1.htm">Quicksort</a> <div>Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t</div> </li> <li><a href="/article/3589.htm" title="如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作" target="_blank">如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下： </div> </li> <li><a href="/article/3716.htm" title="Mybatis实用Mapper SQL汇总示例" target="_blank">Mybatis实用Mapper SQL汇总示例</a> <span class="text-muted">wdmcygah</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8/1.htm">实用</a> <div>Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>