jquery笔记

以下都能在页面加载的时候弹出窗口：

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script>
	$(function(){ 
	  alert("1"); 
	});
	(function(){ 
	  alert("2"); 
 	})();
 </script>

$("tr[data-no]").length得到属性为data-no的tr的个数

$("input[name='couponType']:checked").val() 得到被选中单选框的name为couponType的value

得到该对象下面的标签里面的class名称

$(this).find("div").find("i").attr('class');

each的用法<img/><img/>

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

jquery取得this的时候需要使用$(this)才行，如：

$('.J_datexxx').on('change', function () {
alert($(this).attr("data-date"));
 });

$(".j_isTimeCheck").click(function(){});在页面加载的时候检测的class，不能检测到该class被删除掉又重新载入的问题

$(".j_scopeType").live("click",function(){});是可以检测到重新载入的问题

var pid = $(".J_chk-items").eq(i).val();获取匹配的第i个元素

:not用于筛选的选择器    $(".j_gobuy:not('.dis')").click(function(){

not() 从匹配元素集合中删除元素

从包含所有段落的集合中删除 id 为 "selected" 的段落： 

$("p").not("#selected")

在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：$(document).ready(function(){});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

1、试图隐藏一个不存在的元素

2、获得未完全加载的图像的大小

 

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于"#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于"#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以".jpg" 结尾的元素。

 

if($("input[type=radio][name=faceValue]:checked").val()==0)

如果所有类型为input的标签，并且该type属性为radio，name属性为faceValue，并且是被选中的，并且该表单的value为0

 

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

 

更多的选择器实例

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

 

jQuery名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

 

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

 

jQuerytoggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){

  $("p").toggle();

});

 

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

·        text() - 设置或返回所选元素的文本内容

·        html() - 设置或返回所选元素的内容（包括 HTML 标记）

·        val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

$("#btn1").click(function(){

  alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

  alert("HTML: " + $("#test").html());

});

 

获取属性 - attr()

jQueryattr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){

  alert($("#w3s").attr("href"));

});

 

 

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

·        append() - 在被选元素的结尾插入内容

·        prepend() - 在被选元素的开头插入内容

·        after() - 在被选元素之后插入内容

·        before() - 在被选元素之前插入内容

·         $("p").append("Some appended text.");

·         $("p").prepend("Some prepended text.");

·        append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

·        在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

·         function appendText()

·         {

·         var txt1="<p>Text.</p>";               // 以 HTML 创建新元素

·         var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素

·         var txt3=document.createElement("p");  // 以 DOM 创建新元素

·         txt3.innerHTML="Text.";

·         $("p").append(txt1,txt2,txt3);         // 追加新元素

·         }

·        jQuery after() 方法在被选元素之后插入内容。

·        jQuery before() 方法在被选元素之前插入内容。

 

$("img").after("Some text after");

$("img").before("Some text before");

 

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

·        remove() - 删除被选元素（及其子元素）

·        empty() - 从被选元素中删除子元素

·         $("#div1").remove();

·         $("#div1").empty();

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

下面的例子删除 class="italic" 的所有<p> 元素：

$("p").remove(".italic");

 

 

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

·        addClass() - 向被选元素添加一个或多个类

·        removeClass() - 从被选元素删除一个或多个类

·        toggleClass() - 对被选元素进行添加/删除类的切换操作

·        css() - 设置或返回样式属性

·         $("button").click(function(){

·           $("h1,h2,p").addClass("blue");

·           $("div").addClass("important");

·         });

 

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

$("p").css("background-color");

 

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

$("p").css("background-color","yellow");