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/1901109170157973504.htm" title="什么是遍历？" target="_blank">什么是遍历？</a> <span class="text-muted">dengjuanshou7445</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过jQuery遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对DOM进行遍历。图示解释：元素是的父元素，同时是其中所有内容的祖先。元素是元素的</div> </li> <li><a href="/article/1900941619054571520.htm" title="AI大模型测试用例生成平台" target="_blank">AI大模型测试用例生成平台</a> <span class="text-muted">王根生</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%BC%80%E5%8F%91/1.htm">测试开发</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B/1.htm">测试用例</a><a class="tag" taget="_blank" href="/search/%E8%B4%A8%E9%87%8F%E4%BF%9D%E9%9A%9C/1.htm">质量保障</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a><a class="tag" taget="_blank" href="/search/nlp/1.htm">nlp</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E7%AE%A1%E7%90%86/1.htm">测试管理</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a> <div>AI测试用例生成平台项目背景技术栈业务描述项目展示项目重难点项目背景针对传统接口测试用例设计高度依赖人工经验、重复工作量大、覆盖场景有限等行业痛点，基于大语言模型技术实现接口测试用例智能生成系统。技术栈LangChain框架+GLM-4模型+PromptEngineering+Flask+Python+Bootstrap+jQuery业务描述用户在该平台上传Markdown形式的接口文档，点击生成</div> </li> <li><a href="/article/1900692049091424256.htm" title="【JS】JS中的jQuery库简介及使用方法" target="_blank">【JS】JS中的jQuery库简介及使用方法</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>jQuery简介及使用方法jQuery简介如何使用jQuery1导入jQuery库2编写自己的jQuery文件3jQuery语法3.1基础语法3.2文档就绪函数3.3选择器3.4事件绑定函数结语jQuery简介jQuery是一个流行的JavaScript库，用于简化JavaScript编程。它提供了许多便捷的方法来处理DOM操作、事件处理、动画效果等，使得JavaScript开发变得更加简单和高效</div> </li> <li><a href="/article/1900672239892754432.htm" title="计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+lw文档)" target="_blank">计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+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/mysql/1.htm">mysql</a> <div>计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+lw文档)计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+lw文档)本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win1</div> </li> <li><a href="/article/1900505852633214976.htm" title="jQuery的substring由后向前截取字符串的方法" target="_blank">jQuery的substring由后向前截取字符串的方法</a> <span class="text-muted">潮易</span> <div>substring方法定义和用法substring方法用于提取字符串中介于两个指定下标之间的字符。语法stringObject.substring(start,stop)参数描述start必需。一个非负的整数，规定要提取的子串的第一个字符在stringObject中的位置。stop可选。一个非负的整数，比要提取的子串的最后一个字符在stringObject中的位置多1。如果省略该参数，那么返回的子</div> </li> <li><a href="/article/1900489337112424448.htm" title="JavaScript的学习6——jQuery" target="_blank">JavaScript的学习6——jQuery</a> <span class="text-muted">十五春会</span> <div>文章目录jQuery选择器按ID查找按tag查找按class查找按属性查找组合查找多项选择器练习层级选择器子选择器（ChildSelector）过滤器（Filter）表单相关练习查找和过滤操作DOM修改Text和HTML修改CSS显示和隐藏DOM获取DOM信息操作表单修改DOM结构添加DOM删除节点练习事件鼠标事件键盘事件其他事件事件参数取消绑定事件触发条件浏览器安全限制练习动画show/hide</div> </li> <li><a href="/article/1900201249408610304.htm" title="使用jQuery实现动态下划线效果的导航栏" target="_blank">使用jQuery实现动态下划线效果的导航栏</a> <span class="text-muted">几度泥的菜花</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> <div>在现代网页设计中，动态效果是提升用户体验的重要手段之一。今天，我们将通过一个简单的例子，展示如何使用jQuery实现一个带有动态下划线效果的导航栏。这个效果在用户点击不同的导航标签时，下划线会平滑地移动到当前选中的标签下方，并且标签的样式也会随之改变首先，我们需要一个基本的HTML结构来创建导航栏。假设我们有四个导航标签，每个标签都有一个共同的类名item，并且我们还需要一个div元素来作为下划线</div> </li> <li><a href="/article/1900033558228037632.htm" title="Node_文件上传&令牌" target="_blank">Node_文件上传&令牌</a> <span class="text-muted">katsukichan</span> <a class="tag" taget="_blank" href="/search/Node/1.htm">Node</a> <div>信息获取来源EnoYao创建脚手架expresskatsuki-project（express名称）在katsuki-project目录下安装依赖包npminstall上传单文件项目在katsuki-project安装multer模块npminstallmulter--save目录中创建一个uploads文件夹，不创建运行也会自动创建项目结构publicjavascriptsjquery.jsup</div> </li> <li><a href="/article/1899931788558528512.htm" title="Effeckt.css项目：CSS交互动画应用集锦" target="_blank">Effeckt.css项目：CSS交互动画应用集锦</a> <span class="text-muted">weixin_33982670</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来，例如：弹窗、按钮、导航、列表、页面切换等等。Effeckt.css是一个集合了众多新鲜而又实用的CSS/jQuery动画效果应用，既适用于网站也适用于手机Web开发，例如：弹窗、按钮、导航、列表、页面切换等等，这些特效动画都能给你的网站提升一定用户体验，</div> </li> <li><a href="/article/1899683197273305088.htm" title="Jquery源码分析" target="_blank">Jquery源码分析</a> <span class="text-muted">W_wjl1900</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a> <div>转载地址原作者博客/*!*jQueryJavaScriptLibraryv1.10.2*http://jquery.com/**IncludesSizzle.js*http://sizzlejs.com/**Copyright2005,2013jQueryFoundation,Inc.andothercontributors*ReleasedundertheMITlicense*http://jq</div> </li> <li><a href="/article/1899595565394620416.htm" title="js 封装ajax方法吗,原生JS封装ajax方法" target="_blank">js 封装ajax方法吗,原生JS封装ajax方法</a> <span class="text-muted">里小咸</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%B0%81%E8%A3%85ajax%E6%96%B9%E6%B3%95%E5%90%97/1.htm">封装ajax方法吗</a> <div>jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会显得页面臃肿。这时我们就需要用原生JS写一个ajax函数了。/*封装ajax函数*@param{string}opt.typehttp连接的方式，包括POST和GET两种方式*@param{string}opt.url发送请</div> </li> <li><a href="/article/1899436895264370688.htm" title="JavaEE 项目常见错误解决方案" target="_blank">JavaEE 项目常见错误解决方案</a> <span class="text-muted">一弦一柱</span> <a class="tag" taget="_blank" href="/search/JavaEE/1.htm">JavaEE</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E8%A7%81%E9%94%99%E8%AF%AF/1.htm">常见错误</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a><a class="tag" taget="_blank" href="/search/JSP/1.htm">JSP</a><a class="tag" taget="_blank" href="/search/404/1.htm">404</a> <div>JavaEE项目常见错误解决方案数据库连接JavaBean获取不到数据库字段值或出现意料之外的值业务中出现null或""404NOTFOUNDGET请求中文乱码form表单提交中文乱码最近的实训中，练了一个比较基础的项目，JSP+Servlet+JavaBean，完成两张表的CRUD操作，前端使用Bootstrap和JQuery，交互使用AJAX，IDE选用Eclipse,在时间比较仓促的情况下完</div> </li> <li><a href="/article/1899324534067097600.htm" title="关于Jquery基本内容一" target="_blank">关于Jquery基本内容一</a> <span class="text-muted">gloria123_</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> <div>jQuery(jQ)html+css+js1jQ是一个js库,封装了大量的特定的集合(函数和方法)如animate()、css()、show()等2使用jQ大大提高开发效率,简化dom操作常见的js库jQueryYUIDojoExtJszeptojQuery选择器$(selector)筛选方法parent()$(“li”).parent()children(selector)$(“ul”).chi</div> </li> <li><a href="/article/1899060597090217984.htm" title="计算机毕业设计springboot晋中学院失物招领系统的设计与实现unst3源码+系统+程序+lw文档+部署" target="_blank">计算机毕业设计springboot晋中学院失物招领系统的设计与实现unst3源码+系统+程序+lw文档+部署</a> <span class="text-muted">呦呦网络</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>计算机毕业设计springboot晋中学院失物招领系统的设计与实现unst3源码+系统+程序+lw文档+部署计算机毕业设计springboot晋中学院失物招领系统的设计与实现unst3源码+系统+程序+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Wi</div> </li> <li><a href="/article/1899049884116381696.htm" title="计算机毕业设计JAVA人职匹配推荐系统mybatis+源码+调试部署+系统+数据库+lw" target="_blank">计算机毕业设计JAVA人职匹配推荐系统mybatis+源码+调试部署+系统+数据库+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/mybatis/1.htm">mybatis</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人职匹配推荐系统mybatis+源码+调试部署+系统+数据库+lw计算机毕业设计JAVA人职匹配推荐系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5</div> </li> <li><a href="/article/1898704137500028928.htm" title="员工管理系统（简单版）" target="_blank">员工管理系统（简单版）</a> <span class="text-muted">java王不二</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1、项目介绍员工管理系统9功能简单，实现了用户的注册和登录、增删改查用户，适合新手学习2、项目技术后端框架：Servlet、mvc模式前端技术：jsp、css、JavaScript、JQuery3、开发环境JAVA版本：JDK1.8IDE类型：IDEA、Eclipse都可运行tomcat版本：Tomcat7-10版本均可数据库类型：MySql（5.x和8.x版本都可）maven项目：否硬件环境：W</div> </li> <li><a href="/article/1898692157116575744.htm" title="javaweb——AJAX快速入门" target="_blank">javaweb——AJAX快速入门</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/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</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>目录AJAX1.AJAX介绍2.AJAX概述3.为什么使用AJAX特点应用场景运行原理4.JQuery的AJAX```JS参数**post方式****get方式**区别：AJAX1.AJAX介绍传统项目前后端不分离，用户触发一个http请求服务器，然后服务器接收之后，在做出响应到用户，并且返回一个新的页面，也就是说交互都是通过页面刷新或页面跳转来实现。这样的方式对于用户体验来将其实并不友好，少量的</div> </li> <li><a href="/article/1898690644294037504.htm" title="JavaWeb——AJAX(附三级联动省、市、区案例）" target="_blank">JavaWeb——AJAX(附三级联动省、市、区案例）</a> <span class="text-muted">weixin_43820008</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a> <div>目录1.定义1.1优点2.基于jQuery的AJAX2.1语法2.2JSON2.3案例3.传统的WEB数据交互VSAJAX数据交互4.AJAX原理5.三级联动案例5.1案例说明5.2代码1.定义AJAX：异步的JavaScript和xml，并不是新的编程，指的是一种交互方式，异步加载，客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个页面（局部刷新）1.1优点局部刷新，效果更好用户体验更</div> </li> <li><a href="/article/1898675992101187584.htm" title="html中绑定点击事件的三种方法" target="_blank">html中绑定点击事件的三种方法</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>HTML中为button绑定事件的方式有三种。例如以下标签：submit一、使用jquery进行绑定$('#btn_submit').click(function(){});二、使用原生js绑定（注意：InternetExplorer8及更早IE版本不支持addEventListener()方法，Opera7.0及Opera更早版本也不支持。这类浏览器版本要使用attachEvent()方法来添加</div> </li> <li><a href="/article/1898437140317007872.htm" title="jQuery 三 jQuery事件注册、处理、绑定on()、解绑 off()、自动触发事件 trigger() ；事件对象——阻止冒泡、默认行为 ；对象拷贝extend；多库共存，插件，本地存储案例" target="_blank">jQuery 三 jQuery事件注册、处理、绑定on()、解绑 off()、自动触发事件 trigger() ；事件对象——阻止冒泡、默认行为 ；对象拷贝extend；多库共存，插件，本地存储案例</a> <span class="text-muted">Hyman-ya</span> <a class="tag" taget="_blank" href="/search/jQuery/1.htm">jQuery</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1.jQuery事件注册语法：element.事件(function(){事件处理程序})1.单个事件注册$("div").click(function(){$(this).css("background","purple");});$("div").mouseenter(function(){$(this).css("background","skyblue");});其他事件和原生基本一致。比</div> </li> <li><a href="/article/1897935271907880960.htm" title="html js实现列表自动滚动" target="_blank">html 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%88%97%E8%A1%A8%E6%BB%9A%E5%8A%A8/1.htm">列表滚动</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8/1.htm">自动滚动</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A/1.htm">数据绑定</a><a class="tag" taget="_blank" href="/search/%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6/1.htm">鼠标事件</a> <div>1.列表滚动js/*蔡燃列表自动滚动v1.0.0备注：需要jquery*//***列表自动滚动*@paramdata列表数据*@paramel列表绑定的元素*@paramoptions配置*/functionlistRoll(data,el,options){vardefaults={movePx:1,//移动距离（px）moveTime:20,//移动时间间隔(毫秒)showNum:5,//显示</div> </li> <li><a href="/article/1897845187149885440.htm" title="jQuery 入门到精通" target="_blank">jQuery 入门到精通</a> <span class="text-muted">abments</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><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> <div>jQuery入门到精通：详尽指南目录jQuery简介jQuery基础安装jQueryjQuery选择器DOM操作事件处理jQuery进阶动画效果AJAX插件项目实践简单的待办事项列表获取和显示API数据高级技巧性能优化调试技巧资源和总结1.jQuery简介jQuery是一个快速、小巧且功能丰富的JavaScript库，它使HTML文档的遍历和操作、事件处理、动画以及AJAX交互更简单。jQuery</div> </li> <li><a href="/article/1897517846397775872.htm" title="VUE + Jquery 集成的一个简易数学公式编辑器" target="_blank">VUE + Jquery 集成的一个简易数学公式编辑器</a> <span class="text-muted">今天也想MK代码</span> <a class="tag" taget="_blank" href="/search/%E5%8A%AA%E5%8A%9B%E6%8A%8A%E6%83%B3%E6%B3%95%E5%AE%9E%E7%8E%B0/1.htm">努力把想法实现</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>前端数学公式自定义编辑界面可自定义未知数、运算符号、函数自己写的一个数学公式简单编辑器，本想找开源，无奈找不到。如果有开源，请发我一份，参考参考。在此感谢。静态1、简单公式：例如x+y将公式中的变量（x,y）以及运算符(+,-)放在一个数组中，遍历这个这个数组组成一个html字符串，然后显示在页面。数组定义为：type定义是值还是运算符valueDatas:[{type:'value',domTy</div> </li> <li><a href="/article/1897412544893612032.htm" title="vscode安装使用，开发python项目环境配置" target="_blank">vscode安装使用，开发python项目环境配置</a> <span class="text-muted">橘子菌菌</span> <a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>#一、vscode设置python解释器1.使用vscode添加需要的插件在扩展商店汉化chinese进行python开发python完成汉化以及提示补全django用到的GithistoryPythonDjangoDjangoTemplate其它可能用到：jqueryCodeSnippetsBootstrap3Snippets2.ctrl+shift+p调出输入框SelectInterprete</div> </li> <li><a href="/article/1897193596487004160.htm" title="jQuery学习笔记：属性操作、内容文本值、元素操作、尺寸、位置操作、事件注册与处理、对象拷贝（浅拷贝与深拷贝）、多库共存问题" target="_blank">jQuery学习笔记：属性操作、内容文本值、元素操作、尺寸、位置操作、事件注册与处理、对象拷贝（浅拷贝与深拷贝）、多库共存问题</a> <span class="text-muted">miraculous111</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录jQuery属性操作设置或获取元素固有属性值prop()设置或者获取自定义属性值attr()数据缓存data()jQuery内容文本值普通元素内容html()(相当于原生innerHTML)普通元素文本内容text()(相当于原生innerText)表单的val()jQuery元素操作遍历元素语法一：语法二：创建元素添加元素内部添加外部添加删除元素jQuery尺寸、位置操作jQuery尺寸</div> </li> <li><a href="/article/1897000898031316992.htm" title="jQuery获取并解析API接口Json数据的方法" target="_blank">jQuery获取并解析API接口Json数据的方法</a> <span class="text-muted">qhdzj87</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%EF%BC%88JS/1.htm">前端（JS</a><a class="tag" taget="_blank" href="/search/jQuery%E7%AD%89%EF%BC%89/1.htm">jQuery等）</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>json是API的常用数据交换格式，在Web开发中，除了后端程序，前端也可以借助JavaScript技术获取并解析API中的json数据，这里介绍一种通过jQuery的$get()函数获取并解析API接口Json数据的方法。其基本语法如下：$get(url,[data],[callback])在$get()函数中，包含了三个参数。其中：url:请求的地址;data:请求数据的列表;callback</div> </li> <li><a href="/article/1896724477853626368.htm" title="JQuery的使用" target="_blank">JQuery的使用</a> <span class="text-muted">QTX18730</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> <div>$和jQueryjQuery文件就是一个自执行函数，也就是自执行文件，这个自执行文件就是给window对象添加一个jQuery属性和$属性，$参数传递不同，效果也不同，如果参数传递的是一个匿名函数，那$就是一个入口函数。例：$(function(){});如果参数传递的是一个字符串，那$就是一个选择器或是创建标签。例：$("#test1")例：$('略略略')引入JQuery文件的方法：本地引入：</div> </li> <li><a href="/article/1896628528728829952.htm" title="JQuery是什么" target="_blank">JQuery是什么</a> <span class="text-muted">编程芝士</span> <a class="tag" taget="_blank" href="/search/Java%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0/1.htm">Java基础学习</a> <div>jQuery是什么概念：一个JavaScript框架。简化JS开发jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，</div> </li> <li><a href="/article/1896626008912621568.htm" title="什么是 jQuery ？" target="_blank">什么是 jQuery ？</a> <span class="text-muted">卡卡西最近怎么样</span> <a class="tag" taget="_blank" href="/search/30%E5%A4%A9%E6%8B%BF%E4%B8%8B%E5%89%8D%E7%AB%AF%E5%BF%85%E7%BB%8F%E4%B9%8B%E8%B7%AF/1.htm">30天拿下前端必经之路</a><a class="tag" taget="_blank" href="/search/jQuery/1.htm">jQuery</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</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><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>我们一定已经对jQuery有一定的印象吧，在我们学习原生JavaScript的过程中一定经常听到这个词，那究竟什么是jQuery呢？？？在开始告诉大家什么是jQuery之前呢，我们先讨论一下什么叫‘’JavaScript库‘’JavaScript库：JavaScript库是一个已经封装好了函数和方法的集合，例如我们在原生JS中做过的动画函数等等都属于JavaScript库的内容，或者我们可以理解为</div> </li> <li><a href="/article/1896618058177376256.htm" title="什么是jQuery？jQuery有哪些优势？" target="_blank">什么是jQuery？jQuery有哪些优势？</a> <span class="text-muted">重庆千锋</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E7%A8%8B%E5%BA%8F/1.htm">编程程序</a><a class="tag" taget="_blank" href="/search/IT%E8%A1%8C%E4%B8%9A/1.htm">IT行业</a> <div>什么是jQueryjQuery是一款跨浏览器的开源JavaScript库，它的核心理念是writeless,domore(写得更少，做得更多)。通过对JavaScript代码的封装，使得DOM、事件处理、动画效果Ajax等功能的实现代码更加简洁，有效地提高程序开发效率。jQuery最初由JohnResig在2006年1月正式发布，吸引了众多来自世界各地的JavaScript高手的关注。与jQuer</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>