在讲解jQuery时，要和JavaScript进行对比的讲解，易于理解

JavaScript部分

<title>jquery讲解使用</title>

<script src="jquery-2.0.0.min.js"></script>

</head>

<body>

<div id="aa">hello</div>

<div class="bb">22</div>

<div class="bb">33</div>

<div class="bb">44</div>

<input type="text" name="cc" bs="dd"\>

</body>

<script type="text/javascript">

//根据id找元素,找到具体的DOM对象

var d=document.getElementById("aa");

var c=document.getElementsByClassName("bb");

c[0].style.Color="red";           //加索引是因为class数量多，以数组形势找

var div=document.getElementsByTagNameNS("div"); //根据标签名

var input=document.getElementsByName("cc");     //根据name找

//操作内容

//1.非表单元素：

d.innerHTML;  d.innerTEXT;  //获取内容； //添加内容，在后面加 ="";

//2.表单元素

d.value;   //获取内容；  //添加内容，在后面加="";

//操作属性

d.setAttribute("ps","pp");    //设置属性

d.getAttribute("ps");        //获取属性

d.removeAttribute("ps");    //移除属性

//操作样式

d.style.color="red";  //设置样式

d.style.backgroundColor="green";

alert(d.style.width);  //获取样式

　　

jQuery部分

//jQuery部分

$(document).ready(function(e) {

	//根据id找元素，找到JQUERY对象,数组形势；若果要去DOM对象，取索引0的元素

	var jd=$("#aa");  //根据id

	alert(jd[0]);

	var jc=$(".bb");  //根据class

	var div=$("div");  //根据标签名

	var ip=$("input[bs=dd]");  //根据属性筛选

	alert(ip.ep(0)[0]);     //第一个0代表数组索引，ep代表取第几个，第二个0代表取DOM对象

	for(var i=0;i<jc.length;i++)

	{

		jc.eq(i);//取数组里的第几个JQUERY对象

	}

//操作内容

	//1.非表单元素

	jd.text();//获取内容

	jd.text("hello"); //添加内容

	jc.html(); //获取内容

	jc.html("world"); //添加内容

	//2.表单元素

	jc.val(); //获取内容

	jc.val("hello,world"); //添加内容

//操作属性

	ip.attr("ps","bb"); //设置属性， 属性名，属性值

	ip.attr("ps");  //获取属性

	ip.removeAttr("ps"); //移除属性

	 jd.prop("color","red");//用法和attr()函数一样，

	 jd.prop("color");

//操作样式

	jc.css("background-color","red");

//给一个元素添加事件

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

		alert("正确！");

		})

//给多个元素添加事件

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

		alert($(this).text());

		})

//给多个元素设置相同的样式

	$(".bb").css("color","red");

});

　　

练习：使用jQuery实现“全选”等形式

前端页面显示

<title>JQ全选</title>

<script src="jquery-2.0.0.min.js"></script>

</head>

<body>

<input type="checkbox" id="all"/>全选<br />

<input type="checkbox" class="m" value="aa"/>aa 

<input type="checkbox" class="m" value="bb"/>bb 

<input type="checkbox" class="m" value="cc"/>cc 

<input type="checkbox" class="m" value="dd"/>dd 

<br />

<div>

     取选中的值：<input type="button" id="btn" value="点击测试"/>

</div>

<div>

    填写内容进行选中：<input type="text" id="tet"/>

                   <input type="button" id="tb" value="查找选中"/>

</div>

</body>

　　

一.全选功能jQuery代码

	//全选

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

		var jc=$(".m");

		var jd=$(this)[0].checked;

		jc.prop("checked",jd);   //设置属性：prop("属性名","属性值")函数，  //获取属性prop("属性名");

		})

});

二、取选中的值功能jQuery代码

//取选中的值

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

		var jc=$(".m");

		for(var i=0;i<jc.length;i++)

		{

			if(jc.eq(i).prop("checked"))  //标签中都是固有属性，用prop()函数；含有自定义属性时用attr()函数

			{

				alert(jc.eq(i).val());

			}

		}

		})

　　

