以下都能在页面加载的时候弹出窗口:
<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 的简介方式。
某些其他 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) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
通过 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());
});
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");