jquery笔记

野性酷女 2024-04-19 07:43 20阅读 0赞

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

$("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");

**更多的选择器实例**

<table style="background:#F9F9F9"> 
 <tbody> 
 <tr> 
 <td style="background:#D5D5D5"> 语法 </td> 
 <td style="background:#D5D5D5"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $(this) </td> 
 <td style="background:#EFEFEF"> 当前 HTML 元素 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $("p") </td> 
 <td style="background:#EFEFEF"> 所有 &lt;p&gt; 元素 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $("p.intro") </td> 
 <td style="background:#EFEFEF"> 所有 class="intro" 的 &lt;p&gt; 元素 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $(".intro") </td> 
 <td style="background:#EFEFEF"> 所有 class="intro" 的元素 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $("#intro") </td> 
 <td style="background:#EFEFEF"> id="intro" 的元素 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $("ul li:first") </td> 
 <td style="background:#EFEFEF"> 每个 &lt;ul&gt; 的第一个 &lt;li&gt; 元素 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $("[href$='.jpg']") </td> 
 <td style="background:#EFEFEF"> 所有带有以 ".jpg" 结尾的属性值的 href 属性 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $("div#intro .head") </td> 
 <td style="background:#EFEFEF"> id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素 </td> 
 </tr> 
 </tbody> 
</table>

## jQuery名称冲突 ##

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

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

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

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

**jQuery 事件**

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

<table style="background:#F9F9F9"> 
 <tbody> 
 <tr> 
 <td style="background:#D5D5D5"> Event 函数 </td> 
 <td style="background:#D5D5D5"> 绑定函数至 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $(document).ready(function) </td> 
 <td style="background:#EFEFEF"> 将函数绑定到文档的就绪事件（当文档完成加载时） </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $(selector).click(function) </td> 
 <td style="background:#EFEFEF"> 触发或将函数绑定到被选元素的点击事件 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $(selector).dblclick(function) </td> 
 <td style="background:#EFEFEF"> 触发或将函数绑定到被选元素的双击事件 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $(selector).focus(function) </td> 
 <td style="background:#EFEFEF"> 触发或将函数绑定到被选元素的获得焦点事件 </td> 
 </tr> 
 <tr> 
 <td style="background:#EFEFEF"> $(selector).mouseover(function) </td> 
 <td style="background:#EFEFEF"> 触发或将函数绑定到被选元素的鼠标悬停事件 </td> 
 </tr> 
 </tbody> 
</table>

## 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="Text.";               // 以 HTML 创建新元素

·         var txt2=$("").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").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");

jquery笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jquery笔记

相关学习笔记（jQuery）

相关 JQuery学习笔记

相关 jquery笔记

相关 jQuery笔记

相关 JQuery学习笔记

相关 jQuery笔记

相关 JQuery笔记

相关 jQuery 笔记

相关 jQuery笔记