jQuery学习笔记-----jQuery中的DOM操作

jQuery选择器
1、层次选择器

$("div span">——选取
里的所有的元素，返回集合元素
$("div>span">——选取
元素下元素名为的子元素，返回集合元素
$(".one+div">——选取class为one的下一个<div>同辈元素，返回单个元素,等价于$(".one").next("div")方法
$("#two~div">——选取id为two的元素后面的所有
同辈元素，返回集合元素，等价于$("#two").nextALL("div")方法

注意：$("#two").siblings("div")方法与$("#two~div")区别
$("#two~div")只选择”#two”元素后面的同辈

元素
siblings()方法与前后位置无关，选取"#two"所有的同辈

元素，无论前后位置。

2、过滤选择器
（一）基本过滤选择器

$("div:first")选取所有
元素中第一个
元素，返回单个元素
$("div:last")选取所有
元素中最后一个
元素，返回单个元素
$("input:not(.myClass)")选取class不是myClass的<input>元素，返回集合元素
$("input:even")选取索引是偶数的元素，返回集合元素
$("input:odd")选取索引是奇数的元素，返回集合元素
$("input:eq(1)")选取索引等于1的元素，返回单个元素(索引从0开始算）
$("input:gt(1)")选取索引大于1的元素，返回集合元素
$("input:lt(1)")选取索引小于1的元素，返回集合元素
$(":header")选取网页中所有的
,
,
.....，返回集合元素
$("div:animated")选取正在执行动画的
元素，返回集合元素
$(":focus")选取当前获取焦点的元素，返回集合元素

（二）内容过滤选择器

$("div:contains('我')")选取含有文本“我”的<div>元素，返回集合元素
$("div:empty")选取不包含子元素（包括文本元素）的<div>空元素，返回集合元素
$("div:has('p')")选取含有
元素的<div>空元素，返回集合元素
$("div:parent")选取拥有子元素（包括文本元素）的<div>元素，返回集合元素

（三）可见性过滤选择器

$(":hidden")选取所有不可见元素。包括"hidden">,<div style="display:none">和<div style="visibility:hidden;">等元素。如果只想选取元素，可以使用$("input:hidden"),返回集合元素

$("div:visible")选取所有可见的<div>元素,返回集合元素

（四）属性过滤选择器

$("div[id]")选取拥有属性id的<div>元素，返回集合元素
$("div[title=test]")选取拥有属性title为"test"的<div>元素，返回集合元素
$("div[title!=test]")选取拥有属性title不等于"test"的<div>元素，返回集合元素（注意：没有属性title的<div>元素也会被选取）
$("div[title^=test]")选取属性title以"test"开始的<div>元素，返回集合元素
$("div[title$=test]")选取属性title以"test"结束的<div>元素，返回集合元素
$("div[title*=test]")选取属性title含有"test"的<div>元素，返回集合元素
$('div[title|="en"]')选取属性title等于en或以en为前缀（该字符串后跟一个连字符‘-')的元素，返回集合元素
$('div[title~="uk"]')选取属性title用空格分隔的值中包含字符uk的元素，返回集合元素
$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素，返回集合元素。

（五）子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素(索引从1开始算），返回集合元素。
$("ul li:first-child")选取每个
中的第1个
元素，返回集合元素。
$("ul li:last-child")选取每个
中的最后一个
元素，返回集合元素。
$("ul li:only-child")在
中选取是惟一子元素的
元素，返回集合元素。

（六）表单对象属性过滤选择器

:enabled选取所有可用元素，返回集合元素。
:disabled选取所有不可用元素，返回集合元素。
:checked选取所有被选中的元素（单选框，复选框），返回集合元素。
:selected选取所有被选中的选项元素（下拉列表），返回集合元素。

（七）表单选择器

:input选取所有的、、<select>和<button>元素，返回集合元素。
<span class="hljs-symbol">:text</span>选取所有的单行文本框，返回集合元素。
<span class="hljs-symbol">:password</span>选取所有的密码框，返回集合元素。
<span class="hljs-symbol">:radio</span>选取所有的单选框，返回集合元素。
<span class="hljs-symbol">:checkbox</span>选取所有的多选框，返回集合元素。
<span class="hljs-symbol">:submit</span>选取所有的提交按钮，返回集合元素。
<span class="hljs-symbol">:image</span>选取所有的图像按钮，返回集合元素。
<span class="hljs-symbol">:reset</span>选取所有的重置按钮，返回集合元素。
<span class="hljs-symbol">:button</span>选取所有的按钮，返回集合元素。
<span class="hljs-symbol">:file</span>选取所有的上传域，返回集合元素。
<span class="hljs-symbol">:hidden</span>选取所有不可见元素，返回集合元素。</code></pre> 
  <p><strong>DOM操作</strong> <br> <strong>1、查找节点</strong> <br> （一）查找元素节点</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> Oli=$(<span class="hljs-string">"ul li:eq(1)"</span>);     <span class="hljs-comment">//获取<ul>里第2个<li>节点</span>
<span class="hljs-keyword">var</span> li_txt=Oli.text();           <span class="hljs-comment">//获取第2个<li>元素节点的文本内容</span></code></pre> 
  <p>（二）查找属性节点</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> Op=$(<span class="hljs-string">"p"</span>);                   <span class="hljs-comment">//获取<p>节点</span>
<span class="hljs-keyword">var</span> Otit=Op.attr(<span class="hljs-string">"attr"</span>);     <span class="hljs-comment">//获取<p>元素节点属性title</span></code></pre> 
  <p><strong>2、创建节点</strong> <br> （一）创建元素节点</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> Oli=$(<span class="hljs-string">"<li></li>"</span>);   <span class="hljs-comment">//创建1个<li>元素</span>
$(<span class="hljs-string">"ul"</span>).append(Oli);    <span class="hljs-comment">//添加到<ul>节点中，使之能在网页中显示</span>


创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
jQuery 代码:
<span class="hljs-comment">// 在 IE 中无效:</span>
$(<span class="hljs-string">"<input>"</span>).attr(<span class="hljs-string">"type"</span>, <span class="hljs-string">"checkbox"</span>);
<span class="hljs-comment">// 在 IE 中有效:</span>
$(<span class="hljs-string">"<input type='checkbox'>"</span>);


创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
jQuery 代码:
$(<span class="hljs-string">"<input>"</span>, {
  type: <span class="hljs-string">"text"</span>,
  val: <span class="hljs-string">"Test"</span>,
  focusin: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {
     </span>
    $(<span class="hljs-keyword">this</span>).addClass(<span class="hljs-string">"active"</span>);
  },
  focusout: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {
     </span>
    $(<span class="hljs-keyword">this</span>).removeClass(<span class="hljs-string">"active"</span>);
  }
}).appendTo(<span class="hljs-string">"form"</span>);</code></pre> 
  <p>（二）创建文本节点</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> Oli=$(<span class="hljs-string">"<li>香蕉</li>"</span>);   <span class="hljs-comment">//创建一个<li>元素，包括元素节点和文本节点</span>
$(<span class="hljs-string">"ul"</span>).append(Oli);    <span class="hljs-comment">//添加到<ul>节点中，使之能在网页中显示</span></code></pre> 
  <p>(三）创建属性节点</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> Oli=$(<span class="hljs-string">"<li title="</span>香蕉<span class="hljs-string">">香蕉</li>"</span>);   <span class="hljs-comment">//创建一个<li>元素，包括元素节点、文本节点和属性节点</span>
$(<span class="hljs-string">"ul"</span>).append(Oli);    <span class="hljs-comment">//添加到<ul>节点中，使之能在网页中显示</span></code></pre> 
  <p><strong>3、插入节点</strong></p> 
  <pre class="prettyprint"><code class=" hljs erlang"><span class="hljs-function"><span class="hljs-title">append</span><span class="hljs-params">()</span>    向每个匹配的元素内部追加内容
<span class="hljs-title">appendTo</span><span class="hljs-params">()</span>  将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$<span class="hljs-params">(<span class="hljs-variable">A</span>)</span>.<span class="hljs-title">append</span><span class="hljs-params">(<span class="hljs-variable">B</span>)</span>的操作，即不是将B追加到A中，而是将A追加到B中

<span class="hljs-title">prepend</span><span class="hljs-params">()</span>   向每个匹配的元素内部前置内容
<span class="hljs-title">prependTo</span><span class="hljs-params">()</span>  将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$<span class="hljs-params">(<span class="hljs-variable">A</span>)</span>.<span class="hljs-title">prepend</span><span class="hljs-params">(<span class="hljs-variable">B</span>)</span>的操作，即不是将B前置到A中，而是将A前置到B中

<span class="hljs-title">after</span><span class="hljs-params">()</span> 在每个匹配的元素之后插入内容
<span class="hljs-title">insertAfter</span><span class="hljs-params">()</span> 将所有匹配的元素插入到指定的元素后。实际上，使用该方法是颠倒了常规的$<span class="hljs-params">(<span class="hljs-variable">A</span>)</span>.<span class="hljs-title">after</span><span class="hljs-params">(<span class="hljs-variable">B</span>)</span>的操作，即不是将B插入到A后面，而是将A插入到B后面

<span class="hljs-title">before</span><span class="hljs-params">()</span> 在每个匹配的元素之前插入内容
<span class="hljs-title">insertBefore</span><span class="hljs-params">()</span>  将所有匹配的元素插入到指定的元素前面。实际上，使用该方法是颠倒了常规的$<span class="hljs-params">(<span class="hljs-variable">A</span>)</span>.<span class="hljs-title">before</span><span class="hljs-params">(<span class="hljs-variable">B</span>)</span>的操作，即不是将B插入到A前面，而   是将A插入到B前面</span></code></pre> 
  <p><strong>4、删除节点</strong></p> 
  <pre class="prettyprint"><code class=" hljs javascript">（一）remove()方法(当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时删除）
<span class="hljs-keyword">var</span> Oli=$(<span class="hljs-string">"ul li:eq(1)"</span>).remove();    <span class="hljs-comment">//获取第2个<li>元素节点后，将它从网页中删除</span>
Oli.appendTo(<span class="hljs-string">"ul"</span>);            <span class="hljs-comment">//把刚才删除的节点又重新添加到<ul>元素里</span>


（二）detach()方法（所有绑定的事件、附加的数据等都会保留下来）
<span class="hljs-keyword">var</span> Oli=$(<span class="hljs-string">"ul li:eq(1)"</span>).detach();   <span class="hljs-comment">//删除元素</span>
Oli.appendTo(<span class="hljs-string">"ul"</span>);      <span class="hljs-comment">//重新追加此元素，发现它之前绑定的事件还在，如果使用remove()方法删除元素的话，那么它之前绑定的事件将失效</span>


（三）empty()方法（该方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点）
$(<span class="hljs-string">"ul li:eq(1)"</span>).empty();   <span class="hljs-comment">//获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里。</span></code></pre> 
  <p><strong>5、复制节点</strong></p> 
  <pre class="prettyprint"><code class=" hljs javascript">（一）clone()方法
$(<span class="hljs-string">"ul li"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{
     </span>
        $(<span class="hljs-keyword">this</span>).clone().appendTo(<span class="hljs-string">"ul"</span>);      <span class="hljs-comment">//复制当前单击的节点，并将它追加到<ul>元素</span>
})</code></pre> 
  <p><strong>6、替换节点</strong> <br> (一）replaceWith()方法</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).replaceWith(<span class="hljs-string">"<strong>你最不喜欢的水果是？</strong>"</span>);     <span class="hljs-regexp">//</span>将<p>替换成<strong></code></pre> 
  <p>（二）replaceAll()方法</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"<strong>你最不喜欢的水果是？</strong>"</span>).replaceAll(<span class="hljs-string">"p"</span>);    <span class="hljs-regexp">//</span>将<p>替换成<strong></code></pre> 
  <p><strong>7、包裹节点</strong> <br> （一）wrap()方法，将所有的元素进行单独包裹</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"strong"</span>).wrap(<span class="hljs-string">"<b></b>"</span>);     <span class="hljs-regexp">//</span>用<b>标签把<strong>元素包裹起来</code></pre> 
  <p>（二）wrapAll()方法，用一个元素来包裹</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"strong"</span>).wrapAll(<span class="hljs-string">"<b></b>"</span>); </code></pre> 
  <p>（三）wrapInner()方法，将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。</p> 
  <pre class="prettyprint"><code class=" hljs xml">$("strong").wrapInner("<span class="hljs-tag"><<span class="hljs-title">b</span>></span><span class="hljs-tag"></<span class="hljs-title">b</span>></span>"); 

<span class="hljs-tag"><<span class="hljs-title">strong</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">b</span>></span><span class="hljs-tag"></<span class="hljs-title">b</span>></span>
<span class="hljs-tag"></<span class="hljs-title">strong</span>></span></code></pre> 
  <p><strong>8、属性操作</strong> <br> （一）获取属性和设置属性</p> 
  <pre class="prettyprint"><code class=" hljs mel"><span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).attr({
    <span class="hljs-string">"title"</span>:<span class="hljs-string">"your title"</span>,<span class="hljs-string">"name"</span>:<span class="hljs-string">"test"</span>})    <span class="hljs-comment">//将一个“名/值"形式的对象设置为匹配元素的属性</span>

同类：html()、<span class="hljs-keyword">text</span>()、height()、width()、val()、css()等方法</code></pre> 
  <p>（二）删除属性</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).remove(<span class="hljs-string">"title"</span>);    <span class="hljs-regexp">//</span>删除<p>元素的属性title</code></pre> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"img"</span>).removeAttr(<span class="hljs-string">"src"</span>);     <span class="hljs-regexp">//</span>将文档中图像的src属性删除
从每一个匹配的元素中删除一个属性
<span class="hljs-number">1.6</span>以下版本在<span class="hljs-constant">IE6</span>使用<span class="hljs-constant">JQuery</span>的removeAttr方法删除disabled是无效的。解决的方法就是使用<span class="hljs-variable">$(</span><span class="hljs-string">"XX"</span>).prop(<span class="hljs-string">"disabled"</span>,<span class="hljs-keyword">false</span>);
<span class="hljs-number">1.7</span>版本在<span class="hljs-constant">IE6</span>下已支持删除disabled。</code></pre> 
  <p><strong>9、样式操作</strong> <br> （一）获取样式和设置样式</p> 
  <pre class="prettyprint"><code class=" hljs ruby">var p_class=<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).attr(<span class="hljs-string">"class"</span>);      <span class="hljs-regexp">//</span>获取<p>元素的<span class="hljs-class"><span class="hljs-keyword">class</span></span>

<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"high"</span>);     <span class="hljs-regexp">//</span>设置<p>元素的<span class="hljs-class"><span class="hljs-keyword">class</span>为"<span class="hljs-title">high</span>"</span></code></pre> 
  <p>（二）追加样式addClass()方法</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).addClass(<span class="hljs-string">"another"</span>);     <span class="hljs-regexp">//</span>给<p>元素追加<span class="hljs-string">"another"</span>类</code></pre> 
  <p>(三）移除样式removeClass()方法</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).removeClass(<span class="hljs-string">"another"</span>);             <span class="hljs-regexp">//</span>移除<p>元素中值为<span class="hljs-string">"high"</span>的<span class="hljs-class"><span class="hljs-keyword">class</span> </span>