三、根据填写的内容进行选中

//填写内容进行选中

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

		var v=$("#tet").val();

		var jc=$(".m");

		jc.prop("checked",false);

		for(var i=0;i<jc.length;i++)

		{

			if(jc.eq(i).val()==v)

			{

				jc.eq(i).prop("checked",true);

		    }

		}

		})

　　

在注册表单时，经常会看到

前端代码

<input type="checkbox" id="cr" />同意并接受注册协议

<input type="button" value="提交" id="btn" disabled="disabled"/>

　　

jq代码:

/*同意之后，按钮可用*/

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

		var cr=$(this)[0];  //DOM方式

		if(cr.checked){

			$("#btn").removeAttr("disabled");

		}

		else{

			$("#btn").attr("disabled","disabled");

		}

        })

　　

	/*同意之后，按钮可用*/

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

		var cr=$(this);     //jQuery方式

		if(cr.is(":checked")){

			$("#btn").removeAttr("disabled");

		}

		else{

			$("#btn").attr("disabled","disabled");

		}

	});

　　

jQuery讲解的更多相关文章

  1. JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  2. Web前端开发工程师课程大纲

    PHP程序员雷雪松整理出来的一套独一无二的Web前端开发课程.本套Web前端开发课程专门为想励志成为优秀web前端工程师的学习者而总结归纳的,本套Web前端课程舍弃了一些不常用的即将废弃的HTML标签 ...

  3. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

  4. 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

    http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  5. 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享    在上两篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  6. 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享   在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...

  7. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  8. 【jquery】 API讲解 内部培训资料

    资料在百度云盘 一.jquery  API讲解 1.jquery  api如何使用 jquery  api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...

  9. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

随机推荐

  1. python和pywin32实现窗口查找、遍历和点击

    Pywin32是一个Python库,为python提供访问Windows API的扩展,提供了齐全的windows常量.接口.线程以及COM机制等等. 1.通过类名和标题查找窗口句柄,并获得窗口位置和 ...

  2. java发展道路

    1.

  3. 输出Java的GC信息

    -verbose:gc -XX:+printGC 可以打印GC的简要信息 [GC 4790K->374K(15872K), 0.0001606 secs] [GC 4790K->374K( ...

  4. 诊断SQLSERVER问题常用的日志

    这里主要有两个: (1)Windows事件日志 (2)SQLSERVER ErrorLog 1.Windows事件日志 Event Log 作为一个Windows开启和管理的服务程序,Windows会 ...

  5. UIStoryboard类介绍（如何从Storyboard中加载View Controller）

    如何从Storyboard中加载View Controller? 1. 首先了解下UIStoryboard类: @class UIViewController; @interface UIStoryb ...

  6. 号外号外：9月21号关于Speed-BI 《全国人口统计数据分析》开讲了

    引言:如何快速分析纷繁复杂的数据?如何快速做出老板满意的报表?如何快速将Speed-BI云平台运用到实际场景中?       本课程将通过各行各业案例背景,将Speed-BI云平台运用到实际场景中,通 ...

  7. ASP.NET IIS发布WebService成功了，但是不显示参数界面

    当您尝试从远程计算机访问 Web 服务时,不会显示“调用”按钮.并且,您会收到以下错误信息: The test form is only available for requests from the ...

  8. Vue.2.0.5-事件处理器

    监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 示例: <div id="example-1"> <button v- ...

  9. 从 Vue 1.x 迁移

    FAQ 哇,非常长的一页!是否意味着 Vue2.0 已经完全不同了呢,是否需要从头学起呢,Vue1.0 的项目是不是没法迁移了? 非常开心地告诉你,并不是! 几乎90%的 API 和核心概念都没有变. ...

  10. spring4 文件下载功能

    需要准备的工具和框架 Spring 4.2.0.RELEASE Bootstrap v3.3.2 Maven 3 JDK 1.7 Tomcat 8.0.21 Eclipse JUNO Service ...