`

jquery 学习(属性选择实例)

阅读更多

选择表单checkbox  name为 items 的 设置 属性 checked =true

 $('[name=items]:checkbox').attr('checked', true);

 

遍历函数 each

 $.each(obj, fn) 

一个通用的迭代函数,可用于近似地迭代对象和数组。

这个函数与$().each()不同,$().each()是专门用于迭代和执行jQuery对象的函数。而这个函数可以用于迭代任何对象和数组。 这个函数的回调中包含两个参数:第一个是key(对象)或index(数组),第二个是值。

返回值:Object

参数:

  • obj (Object): 要重复迭代的对象或数组
  • fn (Function): 要在每个对象中执行的函数
 

示例:

这是一个迭代数组中所有项目的例子,通过函数访问了其中的每个项目和索引。

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

示例:

这是一个迭代对象中所有属性的例子,通过函数访问了每个属性的名称和值。

$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });  

过滤函数 fiter(表达式)

保留带有select类的元素

HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>jQuery 代码:
$("p").filter(".selected")结果:
[ <p class="selected">And Again</p> ]

 

判断当前函数是否是

$(this).is('#username')

 

find()

从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:
<p><span>Hello</span>, how are you?</p>jQuery 代码:
$("p").find("span")结果:
[ <span>Hello</span> ]

 

Jquery AJAX

load() ID resText 的元素 附上 test.html

 

$("#resText").load("test.html");

 

$.get()

 

$.post()

 

$(function(){
	   $("#send").click(function(){
			$.post("post1.jsp", { 
						username :  $("#username").val() , //获得表单的值
						content :  $("#content").val()  
					}, function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
					}
			);
	   })
})
// textStatus :状态

 

 

 动态加载js

 $(function(){
        $('#send').click(function() {
             $.getScript('test.js');
        });
   }) 

 代码片段2

$(function(){
             $.getScript('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){
			      $("<p>加载JavaScript完毕</p>").appendTo("body");
				  $("#go").click(function(){
					   $(".block").animate( { backgroundColor: 'pink' }, 1000)
					              .animate( { backgroundColor: 'blue' }, 1000);
				  });
			 });
   })

//后面一个function是回调函数 加载完毕js后执行 

 

 

$.getJSON

 

 

serialize() 对如很多表单需要提交的时候 一个一个写很麻烦 可以:

<script language="javascript" >
	$(function(){
	   $("#send").click(function(){
			var $data =  $(":checkbox,:radio").serialize();
            alert( $data );
	   })
	})
</script>

 

提交类型为checkbox 和 radio 类型 病序列化 

alert弹出的形式为 选中的"name=value"

check=1&check=2

 

提交所有form

$(function(){
	   $("#send").click(function(){
			$.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
					}
			);
	   })
	})

 

 

 

 

分享到:
评论

相关推荐

    jquery学习ppt和实例

    **jQuery学习PPT和实例详解** 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本资料包“jQuery学习ppt和实例”提供了深入学习jQuery的详细内容,...

    jQuery学习手册及实例练习

    《jQuery学习手册及实例练习》是一份全面介绍jQuery库的学习资源,旨在帮助开发者深入理解和熟练运用这个强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务,使得前端开发变得更加...

    先锋jQuery学习实例

    **jQuery学习实例详解** jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能,使得网页开发变得更加高效和简单。本实例集合是专为初学者设计的,旨在帮助理解并掌握jQuery的核心概念和常见用法。 1. **...

    jquery初学者学习实例

    《jQuery初学者学习实例》是一份专为编程新手设计的教程资源,主要涵盖了jQuery库的基础知识和实际应用。jQuery是一个高效、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。对于刚...

    jQuery特效和实例集合

    理解jQuery的选择器语法是掌握其基础的关键,包括ID选择器(#id),类选择器(.class),以及属性选择器([attr=value])等。 二、jQuery DOM操作 jQuery提供了丰富的DOM操作方法,如`append()`用于在元素内部追加内容,...

    jQuery学习实例大全

    《jQuery学习实例大全》是为那些正在探索JavaScript库jQuery的开发者提供的一份宝贵资源。这份压缩包包含了丰富的jQuery实例代码,旨在帮助初学者快速掌握jQuery的核心功能和实用技巧,同时也可作为进阶开发者巩固和...

    jQuery学习实例和心得

    jQuery是JavaScript库中的一个巨擘,它极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本资源针对初学者,旨在...这份"jQuery学习实例和心得"资源将是你宝贵的参考资料,帮助你在JavaScript的世界里更进一步。

    jQuery网页开发实例精解源代码

    在DOM操作方面,读者可以通过实例学习如何使用jQuery选择元素、添加删除元素、改变元素内容和属性,以及如何操作CSS样式。例如,可能会有例子演示如何通过jQuery轻松地获取和设置HTML元素的值,或者如何实现动态添加...

    jquery css 学习实例

    在本"jQuery CSS 学习实例"中,我们将深入探讨如何使用jQuery库来增强和操纵网页的CSS样式。这个学习资源可能是某个公司内部用于培训员工或提升网站开发技能的源代码集合。通过研究这些实例,我们可以了解到jQuery...

    JQuery 页面文档及实例

    **jQuery 页面文档及实例** jQuery 是一个高效、简洁且易用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画...通过深入学习和实践,你将能够熟练地运用jQuery,提高开发效率,创建出功能丰富的网页应用。

    jquery学习简单实例

    **jQuery学习简单实例** jQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本实例旨在为初学者提供一个快速了解和掌握jQuery基础知识的途径...

    锋利的jQuery第一版 实例源码

    《锋利的jQuery第一版》实例源码是一个与jQuery相关的学习资源,主要包含了一系列实际操作的代码示例,用于帮助读者深入理解并掌握jQuery库的使用。jQuery是一个广泛应用于Web开发的JavaScript库,它简化了...

    锋利的jQuery+实例

    学习基本的选择器,如ID选择器(#id)、类选择器(.class)和元素选择器(element),以及组合选择器、后代选择器和兄弟选择器等,以高效地选取DOM元素。 2. **DOM操作**:掌握如何添加、删除和修改HTML元素,包括使用...

    jquery表格操作实例

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨...通过不断实践和学习,你将能掌握更多关于jQuery表格操作的高级技巧和最佳实践。

    jQuery 入门提高速成实例打包

    1. **选择器**: jQuery 的核心在于强大的选择器,它们允许开发者通过CSS样式选择器、ID、类、属性等来选取DOM元素。例如,`$("#myID")` 选择具有特定ID的元素,`$(".myClass")` 选择所有带有指定类的元素。 2. **...

    Jquery 多种弹出窗口实例

    在本教程中,我们将探讨“jQuery 多种弹出窗口实例”,学习如何创建交互式弹出窗口,并实现点击页面其他位置时窗口自动隐藏的功能。 首先,让我们了解弹出窗口的基本概念。弹出窗口是网页设计中常用的一种交互元素...

    jquery经典实例60例-动画实例

    《jQuery经典实例60例-动画实例》是学习jQuery库中动画效果的宝贵资源,它涵盖了从基础到高级的各种动画技巧。jQuery库以其简洁、强大的API而闻名,尤其是在处理页面元素的动态展示和动画效果方面。以下将详细介绍...

    jQuery 精通的实例

    这个“jQuery精通的实例”旨在帮助开发者深入理解和运用jQuery的核心功能,通过实例化学习来巩固基础知识。 一、jQuery基础 1. 选择器:jQuery的选择器与CSS相似,如$("#id")选择ID为id的元素,$(".class")选择...

    jquery 106个 经典实例

    压缩包中的`jQ学习第一季`、`jQ学习第二季`、`jQ学习第三季`可能包含了按章节分类的jQuery实例代码,每个实例都可能对应一种或多种功能的应用,是学习和实践的好材料。 通过学习和实践这106个jQuery经典实例,...

    Jquery学习-实例 通俗易懂

    这个“Jquery学习-实例 通俗易懂”的资源显然是为了帮助初学者快速掌握jQuery的核心概念和实用技巧。接下来,我们将深入探讨jQuery的相关知识点。 一、jQuery选择器 jQuery的选择器是其强大功能的基础,它使得选取...

Global site tag (gtag.js) - Google Analytics