<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).removeClass(<span class="hljs-string">"another high"</span>);          <span class="hljs-regexp">//</span>可以以空格的方式删除多个<span class="hljs-class"><span class="hljs-keyword">class</span>名</span></code></pre> 
  <p>(四）切换样式toggleClass()方法</p> 
  <pre class="prettyprint"><code class=" hljs d">$(<span class="hljs-string">"p"</span>).toggleClass(<span class="hljs-string">"another"</span>)      <span class="hljs-comment">//重复切换类名"another“</span>

当单击<span class="hljs-string">"切换样式“按钮后，<p>元素的HTML代码由<p class="</span>myClass<span class="hljs-string">">水果</p>变为<p class="</span>myClass anothe<span class="hljs-string">r">水果</p>
当再次单击"</span>切换样式“按钮后，<p>元素的HTML代码又返回原来的状态<p <span class="hljs-keyword">class</span>=<span class="hljs-string">"myClass"</span>>水果</p></code></pre> 
  <p>(五）判断是否含有某个样式hasClass()</p> 
  <pre class="prettyprint"><code class=" hljs javascript">hasClass()可以用来判断元素是否含有某个<span class="hljs-keyword">class</span>,如果有，则返回<span class="hljs-literal">true</span>,否则返回<span class="hljs-literal">false</span>

$(<span class="hljs-string">"p"</span>).hasClass(<span class="hljs-string">"another"</span>);    <span class="hljs-comment">//判断<p>元素中是否含有"another“的class，</span>
$(<span class="hljs-string">"p"</span>).is(<span class="hljs-string">".another"</span>);    <span class="hljs-comment">//二者等价</span></code></pre> 
  <p><strong>10、设置和获取HTML、文本和值</strong> <br> （一）html()方法（用于XHTML文档，不能用于XML文档）</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> p_html=$(<span class="hljs-string">"p"</span>).html();        <span class="hljs-comment">//获取<p>元素的HTML代码</span>
$(<span class="hljs-string">"p"</span>).html(<span class="hljs-string">"<b>水果</b>"</span>);      <span class="hljs-comment">//设置<p>元素的HTML代码</span></code></pre> 
  <p>（二）text()方法（用于读取或者设置某个元素的文本内容）</p> 
  <pre class="prettyprint"><code class=" hljs mel">var p_text=<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).<span class="hljs-keyword">text</span>();         <span class="hljs-comment">//获取<p>元素的文本内容</span>
<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).<span class="hljs-keyword">text</span>(<span class="hljs-string">"水果"</span>);              <span class="hljs-comment">//设置<p>元素的文本内容</span></code></pre> 
  <p>（三）val()方法（类似于js的value属性，可以用来设置和获取元素的值，无论元素是文本框，下拉列表还是单选框，都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组）</p> 
  <pre class="prettyprint"><code class=" hljs cs">$(<span class="hljs-string">"input"</span>).<span class="hljs-keyword">value</span>();       <span class="hljs-comment">//获取文本框的值</span>
