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/1773347920293199872.htm" title="Vue 常见面试题(一)" target="_blank">Vue 常见面试题(一)</a> <span class="text-muted">安生生申</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）</div> </li> <li><a href="/article/1770072115815448576.htm" title="WEB界面jquery1.7.2版本升级到jquery3.6版本需要注意的问题" target="_blank">WEB界面jquery1.7.2版本升级到jquery3.6版本需要注意的问题</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/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>$.size();需要更改为$.length;原因：1.8版本的时候$.size()被废弃页面加载的时候，$(function(){})与onload=""谁先执行的问题。</div> </li> <li><a href="/article/1769765138031771648.htm" title="计算机毕业设计之ssm图书馆预约占座系统平台" target="_blank">计算机毕业设计之ssm图书馆预约占座系统平台</a> <span class="text-muted">B站计算机毕业设计超人</span> <div>开发技术后台:springmvc+spring+mybatis（SSM）前台：JQuerylayUI百度echarts数据库：MySQL代码开源地址(码云gitee)https://gitee.com/bysj2021/library_seatB站演示Demo地址https://www.bilibili.com/video/BV1Q741147Ag/运行截图图书馆预约占座系统平台图书馆预约占座系统</div> </li> <li><a href="/article/1769517256871575552.htm" title="【前端框架的发展史详细介绍】" target="_blank">【前端框架的发展史详细介绍】</a> <span class="text-muted">程序员不想敲代码啊</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>前端框架的发展史前端框架的发展史可以追溯到1995年，当时微软推出了IE浏览器并开始支持CSS，随后，在1997年，W3C（万维网联盟）发布了CSS的第一个正式标准。在2003年，苹果推出了Safari浏览器，它支持Web标准，包括CSS和JavaScript。同年，Mozilla基金会发布了Firefox浏览器，也开始支持这些标准。2006年，jQuery库发布，它简化了JavaScript编程</div> </li> <li><a href="/article/1768916960688537600.htm" title="不用form表单ajax上传图片（单个图片上传实例）及回显" target="_blank">不用form表单ajax上传图片（单个图片上传实例）及回显</a> <span class="text-muted">焱墩</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、html代码段（这里无css样式）上传文件上传二、js（jquery）代码段$(function(){functionhideup(){$("#hidupload").click();},functionupchange(){$("#hidimg").prop("src",URL.createObjectURL($("#hidupload")[0].files[0]));}functionup</div> </li> <li><a href="/article/1768915889622679552.htm" title="jQuery ready 和 window.onload 的区别" target="_blank">jQuery ready 和 window.onload 的区别</a> <span class="text-muted">BluesCurry</span> <div>执行时间：window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(element).ready()是DOM结构绘制完毕后就执行，不必等到页面所有元素加载完毕。编写方法个数不同：window.onload不能同时编写多个，如果有多个window.onload方法只会执行一个。$(element).ready()可以同时编写多个，并且都可以得到执行。注：$(document)</div> </li> <li><a href="/article/1768835142505267200.htm" title="Element-UI穿梭框去掉左箭头按钮" target="_blank">Element-UI穿梭框去掉左箭头按钮</a> <span class="text-muted">太空漫步11</span> <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/elementui/1.htm">elementui</a> <div>往vue项目中加入一个穿梭框页面首先在views目录中创建Transfer.vue文件：import$from'jquery'exportdefault{mounted(){console.log('mounted');$('.el-transfer__buttons').children().first().remove();},data(){constgenerateData=_=>{cons</div> </li> <li><a href="/article/1767515171942629376.htm" title="Vue项目中使用Mock.js进行API模拟" target="_blank">Vue项目中使用Mock.js进行API模拟</a> <span class="text-muted">洛可可白</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E4%B8%93%E6%A0%8F/1.htm">前端专栏</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue项目中使用Mock.js进行API模拟前言欢迎来到我的小天地，这里是我记录技术点滴、分享学习心得的地方。️技能清单编程语言：Java、C、C++、Python、Go、前端技术：Jquery、Vue.js、React、uni-app、EchartsUI设计:Element-ui、Antd、Color-ui后端技术：SpringBoot、Mybatis-plus、Swagger移动开发：Andr</div> </li> <li><a href="/article/1766582780952666112.htm" title="2018-10-30jquery实际应用" target="_blank">2018-10-30jquery实际应用</a> <span class="text-muted">小牛长成记</span> <div>$(function(){varb;vardepName=$("#depName");varsort=$("#sort");//检验修改后的部门名称是否存在$("#depName").blur(function(){if(depName.val()==""){$("#msg").html("部门名称不能为空！");$("#ssb").attr("disabled",true);returnfals</div> </li> <li><a href="/article/1764407377353859072.htm" title="jquery实现select2插件鼠标点击任意地方时默认选中该输入框内的值" target="_blank">jquery实现select2插件鼠标点击任意地方时默认选中该输入框内的值</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/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%A4%96%E8%AE%BE/1.htm">计算机外设</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>jquery实现select2插件鼠标点击任意地方时默认选中该输入框内的值最近发现一个问题，插件select2中的select2可输入可选择的下拉框，在你输入值后鼠标点击别的地方，输入框内的值会被清空，特此记录一下这里的优化，这里修改为鼠标点击任意地方时默认选中该输入框内的值；代码如下：//select2输入框鼠标点击任何地方时默认选中该值$(document).on("click",functi</div> </li> <li><a href="/article/1764061973999345664.htm" title="jQuery事件与DOM操作" target="_blank">jQuery事件与DOM操作</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>1.jQuery中的事件基础事件鼠标事件、键盘事件、window事件、表单事件复合事件鼠标光标悬停鼠标连续点击2.鼠标事件方法描述执行时机click()触发或将函数绑定到指定元素的click事件单击鼠标时mouseover()触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时mouseout()触发或将函数绑定到指定元素的mouseout事件鼠标指针移出时mouseenter()触发</div> </li> <li><a href="/article/1764059204307476480.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是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和AJAX操作等常见任务。JQuery的设计目标是尽可能简单地操作文档对象模型（DOM），使开发者能够更快速地编写JavaScript代码。JQuery的核心理念是“写少，做多”，通过使用JQuery，开发者可以用更少的代码实现更多的功能。它提供了一系列的方法和函数，可以轻松地选择元素、处理事件、执行动画</div> </li> <li><a href="/article/1762946462284603392.htm" title="animate.css动画初始状态隐藏" target="_blank">animate.css动画初始状态隐藏</a> <span class="text-muted">辣子_</span> <div>在使用animate.css会做移动端的css动画，PC端的结合jquery.fullpage.js就能做一个全屏滚动的企业网站，但初始状态下需要隐藏有动画的元素可以给animated类添加opacity:0属性，动画在开始状态是隐藏的，当动画元素出现在屏幕可视区域，动画会自动执行，执行完动画会保持最后一个状态不变，也就是不会隐藏，但使用是有前提的！！敲重点在animate.css中能使用这种方法</div> </li> <li><a href="/article/1762744811212857344.htm" title="如何在 HTML 中嵌套、引入其他的 HTML？" target="_blank">如何在 HTML 中嵌套、引入其他的 HTML？</a> <span class="text-muted">MINO吖</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><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> <div>在日常开发中，书写的HTML页面往往不是独立或互不通用，通常是有些头部、尾部或者其他部分是公用的，但是HTML有不同JSP页面可以使用类似include这样的动作标记，所以接下来介绍二种HTML页面引入其他HTML页面的方法。1.jQuery通过jQuery将公共的HTML引入到对应的DIV内$(function(){  $.get("content.html",function(data){//</div> </li> <li><a href="/article/1762389845575032832.htm" title="js 生成二维码" target="_blank">js 生成二维码</a> <span class="text-muted">weixin_30519071</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.qrcode.js是一个能够在客户端生成矩阵二维码QRCode的jquery插件，使用它可以很方便的在页面上生成二维条码。如何使用它将jquery.qrcode.min.js和jquery添加到您的网页中然后创建一个DOM元素去包含生成qr码。然后你在此容器中的添加qrcodejQuery('#qrcode').qrcode("http://www.jq22.com");【</div> </li> <li><a href="/article/1762309912127430656.htm" title="大二下学期总结" target="_blank">大二下学期总结</a> <span class="text-muted">任世伟_三月</span> <div>一、阶段本学期在校期间完成了个3阶段：PS、JS（除了两个月时间外，都在阶段时间内）、Bootstrap+jQuery。二、其余学习1.英语。开始了日常的英语学习，但效果还不行，后续需加强，现在不足以应对四级考试（兴趣不足、“主因”——坚持艰难、刷题）。2.算法。采取“趣学算法”（学习思想）+完成实际算法题（实战）的模式。3.专业课。一学期几乎未听课，依靠考前突击。三、运动注意身体健康，喝酒有害身</div> </li> <li><a href="/article/1761702198791725056.htm" title="java毕业设计二手图书回收销售网站Mybatis+系统+数据库+调试部署" target="_blank">java毕业设计二手图书回收销售网站Mybatis+系统+数据库+调试部署</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/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java毕业设计二手图书回收销售网站Mybatis+系统+数据库+调试部署java毕业设计二手图书回收销售网站Mybatis+系统+数据库+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：htt</div> </li> <li><a href="/article/1761320052872798208.htm" title="java计算机毕业设计同学录网站源码+数据库+系统+lw文档+mybatis+运行部署" target="_blank">java计算机毕业设计同学录网站源码+数据库+系统+lw文档+mybatis+运行部署</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计算机毕业设计同学录网站源码+数据库+系统+lw文档+mybatis+运行部署java计算机毕业设计同学录网站源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7</div> </li> <li><a href="/article/1761316653737533440.htm" title="java毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试" target="_blank">java毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试</a> <span class="text-muted">銮銮科技</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</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毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试java毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5</div> </li> <li><a href="/article/1761316527304433664.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/1761315267314540544.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/1760971287724871680.htm" title="css+动画优化,css3动画性能优化--针对移动端卡顿问题" target="_blank">css+动画优化,css3动画性能优化--针对移动端卡顿问题</a> <span class="text-muted">影子的覆盖</span> <a class="tag" taget="_blank" href="/search/css%2B%E5%8A%A8%E7%94%BB%E4%BC%98%E5%8C%96/1.htm">css+动画优化</a> <div>一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器(除了IE6、IE7、IE8)，画出来的图形可以直接保存为.png或者.jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API(依靠事件和定时器更新)；由于在canvas上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。2.cs</div> </li> <li><a href="/article/1759964256276672512.htm" title="Vue-Ajax核心知识整理" target="_blank">Vue-Ajax核心知识整理</a> <span class="text-muted">是小蟹呀^</span> <a class="tag" taget="_blank" href="/search/Vue/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/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在Vue框架中可以有很多方式实现ajax,其中有xhr、jQuery、fetch、axios、vue-resource,其中Vue的作者尤雨溪推荐使用axios，所以在使用Vue框架时，尽量还是使用axios但是当我们使用ajax时，经常会遇到跨域的问题，比如你本地的端口号是8080，而服务器的端口号是5050，当你向服务器请求数据时，就会存在跨域的问题。跨域也有很多的解决方案：【1】cors方法</div> </li> <li><a href="/article/1759910941677416448.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/jvm/1.htm">jvm</a> <div>基于JAVA消防应急管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA消防应急管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：h</div> </li> <li><a href="/article/1759910302134136832.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源码地址：htt</div> </li> <li><a href="/article/1759910173855543296.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运行环境：Win10、JDK1.8数据库：MySQL5.7</div> </li> <li><a href="/article/1759897511713140736.htm" title="jquery是干什么的--乐字节前端" target="_blank">jquery是干什么的--乐字节前端</a> <span class="text-muted">dirft_din</span> <div>JQuery主要内容imageJquery对象jQuery是一套兼容多浏览器的javascript脚本库.核心理念是写得更少，做得更多，使用jQuery将极大的提高编写javascript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，"如虎添翼"。同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery，一切soeasy。"--因为我们已经站在巨人的肩膀上</div> </li> <li><a href="/article/1759863357604720640.htm" title="jquery 换肤" target="_blank">jquery 换肤</a> <span class="text-muted">SkTj</span> <div>image.pnghtml//元素选中.siblings().removeClass("selected");//去掉其它同辈元素的选中.cookie("MyCssSkin",skinName,{path:'/',expires:10});}//]]>灰色紫色红色天蓝色橙色淡绿色时事新闻娱乐新闻jquery.cookie.js/**CookiepluginCopyright(c)2006Klaus</div> </li> <li><a href="/article/1759861083004301312.htm" title="javaScript和jQuery获取、设置textarea标签的内容（常见问题）" target="_blank">javaScript和jQuery获取、设置textarea标签的内容（常见问题）</a> <span class="text-muted">才艺のblog</span> <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>javaScript和jQuery获取、设置textarea标签的内容（取值和赋值）昨天晚上在写代码的时候前端遇到一个bug，在js取值textarea中，我使用了getElementById方法对textarea标签取值，但不论如何取值，始终无法成功取到页面上输入的值并进行Ajax请求，一开始以为是ajax与后端接口之间数据传输出问题了，后来经过排查，就是对于textarea标签取值失败的问题，</div> </li> <li><a href="/article/1759812973070741504.htm" title="「盘点」界面控件DevExtreme (v23.1, v23.2)可访问性增强" target="_blank">「盘点」界面控件DevExtreme (v23.1, v23.2)可访问性增强</a> <span class="text-muted">界面开发小八哥</span> <a class="tag" taget="_blank" href="/search/DevExtreme/1.htm">DevExtreme</a><a class="tag" taget="_blank" href="/search/%E7%95%8C%E9%9D%A2%E6%8E%A7%E4%BB%B6/1.htm">界面控件</a><a class="tag" taget="_blank" href="/search/UI%E5%BC%80%E5%8F%91/1.htm">UI开发</a><a class="tag" taget="_blank" href="/search/devexpress/1.htm">devexpress</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>DevExtreme拥有高性能的HTML5/JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NETCore，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NETCore或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。该套件附带</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>