在讲解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. Dreamweaver代码提示快捷键冲突

    平时习惯使用Ctrl+空格进行输入法的切换,然后Dreamweaver代码提示的快捷键也是Ctrl+空格,那么只好把Dw的快捷键改掉吧, 选择菜单:编辑->快捷键 复制副本 选择编辑 找到&qu ...

  2. JDK中的URLConnection参数详解

    针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验 ...

  3. Nagios Looking Glass 本地文件包含漏洞

    漏洞名称: Nagios Looking Glass 本地文件包含漏洞 CNNVD编号: CNNVD-201310-682 发布时间: 2013-10-31 更新时间: 2013-10-31 危害等级 ...

  4. 1066 Bash游戏

    1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到最后1颗石子的人获胜.假设A B都非常聪明, ...

  5. XPS1330 作为Linux服务器之安装配置计划

      # Task 状态 完成时间 备注 博文链接  1.  打通SSH  未开始  --  安装系统后已经具备  --  2.  打通FTP  未开始  --  安装系统后已经具备  --  3.   ...

  6. LeetCode Basic Calculator II

    原题链接在这里:https://leetcode.com/problems/basic-calculator-ii/ Implement a basic calculator to evaluate ...

  7. 北大，awk 命令基础练习

    北大,awk 命令基础练习 Red Hat Enterprise Linux Version 5.3 Get the latest news about the world's Open Source ...

  8. Android解决java.lang.OutOfMemoryError: bitmap size exceeds VM budget(转)

    昨天遇到这个问题就是从一个输入流里调用BitmapFactory.decodeStream(this.getContentResolver().openInputStream(uri))得到一个bit ...

  9. OpenGIS Simple feature access

    OGIS规范定义的几何对象定义 Curve:A Curve is a 1-dimensional geometric object usually stored as a sequence of Po ...

  10. nagios监控linux主机监控内存脚本

    说明 工作包括两部分监控端(一二三)和被监控端(四) 一.nrpe.cfg中添加脚本 nrpe.cfg中添加命令索引 command[check_used_mem]=/usr/local/nagios ...