$(<span class="hljs-string">"input"</span>).<span class="hljs-keyword">value</span>(<span class="hljs-string">"请输入姓名"</span>);     <span class="hljs-comment">//设置内容</span>
$(<span class="hljs-string">"input"</span>).<span class="hljs-keyword">value</span>(<span class="hljs-string">""</span>);       <span class="hljs-comment">//清空文本框内容</span></code></pre> 
  <p><strong>11、遍历节点</strong> <br> <a href="http://img.e-com-net.com/image/info8/7e1617fba1294e328ac28d402bf0572c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e1617fba1294e328ac28d402bf0572c.jpg" alt="jQuery学习笔记-----jQuery中的DOM操作_第1张图片" title="" width="650" height="487" style="border:1px solid black;"></a></p> 
  <p>（一）children()方法，用于取得匹配元素的子元素集合，只考虑子元素而不考虑其他后代元素</p> 
  <pre class="prettyprint"><code class=" hljs ruby">var <span class="hljs-variable">$body</span>=<span class="hljs-variable">$(</span><span class="hljs-string">"body"</span>).children();     <span class="hljs-regexp">//</span><span class="hljs-variable">$body</span>.length为<span class="hljs-number">2</span>
var <span class="hljs-variable">$p</span>=<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).children();        <span class="hljs-regexp">//</span><span class="hljs-variable">$p</span>.length为<span class="hljs-number">0</span>
var <span class="hljs-variable">$ul</span>=<span class="hljs-variable">$(</span><span class="hljs-string">"ul"</span>).children();      <span class="hljs-regexp">//</span> <span class="hljs-variable">$ul</span>.length为<span class="hljs-number">3</span></code></pre> 
  <p>（二）next()方法，用于取得匹配元素后面紧邻的同辈元素</p> 
  <pre class="prettyprint"><code class=" hljs ruby">var <span class="hljs-variable">$p</span>=<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).<span class="hljs-keyword">next</span>();      <span class="hljs-regexp">//</span>取得紧邻<p>元素下一个同辈元素节点是<ul></code></pre> 
  <p>（三）prev()方法，用于取得匹配元素前面紧邻的同辈元素</p> 
  <pre class="prettyprint"><code class=" hljs ruby">var <span class="hljs-variable">$ul</span>=<span class="hljs-variable">$(</span><span class="hljs-string">"ul"</span>).prev();       <span class="hljs-regexp">//</span>取得紧邻<ul>元素 的上一个同辈节点是<p></code></pre> 
  <p>（四）siblings()方法用于取得匹配元素前后所有的同辈元素</p> 
  <pre class="prettyprint"><code class=" hljs avrasm">$(<span class="hljs-string">".level>a"</span>)<span class="hljs-preprocessor">.click</span>(function(){
         $(this)<span class="hljs-preprocessor">.addClass</span>(<span class="hljs-string">"current"</span>)       //给当前元素添加<span class="hljs-string">"current"</span>样式
                   <span class="hljs-preprocessor">.next</span>()<span class="hljs-preprocessor">.show</span>()         //下一个元素显示
                   <span class="hljs-preprocessor">.parent</span>()<span class="hljs-preprocessor">.siblings</span>()<span class="hljs-preprocessor">.children</span>(<span class="hljs-string">"a"</span>)<span class="hljs-preprocessor">.removeClass</span>(<span class="hljs-string">"current"</span>)
                                                  //父元素的兄弟元素的子元素<a>移除<span class="hljs-string">"current"</span>样式
                   <span class="hljs-preprocessor">.next</span>()<span class="hljs-preprocessor">.hide</span>()<span class="hljs-comment">;</span>
                   return false<span class="hljs-comment">;</span>

})<span class="hljs-comment">;</span></code></pre> 
  <p>（五）closest()用于取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。</p> 
  <pre class="prettyprint"><code class=" hljs javascript">$(document).bind(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span>{
     </span>  $(e.target).closest(<span class="hljs-string">"li"</span>).css(<span class="hljs-string">"color"</span>,<span class="hljs-string">"red"</span>);})       <span class="hljs-comment">//给点击的目标元素的最近的li元素添加颜色</span></code></pre> 
  <p>（六）parent()，parents()，closest()的区别 <br> 1、parent()方法从指定类型的直接父节点开始查找。parent()返回一个元素节点</p> 
  <pre class="prettyprint"><code class=" hljs mel"><span class="hljs-variable">$(</span><span class="hljs-string">'.item'</span>).<span class="hljs-keyword">parent</span>().css(<span class="hljs-string">'background-color'</span>,<span class="hljs-string">'red'</span>);</code></pre> 
  <p>2、parents()方法查找方式同parent()方法类似，不同点在于，当它找到第一个父节点时并没有停止查找而是继续查找，最后返回多个父节点</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">'.item'</span>).parents(<span class="hljs-string">'ul'</span>).css(<span class="hljs-string">'background-color'</span>,<span class="hljs-string">'red'</span>);</code></pre> 
  <p>3、closest()方法查找是从包含自身的节点找起，它同parents()方法类似，不同点就在于它只返回匹配的第一个元素节点</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">'.item'</span>).closest(<span class="hljs-string">'ul'</span>).css(<span class="hljs-string">'background-color'</span>,<span class="hljs-string">'red'</span>);</code></pre> 
  <p>（七）is()方法 <br> is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。 <br> .is(selector) //selector是字符串值，包含匹配元素的选择器表达式</p> 
  <p><strong>12、index()方法</strong> <br> index() 方法返回指定元素相对于其他指定元素的 index 位置，注释：如果未找到元素，index() 将返回 -1。 <br> （1）第一个匹配元素的 index，相对于同胞元素，获得第一个匹配元素相对于其同胞元素的 index 位置。 <br> 语法：$(selector).index()</p> 
  <p>（2）元素的 index，相对于选择器，获得元素相对于选择器的 index 位置。该元素可以通过 DOM 元素或 jQuery 选择器来指定。 <br> 语法：$(selector).index(element)</p> 
  <p><strong>13、CSS-DOM操作</strong> <br> （一）css()方法获取和设置元素样式</p> 
  <pre class="prettyprint"><code class=" hljs javascript">$(<span class="hljs-string">"p"</span>).css(<span class="hljs-string">"color"</span>);      <span class="hljs-comment">//获取<p>元素的样式颜色</span>
