Jquery学习笔记

最新推荐文章于 2025-08-08 17:07:36 发布

转载最新推荐文章于 2025-08-08 17:07:36 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vipchenwei/articles/7367311.html

文章标签：

#javascript #ViewUI

1.选择器

　　1.1基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

$("#myDiv");


<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

$("div");

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

$(".myClass");

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

$("*")

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

$("div,span,p.myClass")

代码示例

　　1.2层级选择器

ancestor descendant   
parent > child ()
prev + next
prev ~ siblings

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

$("form input")
$("form > input")
$("label + input")
$("form ~ input")

代码示例

　　1.3基本筛选器

:first   
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:last
:lt(index)

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

$('li:first');
$('li:last')


<input name="apple" />
<input name="flower" checked="checked" />

$("input:not(:checked)")

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

$("tr:even")
$("tr:odd")
$("tr:eq(1)")
$("tr:gt(0)")
$("tr:lt(2)")

代码示例

　　1.4属性选择器

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

$("div[id]")

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

$("input[name='newsletter']").attr("checked", true);
$("input[name!='newsletter']").attr("checked", true);

<input name="man-news" />
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

$("input[name^='news']")
$("input[name$='letter']")
$("input[name*='man']")

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

$("input[id][name$='man']")

代码实例

　　1.5表单选择器

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>


$(":input")
$(":text")
$(":password")
....

代码示例

　　1.6表单属性选择器

:enabled
:disabled
:checked
:selected

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")
$("input:disabled")

<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

$("input:checked")


<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

$("select option:selected")

代码示例

2.属性

　　2.1属性

attr(name|pro|key,val|fn)
removeAttr(name)
prop(n|p|k,v|f)
removeProp(name)

//-----------------------attr
$("img").attr("src");  //返回文档中所有图像的src属性值。
$("img").attr({ src: "test.jpg", alt: "Test Image" }); //为所有图像设置src和alt属性。
$("img").attr("src","test.jpg"); //为所有图像设置src属性。

//----------------------removeAttr
<img src="test.jpg"/>
$("img").removeAttr("src");


//--------------------prop
$("input[type='checkbox']").prop("checked");//选中复选框为true，没选中为false
$("input[type='checkbox']").prop({
  disabled: true
}); //禁用页面上的所有复选框。

$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

//------------------------removeProp
<p> </p>
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

代码示例

　　2.2Css类

addClass(class|fn)
removeClass([class|fn])

//-----------------------addClass
$("p").addClass("selected");  //为匹配的元素加上 'selected' 类
$("p").addClass("selected1 selected2");

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

$('ul li:last').addClass(function() {  //给li加上不同的class
  return 'item-' + $(this).index();
});

//---------------------------------removeClass
$("p").removeClass("selected");//从匹配的元素中删除 'selected' 类
$("p").removeClass();// 删除匹配元素的所有类

$('li:last').removeClass(function() {  //删除最后一个元素上与前面重复的class
    return $(this).prev().attr('class');
});

View Code

　　2.3HTML代码/文本/值

html([val|fn])
text([val|fn])
val([val|fn|arr])
css(name|pro|[,val|fn])

//--------------------------html
$('p').html(); //返回p元素的内容。
$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容

//--------------------------text
$('p').text();//返回p元素的文本内容。
$("p").text("Hello world!"); //设置所有 p 元素的文本内容

//-------------------------val
$("input").val(); //获取文本框中的值
$("input").val("hello world!");//设定文本框的值

代码示例

3.文档处理

　　3.1内部插入

append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)

　　3.2外部插入

after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)

　　3.3删除

empty()
remove([expr])

　　3.4替换

replaceWith(content|fn)
replaceAll(selector)

　　3.5复制

clone([Even[,deepEven]])

4.筛选

　　4.1过滤

eq(index|-index)
first()
last()
not(expr|ele|fn)

　　4.2查找

children([expr])
find(e|o|e)
next([expr])
nextAll([expr])
nextUntil([e|e][,f])
parent([expr])
parents([expr])
parentsUntil([e|e][,f])
prev([expr])
prevall([expr])
prevUntil([e|e][,f])
siblings([expr])

5.事件

　　5.1页面载入

ready(fn)

　　5.2事件委派

on(eve,[sel],[data],fn)
off(eve,[sel],[fn])

　　5.3事件切换

hover([over,]out)

　　5.4常用事件

change([[data],fn])
click([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])

具体实例，参考：http://jquery.cuishifeng.cn/index.html

转载于:https://www.cnblogs.com/vipchenwei/articles/7367311.html