`
y8820960
  • 浏览: 116374 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

(一)jQuery总结:attribute

 
阅读更多

attribute


$("p").addClass(css中定义的样式类型);  给某个元素添加样式

$("img").attr({src:"test.jpg",alt:"test Image"});  给某个元素添加属性/值,参数是map

$("img").attr("src","test.jpg");  给某个元素添加属性/值,getter、setter类型

$("img").attr("title",function(){return this.src});  给某个元素添加属性/值

$("元素名称").html();  获得该元素内的内容(元素,文本等)

$("元素名称").html("<b>new stuff</b>");给某元素设置内容

$("元素名称").removeAttr("属性名称");   给某元素删除指定的属性以及属性值

$("元素名称").removeClass("class");  给某元素删除指定的样式

$("元素名称").text();  获得该元素的文本

$("元素名称").text(value); 设置该元素的文本值为value

$("元素名称").toggleClass(class)   当元素存在参数中的样式的时候取消,如果不存在就设置此样式

$("input 元素名称").val();  获得input元素的值

$("input 元素名称").val(value);  设置input元素的值为value

 

 

Manipulation:


$("元素名称").after(content);  在匹配元素后面添加内容

$("元素名称").append(content); 将 content 作为元素的内容插入到该元素的后面

$("元素名称").appendTo(content);  在content后街元素

$("元素名称").before(content);  与after方法相反

$("元素名称").clone(布尔表达式);  当布尔表达式为真时,克隆元素(无参时,当true处理)

$("元素名称").empty();  将该元素的内容置为空

$("元素名称").insertAfter(content);  将该元素插入到content之后

$("元素名称").insertBefore(content);  将该元素插入到content之前

$("元素").prepend(content);  将content作为该元素的一部分,放到该元素的最前面

$("元素").prependTo(content);  将该元素作为content的一部分,放在content的最前面

$("元素").remove();  删除所有的指定元素

$("元素").remove("exp"):  删除所有包含exp的元素

$("元素").wrap("html");  用html来包围该元素

$("元素").wrap(element);  用element来包围该元素

 

Traversing(穿越 ):


add(expr)

add(html)

add(elements)

children(expr)

contains(str)

end()

filter(expression)

filter(filter)

find(expr)

is(expr)

next(expr)

not(el)

not(expr)

not(elems)

parent(expr)

prev(expr)

siblings(expr)

 

 

Core:

 

$(html).appendTo("body");  相当于在body中写了一段html代码

$(elems)  获得DOM上的某个元素

$(function(){......}) ;  执行一个函数

$("div > p").css("border", "1px solid gray");  查找所有div的子节点p,添加样式

$("input:radio",document.form[0]) 在当前页面的第一个表单中查找所有的单选按钮

$.extend(prop)  prop是一个jquery对象

举例:

jQuery.extend({

  min:function(a,b) {return a<b ? a : b};

  max:function(a,b){return a>b ? a : b};

});

jQuery(expression,[context])-$(expression,[context]);在默认情况下,$()查询的事当前HTML的DOM元素。


each(callback)  以每一个匹配的元素作为上下文来执行一个函数

举例1:

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

  $("li").each(function(){

    $(this).toggleClass("example");

});

});

举例2:

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

  $("div").each(function(index,domEle){

    // domEle == this

    $(domEle).css("backgroundColor","yellow");

    if($(this).is("#stop")){

      $("span").text("Stopped at div index #" + index);

      return false;

}

})

})

分享到:
评论

相关推荐

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    jQuery 是一个广泛使用的JavaScript库,由John Resig于2006年创建,它极大地简化了JavaScript编程,尤其是处理DOM操作、事件处理、动画效果和Ajax交互。jQuery 的设计目标是“write less, do more”,它通过提供简洁...

    jquery总结 Js总结 PHP与jquery

    **jQuery 知识总结** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、...

    jQuery中[attribute=value]选择器用法实例

    在jQuery中,`[attribute=value]`选择器是一种强大的工具,用于选取具有特定属性和该属性值相等的HTML元素。这个选择器基于CSS选择器的语法,使得开发者能够更精确地定位页面上的元素,从而进行操作或应用样式。本文...

    很好的Jquery总结

    本总结将深入探讨jQuery的核心知识点,包括选择器、DOM操作、事件处理和Ajax应用。** ### 一、jQuery选择器 jQuery 的选择器基于CSS,允许开发者通过简单的语法选取DOM中的特定元素。常见的选择器有: 1. **基本...

    jquery 总结文档

    ### jQuery 总结文档知识点详解 #### 一、DOM 操作与读取 **1. 获取 DOM 元素的方法** - **通过 ID**: 使用 `$("#myName")` 可以根据指定的 ID 来获取 DOM 元素。这种方式非常快捷且高效。 - **通过类名**: 例如 ...

    最新版JQuery-jquery-3.2.1.min.js

    总结,jQuery 3.2.1版是一个更加精炼和现代的版本,尽管移除了`jQuery.holdReady()`和`jQuery.isArray()`,但其核心功能依然强大且全面。开发者应利用jQuery提供的API,结合最新的JavaScript特性,构建高性能、易...

    jquery1.6.1 jquery

    总结来说,jQuery 1.6.1 是一个强大且成熟的JavaScript库,它的出现极大地提升了Web开发的效率,简化了许多复杂的任务。尽管现在已经有了更新的版本,但1.6.1仍是一个可靠的选择,尤其对于那些需要向后兼容或者对...

    jquery api合集

    总结,从jQuery 1.4到1.7,API的进化不仅带来了性能的提升,也优化了代码的编写方式,使得jQuery更加易用且强大。了解并熟练掌握这些版本的API,将有助于开发者编写出高效、优雅的前端代码。无论是在小型项目还是...

    jQuery知识点总结

    以下是对jQuery知识点的详细总结: ### 一、获取元素 #### 1. 选择器 - **基本选择器**:`$("#id")`, `$(".class")`, `$("tag")`, `$("selector1, selector2")` 用于根据ID、类名、标签名或多个选择器组合选取元素...

    Jquery各种手册

    总结,jQuery以其简洁的API和丰富的功能,极大地提高了JavaScript开发效率。熟练掌握jQuery,能够让你在网页开发中游刃有余,无论是页面交互还是数据通信,jQuery都能提供高效且优雅的解决方案。学习并理解以上知识...

    jQuery 类库以及使用说明

    总结来说,jQuery是一个强大的JavaScript库,它的出现极大地提升了前端开发效率,使得开发者能够专注于功能实现而非DOM操作的细节。掌握jQuery,不仅可以提高生产力,也有助于理解现代前端开发中的各种概念和技术。

    jQuery相关知识总结.pdf

    总结,jQuery是一个功能强大且易用的JavaScript库,它极大地简化了前端开发工作。通过理解jQuery的选择器、对象模型、DOM操作、事件处理、动画和Ajax功能,开发者可以更高效地构建动态、响应式的Web应用。虽然现代...

    jquery的案例和学习资料

    2. **DOM 操作**:jQuery 提供了简便的方法来获取、添加或修改HTML元素,如 `$(selector).html()`, `$(selector).append()`, `$(selector).attr('attribute', 'value')` 等。 3. **事件处理**:jQuery 通过 `.on()`...

    Jquery知识点总结

    ### Jquery知识点总结 #### 一、Jquery简介与学习流程 JQuery 是一款轻量级的 JavaScript 库,它的宗旨是“write less, do more”(写得更少,做得更多)。它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互...

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON的支持、XML解析以及一套强大的选择器系统,使得开发者能够更加高效地选取和操作...

    jQuery的学习总结1

    jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画设计和 AJAX 交互。在本文中,我们将深入探讨 jQuery 的基础知识,包括如何引入库、选择器、事件方法等内容。 首先,要使用 jQuery,你...

    jquery-1.6.3

    《jQuery 1.6.3:经典版本的深入解析》 ...总结,jQuery 1.6.3作为一个经典版本,尽管现在已经有了更先进的版本,但它仍然在很多项目中被广泛使用。了解并掌握其特性和用法,对于提升Web开发效率和质量具有重要意义。

    jquery练习狂拍灰太狼.zip

    《jQuery属性节点训练...总结,jQuery的属性节点操作是其强大功能的一部分,通过“狂拍灰太狼”这样的实战项目,你可以亲手实践,从而更好地理解和掌握这一技能。不断练习,你将能够游刃有余地应对各种Web开发挑战。

    从零开始学习jQuery

    - **jQuery包装集**是指一组被jQuery包装的DOM元素集合。 - **操作**:可以对这些包装集进行操作,如增加、删除元素,改变元素的属性等。 - 示例:`$("div").append("&lt;p&gt;New paragraph&lt;/p&gt;");` 向所有`&lt;div&gt;`标签内...

    jquery选择器总结

    ### jQuery选择器总结 在前端开发领域,jQuery作为一款优秀的JavaScript库,凭借其简洁的语法、强大的功能,深受开发者喜爱。其中,选择器是jQuery的一个核心功能,它可以帮助开发者快速定位DOM元素,并对其进行...

Global site tag (gtag.js) - Google Analytics