$(<span class="hljs-string">"p"</span>).css({
    <span class="hljs-string">"fontSize"</span>:<span class="hljs-string">"30px"</span>,<span class="hljs-string">"backgroundColor"</span>:<span class="hljs-string">"#888888"</span>})     <span class="hljs-comment">//设置<p>元素的字体大小和背景颜色</span></code></pre> 
  <p>（二）height()方法用来设置元素的高度和获取高度,width()同理</p> 
  <pre class="prettyprint"><code class=" hljs ruby"><span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).height();     <span class="hljs-regexp">//</span>获取<p>元素的高度值
<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).height(<span class="hljs-number">100</span>);    <span class="hljs-regexp">//</span>设置<p>元素的高度值为<span class="hljs-number">100</span>px
<span class="hljs-variable">$(</span><span class="hljs-string">"p"</span>).height(<span class="hljs-string">"10em"</span>);  <span class="hljs-regexp">//</span>设置<p>元素的高度值为<span class="hljs-number">10</span>em</code></pre> 
  <p>注意：css()方法获取的高度值与样式的设置有关，可能会得到”auto”,也可能得到”10px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式设置无关，并且不带单位</p> 
  <p>（三）innerHeight()方法 <br> 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。 <br> 此方法对可见和隐藏元素均有效。</p> 
  <p>（四）outerWidth()方法 <br> 获取第一个匹配元素外部宽度（默认包括补白和边框）。 <br> 此方法对可见和隐藏元素均有效。</p> 
  <p>（五）offset()方法用于获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left,它只对可见元素有效</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> offset=$(<span class="hljs-string">"p"</span>).offset();         <span class="hljs-comment">//获取<p>元素的offset()</span>
<span class="hljs-keyword">var</span> left=offset.left();     <span class="hljs-comment">//获取左偏移</span>
<span class="hljs-keyword">var</span> top=offset.top();   <span class="hljs-comment">//获取上偏移</span></code></pre> 
  <p>（六）position()方法获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包含两个属性，即top和left</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> position=$(<span class="hljs-string">"p"</span>).position();         <span class="hljs-comment">//获取<p>元素的offset()</span>
<span class="hljs-keyword">var</span> left=position.left();     <span class="hljs-comment">//获取左偏移</span>
<span class="hljs-keyword">var</span> top=position.top();   <span class="hljs-comment">//获取上偏移</span></code></pre> 
  <p>（七）scrollTop()方法与scrollLeft()分别是获取元素的滚动条距顶端的距离和距左侧的距离。</p> 
  <pre class="prettyprint"><code class=" hljs php"><span class="hljs-keyword">var</span> <span class="hljs-variable">$p</span>=$(<span class="hljs-string">"p"</span>);
<span class="hljs-keyword">var</span>  scrollTop=<span class="hljs-variable">$p</span>.scrollTop()     <span class="hljs-comment">//获取元素的滚动条距顶端的距离</span>
<span class="hljs-keyword">var</span> scrollLeft=<span class="hljs-variable">$p</span>.scrollLeft()        <span class="hljs-comment">//获取元素的滚动条距左侧的距离</span></code></pre> 
  <p><strong>14、each()方法</strong> <br> each(callback)方法以每一个匹配的元素作为上下文来执行一个函数。 <br> 意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。</p> 
  <p>callback：function 对于每个匹配的元素所要执行的函数 <br> 如果你想得到 jQuery对象，可以使用 $(this) 函数。</p> 
  <p><strong>15、size()方法</strong> <br> size()、length指的是jQuery 对象中元素的个数</p> 
  <p><strong>16、get(index)方法</strong> <br> get(index)取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 <br> 这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。<span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-107-Frame"> <span class="math" id="MathJax-Span-1918" style="width: 7.949em; display: inline-block;"><span style="display: inline-block; position: relative; width: 6.349em; height: 0px; font-size: 125%;"><span style="position: absolute; clip: rect(1.763em 1000em 3.149em -0.371em); top: -2.717em; left: 0.003em;"><span class="mrow" id="MathJax-Span-1919"><span class="mo" id="MathJax-Span-1920" style="font-family: MathJax_Main;">(</span><span class="mi" id="MathJax-Span-1921" style="font-family: MathJax_Math-italic;">t</span><span class="mi" id="MathJax-Span-1922" style="font-family: MathJax_Math-italic;">h</span><span class="mi" id="MathJax-Span-1923" style="font-family: MathJax_Math-italic;">i</span><span class="mi" id="MathJax-Span-1924" style="font-family: MathJax_Math-italic;">s</span><span class="mo" id="MathJax-Span-1925" style="font-family: MathJax_Main;">)</span><span class="mo" id="MathJax-Span-1926" style="font-family: MathJax_Main;">.</span><span class="mi" id="MathJax-Span-1927" style="font-family: MathJax_Math-italic; padding-left: 0.163em;">g<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-1928" style="font-family: MathJax_Math-italic;">e</span><span class="mi" id="MathJax-Span-1929" style="font-family: MathJax_Math-italic;">t</span><span class="mo" id="MathJax-Span-1930" style="font-family: MathJax_Main;">(</span><span class="mn" id="MathJax-Span-1931" style="font-family: MathJax_Main;">0</span><span class="mo" id="MathJax-Span-1932" style="font-family: MathJax_Main;">)</span><span class="texatom" id="MathJax-Span-1933"><span class="mrow" id="MathJax-Span-1934"><span class="mo" id="MathJax-Span-1935"><span style="font-family: STIXGeneral, 'Arial Unicode MS', serif; font-size: 80%; font-style: normal; font-weight: normal;">与</span></span></span></span></span><span style="display: inline-block; width: 0px; height: 2.723em;"></span></span></span><span style="border-left-width: 0.003em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 1.47em; vertical-align: -0.397em;"></span></span> </span>(this)[0]等价。</p> 
  <p>[index]取得第 index 个位置上的元素 <br> get()取得所有匹配的 DOM 元素集合。</p> 
  <p><strong>17、filter(expr)和find()</strong> <br> filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。 <br> find():会在元素内寻找匹配元素，而filter()则是筛选元素。一个是对它的子集操作，一个是对自身集合元素进行筛选。</p> 
  <p><strong>18、map()</strong> <br> .map()的语法与.each()方法类似，它接收两个参数，第一个参数是一个数组对象或者类似于数组的对象，第二个参数是一个回调函数，根据Jquery的文档，该回调函数是“对每一个元素项进行处理的函数”，该回调函数接收两个参数，第一个参数是当前元素的值，第二个参数是当前元素在数组中的索引。</p> 
  <p><strong>19、trim()</strong> <br> .trim()方法用于移除字符串首尾的空格字符</p> 
  <pre class="prettyprint"><code class=" hljs javascript"><span class="hljs-keyword">var</span> phrase1=<span class="hljs-string">"     1.Either this wallpaper goes      "</span>;
<span class="hljs-keyword">var</span> phrase2=<span class="hljs-string">"    or I go.           "</span>
<span class="hljs-keyword">var</span> quote=$.trim(phrase1)+<span class="hljs-string">" "</span>+$.trim(phrase2);</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1363743056318193664"></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">你可能感兴趣的:(Web前端,jQuery,jquery)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1880193276384964608.htm"
                           title="java计算机毕业设计货币博物馆展品管理系统源码+数据库+系统+lw文档+mybatis+运行部署" target="_blank">java计算机毕业设计货币博物馆展品管理系统源码+数据库+系统+lw文档+mybatis+运行部署</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/mysql/1.htm">mysql</a>
                        <div>java计算机毕业设计货币博物馆展品管理系统源码+数据库+系统+lw文档+mybatis+运行部署java计算机毕业设计货币博物馆展品管理系统源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8</div>
                    </li>
                    <li><a href="/article/1880153149113692160.htm"
                           title="Jquery 、Js —— 获取当前年月日、星期几 、地点、天气！" target="_blank">Jquery 、Js —— 获取当前年月日、星期几 、地点、天气！</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/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>最近的工作中的小需求，自己整理了下有关——日期与天气的代码：有其他需求的小伙伴可以去官网天气插件-心知天气html代码Date:Time:Day:js代码$(document).ready(function(){functionupdateDateTime(){constnow=newDate();constyear=now.getFullYear();constmonth=(now.getMon</div>
                    </li>
                    <li><a href="/article/1880076078232432640.htm"
                           title="Web前端------HTML多媒体标签之图片标签" target="_blank">Web前端------HTML多媒体标签之图片标签</a>
                        <span class="text-muted">王da魔</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/html/1.htm">html</a>
                        <div>一.图片标签介绍1.路径问题>.绝对路径从盘符开始的路径问题：改变了工程目录的位置后，绝对路径从盘符开始则不能使用了，考虑相对路径>.相对路径从当前位置（指从代码书写.html文件）开始如何表示当前位置------使用./如何表示上一级--------使用../2.图片标签的导入方式3.常见图片属性src：图片地址：1.网络路径2.绝对路径3.相对路径alt：图片加载失败时，提示信息width/h</div>
                    </li>
                    <li><a href="/article/1880001549963423744.htm"
                           title="PHP与HTML、CSS、JavaScript、jQuery的关系**" target="_blank">PHP与HTML、CSS、JavaScript、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/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>在当今数字化的Web开发领域，PHP与HTML、CSS、JavaScript、jQuery各自扮演着重要的角色，并且它们之间存在着紧密而复杂的关系。一、HTML与PHP的关系HTML（超文本标记语言）是构建网页内容结构的基础。它定义了网页中的各种元素，如标题、段落、列表、链接等。PHP（超文本预处理器）则是一种服务器端脚本语言。数据嵌入与动态内容生成PHP可以嵌入到HTML中，在服务器端执行PHP</div>
                    </li>
                    <li><a href="/article/1879998014110625792.htm"
                           title="前端开发：Web前端和HTML" target="_blank">前端开发：Web前端和HTML</a>
                        <span class="text-muted">qincjun</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>一、解释1.Web前端开发？Web前端开发是指创建用户在浏览器中直接交互和体验的部分的过程。‌前端开发主要涉及HTML、CSS和JavaScript这三大核心技术。HTML用于构建网页内容的骨架，CSS用于设置和控制网页的外观和布局，而JavaScript则赋予网页动态交互能力。‌‌Web（全称WorldWideWeb）是一种基于超文本和HTTP协议的全球性的、动态交互的、跨平台的分布式图形信息系</div>
                    </li>
                    <li><a href="/article/1879996878825779200.htm"
                           title="11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作" target="_blank">11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作</a>
                        <span class="text-muted">web学生网页设计</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/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%88%B6%E4%BD%9C/1.htm">网页设计与制作</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">网页作业</a>
                        <div>HTML实例网页代码,本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。精彩专栏推荐❤【作者主页——获取更多优质源码】❤【web前端期末大作业——毕设项目精品实战案例(1000套)】文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代</div>
                    </li>
                    <li><a href="/article/1879993222097334272.htm"
                           title="jQuery（二）jQuery选择器" target="_blank">jQuery（二）jQuery选择器</a>
                        <span class="text-muted">kong7906928</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选择器选择器：类似于CSS的选择器，可以帮助我们获取元素。例如：id选择器、类选择器、元素选择器、属性选择器等等。jQuery中选择器的语法：$();一、jQuery的选择器（一）基本选择器1.元素选择器语法：$("元素的名称")作用：根据元素名称获取元素对象们。letdivs=$("div");2.id选择器语法：$("#id的属性值")作用：根据ID属性值获取元素对象。letdiv</div>
                    </li>
                    <li><a href="/article/1879982623502168064.htm"
                           title="Web前端------HTML块级和行内标签之行内标签" target="_blank">Web前端------HTML块级和行内标签之行内标签</a>
                        <span class="text-muted">王da魔</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/html/1.htm">html</a>
                        <div>一.行内标签介绍行内标签----span作用：1.作为文本字体的容器，用来结合CSS修饰文本样式2.根据行内标签的特性（不换行/部分块级样式不生效eg：宽高等等），做微小布局二.代码展示行内标签测试文字测试文字三.效果展示</div>
                    </li>
                    <li><a href="/article/1879797560948879360.htm"
                           title="基于jQuery / 原生JS两种方式流畅实现半屏悬浮窗" target="_blank">基于jQuery / 原生JS两种方式流畅实现半屏悬浮窗</a>
                        <span class="text-muted">池泽123</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</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/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>本篇分别用jQuery和原生两种方式实现悬浮窗功能和样式的切换，兼容IE完成样式示例使用技术栈：jquery、javaScript、HTML/CSS一、基础版面悬浮窗可以有很多样式，但基础结构可以大致分为触发按钮、遮罩层、内容三部分。触发按钮通常设置在屏幕边缘，我这里举例一个右下的位置展示；联系我们/*悬浮窗触发按钮样式*/.Suspended_window_box{width:150px;hei</div>
                    </li>
                    <li><a href="/article/1879786378305269760.htm"
                           title="jQuery国内大厂CDN加速链接" target="_blank">jQuery国内大厂CDN加速链接</a>
                        <span class="text-muted"></span>

                        <div>摘要jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的code.jquery.com、jsDeliver、unpkg.com、staticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！大厂jQuery静态资源CDN百度https://libs.baidu</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835295766747377664.htm"
                           title="C# 开发教程-入门基础" target="_blank">C# 开发教程-入门基础</a>
                        <span class="text-muted">天马3798</span>
<a class="tag" taget="_blank" href="/search/%E6%95%99%E7%A8%8B%E7%B3%BB%E5%88%97%E6%95%B4%E7%90%86/1.htm">教程系列整理</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程</div>
                    </li>
                    <li><a href="/article/1835131984087707648.htm"
                           title="html 删除事件,html 事件的添加和删除" target="_blank">html 删除事件,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%88%A0%E9%99%A4%E4%BA%8B%E4%BB%B6/1.htm">删除事件</a>
                        <div>jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi</div>
                    </li>
                    <li><a href="/article/1835118358262018048.htm"
                           title="动态生成的html元素绑定click事件" target="_blank">动态生成的html元素绑定click事件</a>
                        <span class="text-muted">.NET跨平台</span>
<a class="tag" taget="_blank" href="/search/Jquery%E5%8F%8A%E5%85%B6%E7%BB%84%E4%BB%B6/1.htm">Jquery及其组件</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                        <div>第一篇博客，开启技术博客的生涯，欢迎大家批评指教（坚信妹子也可以做好程序猿）今天想说帮公司做项目的时候遇到的一个小问题，动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行，然后序列号还要随着增加，当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决，但是发现一个问题会出现事件绑定很多次</div>
                    </li>
                    <li><a href="/article/1835005024372092928.htm"
                           title="【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”" target="_blank">【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”</a>
                        <span class="text-muted">coderYYY</span>
<a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/bug%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">bug解决方案</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a>
                        <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》自从半月前，通义灵码一运行就会报这个错尝试了以下方法，都无法解决：阿里云官方方法：删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可</div>
                    </li>
                    <li><a href="/article/1835004897926410240.htm"
                           title="微信小程序生成小程序转发链接，携带参数跳转到另外一个页面" target="_blank">微信小程序生成小程序转发链接，携带参数跳转到另外一个页面</a>
                        <span class="text-muted">coderYYY</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%95%99%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BB%A3%E7%A0%81/1.htm">前端项目教程以及代码</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/1.htm">微信</a>
                        <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性</div>
                    </li>
                    <li><a href="/article/1834998844144840704.htm"
                           title="前端页面实现table可拖动改变列宽" target="_blank">前端页面实现table可拖动改变列宽</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/jQuery/1.htm">jQuery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%8B%96%E5%8A%A8/1.htm">表格拖动</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/colResizable/1.htm">colResizable</a>
                        <div>此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下：1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery，（1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载（2）引入文件：2.编写j</div>
                    </li>
                    <li><a href="/article/1834780371229700096.htm"
                           title="关于jquery的on(“click”,function(){}),事件绑定无效" target="_blank">关于jquery的on(“click”,function(){}),事件绑定无效</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>
                        <div>之前在做jquery时,遇到一个问题,就是我在append一个给啊标签绑定click点击事件时不起作用,jquery的版本时3.4.1,也找不到起的错误.就是没触发:$(self).find(".comment-action.cancel").off("click");//console.log("点击了取消回复的按钮!");$(self).find(".comment-action.cancel</div>
                    </li>
                    <li><a href="/article/1834645992071327744.htm"
                           title="web前端达到什么水平，才能找到工作？" target="_blank">web前端达到什么水平，才能找到工作？</a>
                        <span class="text-muted">cj瑾瑜</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
                        <div>一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义</div>
                    </li>
                    <li><a href="/article/1834624305535741952.htm"
                           title="JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册" target="_blank">JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册</a>
                        <span class="text-muted">2401_84094868</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                        <div>创建元素：Elementschool=DocumentHelper.createElement(“school”);创建文本：school.addText(“光明小学”);指定位置添加：list.add(1,school);回写xml：和在末尾添加一样7、获取属性值attributeValue()：获取属性值publicstaticvoidmain(String[]args)throwsDocum</div>
                    </li>
                    <li><a href="/article/1834333573889486848.htm"
                           title="（hilo）摇钱树项目梳理" target="_blank">（hilo）摇钱树项目梳理</a>
                        <span class="text-muted">大胡子111</span>

                        <div>摇钱树项目用到了：1.jquery（js库）2.hilo.js(游戏框架)3.tida.js（淘宝相关api--要在淘宝中实现摇一摇功能）4.原生陀螺仪（因为要在微信中实现摇一摇功能）5.静态文件资源预加载项目组成部分：1.摇钱树2.摇一摇按钮3.树下礼包4.游戏标题5.树上的红包和金币6.音乐7.获奖记录7.活动规则（活动说明/玩法介绍）8.红包雨下落9.地上红包10.获奖/失败层11.玩法介绍</div>
                    </li>
                    <li><a href="/article/1834298842934243328.htm"
                           title="jQuery Easyui 源码分析之combo组件" target="_blank">jQuery Easyui 源码分析之combo组件</a>
                        <span class="text-muted">90后北京程序员</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF-easyui/1.htm">前端-easyui</a><a class="tag" taget="_blank" href="/search/easyui%E4%B9%8Bcombobox/1.htm">easyui之combobox</a>
                        <div>/***jQueryEasyUI1.3.1*该源码完全由压缩码翻译而来，并非网络上放出的源码，请勿索要。*/(function($){functionsetSize(target,width){varopts=$.data(target,"combo").options;varcombo=$.data(target,"combo").combo;varpanel=$.data(target,"co</div>
                    </li>
                    <li><a href="/article/1834155529212096512.htm"
                           title="【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！" target="_blank">【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！</a>
                        <span class="text-muted">wcyd</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">Web前端技术</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/html/1.htm">html</a>
                        <div>深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面</div>
                    </li>
                    <li><a href="/article/1834077500251140096.htm"
                           title="jquery打包到webpack项目" target="_blank">jquery打包到webpack项目</a>
                        <span class="text-muted">不cong明的亚子</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</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>
                        <div>入口文件—index.jswindow.$=require('jquery')webpack.config.jsconstwebpack=require('webpack')module.exports={...plugins:[...newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery'})...]...}</div>
                    </li>
                    <li><a href="/article/1833982338229432320.htm"
                           title="通过前端实现导出生成pdf文件并下载" target="_blank">通过前端实现导出生成pdf文件并下载</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/%E5%8E%9F%E7%94%9FJS/1.htm">原生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><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can</div>
                    </li>
                    <li><a href="/article/1833961665184493568.htm"
                           title="java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署" target="_blank">java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署</a>
                        <span class="text-muted">一梵sheji288</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/vue.js/1.htm">vue.js</a>
                        <div>java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、</div>
                    </li>
                    <li><a href="/article/1833895593613815808.htm"
                           title="479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js" target="_blank">479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js</a>
                        <span class="text-muted">仙女网页制作</span>
<a class="tag" taget="_blank" href="/search/Web%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E5%AE%9E%E4%BE%8B/1.htm">Web网页设计实例</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%BC%AB/1.htm">动漫</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！说起Web前端</div>
                    </li>
                    <li><a href="/article/1833864459446218752.htm"
                           title="TypeScript---类型批注" target="_blank">TypeScript---类型批注</a>
                        <span class="text-muted">Anglie</span>

                        <div>TS通过类型批注提供静态类型，方便在编译时启动类型检查，这不是必须的，甚至可以被忽略，去使用js常规的动态类型。基本类型的批注是number,bool,string,弱类型或动态类型的结构可以是任意类型。将类型批注导出到一个单独的文件，方便使用类型已经被编译成为js的ts脚本的类型信息可用。批注可以为一个现有的js库声明。就像已经为node.js和jquery.js所做的那样。当没有给出类型时，T</div>
                    </li>
                                <li><a href="/article/44.htm"
                                       title="Enum 枚举" target="_blank">Enum 枚举</a>
                                    <span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a>
                                    <div>原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 
于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： 
public static final int APPLE_FUJI = 0</div>
                                </li>
                                <li><a href="/article/171.htm"
                                       title="Java8简明教程" target="_blank">Java8简明教程</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk1.8/1.htm">jdk1.8</a>
                                    <div>        Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  
一.允许在接口中有默认方法实现 
        Java 8 允许我们使用default关键字，为接口声明添</div>
                                </li>
                                <li><a href="/article/298.htm"
                                       title="Oracle表维护 快速备份删除数据" target="_blank">Oracle表维护 快速备份删除数据</a>
                                    <span class="text-muted">cuisuqiang</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E9%80%9F/1.htm">快速</a><a class="tag" taget="_blank" href="/search/%E5%A4%87%E4%BB%BD/1.htm">备份</a><a class="tag" taget="_blank" href="/search/%E5%88%A0%E9%99%A4/1.htm">删除</a>
                                    <div>我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 
当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 
为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 
为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备</div>
                                </li>
                                <li><a href="/article/425.htm"
                                       title="java多态内存分析" target="_blank">java多态内存分析</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%86%85%E5%AD%98%E5%88%86%E6%9E%90/1.htm">内存分析</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E6%80%81%E5%8E%9F%E7%90%86/1.htm">多态原理</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E5%92%8C%E6%8A%BD%E8%B1%A1%E7%B1%BB/1.htm">接口和抽象类</a>
                                    <div>      “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。 
      但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心</div>
                                </li>
                                <li><a href="/article/552.htm"
                                       title="Xshell实现Windows上传文件到Linux主机" target="_blank">Xshell实现Windows上传文件到Linux主机</a>
                                    <span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a>
                                    <div>经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 
我是怎么操作的： 
1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo</div>
                                </li>
                                <li><a href="/article/679.htm"
                                       title="类的加载ClassLoader" target="_blank">类的加载ClassLoader</a>
                                    <span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/ClassLoader/1.htm">ClassLoader</a>
                                    <div>类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。 
  
其中重要的方法为findClass(String name)。 
  
如何写一个自己的类加载器呢？ 
首先写一个便于测试的类Student</div>
                                </li>
                                <li><a href="/article/806.htm"
                                       title="html5写的玫瑰花" target="_blank">html5写的玫瑰花</a>
                                    <span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                                    <div><html>  
<head>  
<title>I Love You!</title>  
<meta charset="utf-8" />  
</head>  
<body>  
<canvas id="c"></canvas>  
</div>
                                </li>
                                <li><a href="/article/933.htm"
                                       title="google的ConcurrentLinkedHashmap源代码解析" target="_blank">google的ConcurrentLinkedHashmap源代码解析</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/LRU/1.htm">LRU</a>
                                    <div>原文地址： 
http://janeky.iteye.com/blog/1534352 
简述 
ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 
 
ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 
 
http://code.google.com/p/concurrentlinke</div>
                                </li>
                                <li><a href="/article/1060.htm"
                                       title="webservice获取访问服务的ip地址" target="_blank">webservice获取访问服务的ip地址</a>
                                    <span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a>
                                    <div>1. 首先注入javax.xml.ws.WebServiceContext, 
@Resource 
 private WebServiceContext context; 
 
 
2. 在方法中获取交换请求的对象。 
 
 
javax.xml.ws.handler.MessageContext mc=context.getMessageContext();
com.sun.net.http</div>
                                </li>
                                <li><a href="/article/1187.htm"
                                       title="菜鸟的java基础提升之道——————>是否值得拥有" target="_blank">菜鸟的java基础提升之道——————>是否值得拥有</a>
                                    <span class="text-muted">百合不是茶</span>

                                    <div>1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员 
  
  
 java组成：</div>
                                </li>
                                <li><a href="/article/1314.htm"
                                       title="通过修改Linux服务自动启动指定应用程序" target="_blank">通过修改Linux服务自动启动指定应用程序</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下:  chkconfig

功能说明：检查，设置系统的各种服务。

语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN></div>
                                </li>
                                <li><a href="/article/1441.htm"
                                       title="spring拦截器的一个简单实例" target="_blank">spring拦截器的一个简单实例</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">拦截器</a><a class="tag" taget="_blank" href="/search/Interceptor/1.htm">Interceptor</a>
                                    <div>Purview接口 
package aop;

public interface Purview {
    void checkLogin();
} 
Purview接口的实现类PurviesImpl.java 
package aop;

public class PurviewImpl implements Purview {
	
    public void check</div>
                                </li>
                                <li><a href="/article/1568.htm"
                                       title="[Velocity二]自定义Velocity指令" target="_blank">[Velocity二]自定义Velocity指令</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a>
                                    <div>什么是Velocity指令 
在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令 
  自定义指令(Directive)的一般步骤 
&nbs</div>
                                </li>
                                <li><a href="/article/1695.htm"
                                       title="【Hive十】Programming Hive学习笔记" target="_blank">【Hive十】Programming Hive学习笔记</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/programming/1.htm">programming</a>
                                    <div> 第二章 Getting Started 
1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.</div>
                                </li>
                                <li><a href="/article/1822.htm"
                                       title="nginx有选择性进行限制" target="_blank">nginx有选择性进行限制</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+%E5%8A%A8%E9%9D%99%E3%80%80%E9%99%90%E5%88%B6/1.htm">nginx 动静　限制</a>
                                    <div>http {
    limit_conn_zone $binary_remote_addr zone=addr:10m;
    limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;...

    server {...
       location ~.*\.(gif|png|css|js|icon)$ {
   </div>
                                </li>
                                <li><a href="/article/1949.htm"
                                       title="java-4.-在二元树中找出和为某一值的所有路径 ." target="_blank">java-4.-在二元树中找出和为某一值的所有路径 .</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>
/*
	 * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it.
	 * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
</div>
                                </li>
                                <li><a href="/article/2076.htm"
                                       title="Netty学习笔记" target="_blank">Netty学习笔记</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>本文是阅读以下两篇文章时： 
 
http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html 
 
http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 
我的一些笔记 
 
===</div>
                                </li>
                                <li><a href="/article/2203.htm"
                                       title="js获取项目路径" target="_blank">js获取项目路径</a>
                                    <span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
                                    <div>//js获取项目根路径，如： http://localhost:8083/uimcardprj 
function getRootPath(){ 
    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp 
    var curWwwPath=window.document.locati</div>
                                </li>
                                <li><a href="/article/2330.htm"
                                       title="oracle 的性能优化" target="_blank">oracle 的性能优化</a>
                                    <span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a>
                                    <div>   在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。 
    1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！</div>
                                </li>
                                <li><a href="/article/2457.htm"
                                       title="Shell变量和数组使用详解" target="_blank">Shell变量和数组使用详解</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F/1.htm">变量</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a>
                                    <div>Shell 变量 
定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： 
your_name="w3cschool.cc" 
注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 
 
 首个字符必须为字母（a-z，A-Z）。 
 中间不能有空格，可以使用下划线（_）。 
 不能使用标点符号。 
 不能使用ba</div>
                                </li>
                                <li><a href="/article/2584.htm"
                                       title="编程中的一些概念，KISS、DRY、MVC、OOP、REST" target="_blank">编程中的一些概念，KISS、DRY、MVC、OOP、REST</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a>
                                    <div>KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie</div>
                                </li>
                                <li><a href="/article/2711.htm"
                                       title="[Android]设置Activity为全屏显示的两种方法" target="_blank">[Android]设置Activity为全屏显示的两种方法</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Activity/1.htm">Activity</a>
                                    <div>1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      </div>
                                </li>
                                <li><a href="/article/2838.htm"
                                       title="solrcloud 部署方式比较" target="_blank">solrcloud 部署方式比较</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/solrCloud/1.htm">solrCloud</a>
                                    <div>solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理 
  
谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo</div>
                                </li>
                                <li><a href="/article/2965.htm"
                                       title="Java synchronized关键字详解" target="_blank">Java synchronized关键字详解</a>
                                    <span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/synchronized/1.htm">synchronized</a>
                                    <div>转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 
 
多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 
同步机制可以使用synchronized关键字实现。 
当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 
当s</div>
                                </li>
                                <li><a href="/article/3092.htm"
                                       title="js实现登录时记住用户名" target="_blank">js实现登录时记住用户名</a>
                                    <span class="text-muted">hw1287789687</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E6%88%91/1.htm">记住我</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81/1.htm">记住密码</a><a class="tag" taget="_blank" href="/search/cookie/1.htm">cookie</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E7%94%A8%E6%88%B7%E5%90%8D/1.htm">记住用户名</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E8%B4%A6%E5%8F%B7/1.htm">记住账号</a>
                                    <div>在页面中如何获取cookie值呢? 
如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 
参考:http://hw1287789687.iteye.com/blog/2050040 
如果要求登录页面是html呢?html页面中如何获取cookie呢? 
直接上代码了 
页面:loginInput.html 
代码: 
<!DOCTYPE html PUB</div>
                                </li>
                                <li><a href="/article/3219.htm"
                                       title="开发者必备的 Chrome 扩展" target="_blank">开发者必备的 Chrome 扩展</a>
                                    <span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a>
                                    <div>Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench 
ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl</div>
                                </li>
                                <li><a href="/article/3346.htm"
                                       title="算法机试题" target="_blank">算法机试题</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/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E8%AF%95%E9%A2%98/1.htm">机试题</a>
                                    <div>       在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。 
       这道题大致意思是：输入一个数，比如4,。这时会输出： 
          &n</div>
                                </li>
                                <li><a href="/article/3473.htm"
                                       title="正确配置Linux系统ulimit值" target="_blank">正确配置Linux系统ulimit值</a>
                                    <span class="text-muted">字符串</span>
<a class="tag" taget="_blank" href="/search/ulimit/1.htm">ulimit</a>
                                    <div>在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进</div>
                                </li>
                                <li><a href="/article/3600.htm"
                                       title="hibernate调用返回游标的存储过程" target="_blank">hibernate调用返回游标的存储过程</a>
                                    <span class="text-muted">Supanccy2013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a>
                                    <div>注：原创作品，转载请注明出处。 
 
 
    上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。 
    此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 
 
1，创建oracle中的包，并在该包中创建的游标类型。 
 
---创建oracle的程</div>
                                </li>
                                <li><a href="/article/3727.htm"
                                       title="Spring 4.2新特性-更简单的Application Event" target="_blank">Spring 4.2新特性-更简单的Application Event</a>
                                    <span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/application/1.htm">application</a>
                                    <div>1.1 Application Event 
 
  Spring 4.1的写法请参考10点睛Spring4.1-Application Event  
  请对比10点睛Spring4.1-Application Event  
  使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低;  
  
1.2 示例 
 
 包依赖 
  
<p</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>