在讲解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. 转： PE rva to raw 虚拟偏移地址和文件物理偏移地址

    +---------+---------+---------+---------+---------+---------+| 段名称 虚拟地址 虚拟大小 物理地址 物理大小 标志 |+-------- ...

  2. Cocos2d-JS替换初始化场景

    Cocos2d-js工程默认启动入口为app.js,准备修改为另外一个入口文件如:GameScene.js var GameLayer = cc.Layer.extend({ ctor:functio ...

  3. Android笔记：真机调试无法输出Log 信息的问题

    机器在出厂时将log的级别做了限制,方法是:拨号盘输入*20121220# -> 选择日志输出级别 -> 选择Java log level -> 选择LOGD即可. 方法是:拨号盘输 ...

  4. 不允许修改SQLserver2008r2表中字段的属性问题

    SQLserver2008r2修改表中字段的属性时弹出 点击工具->选项,取消阻止保存要求重新创建表的更改

  5. JSONModel 遇见关键字为id或者description

    像id.description这样的,都是系统自带的,要解析它,得特殊处理一下.我用的是JSONModel { "contentList": [ { "id": ...

  6. Session服务器配置指南与使用经验

    一.摘要 所有Web程序都会使用Session保存数据. 使用独立的Session服务器可以解决负载均衡场景中的Session共享问题.本文介绍.NET平台下建立Session服务器的几种办法, 并介 ...

  7. LeetCode Flip Game II

    原题链接在这里:https://leetcode.com/problems/flip-game-ii/ 题目: You are playing the following Flip Game with ...

  8. web前端学习网址

    最近一次电脑崩溃,重装系统所有在浏览器的网址,烟霄云散了…… 手册网址: http://www.shouce.ren/api/index demo学习网址: http://www.w3cplus.co ...

  9. rank 和 星星评级

    我们常常看到打分,如下图 这样的效果有几种方法 1.用:lt(index) /* $('dl').each(function(){ var ths = $(this); $(this).find('d ...

  10. Review of Segmentation for Medical image analysis

    成像方法:X射线,CT,MRI,SPECT,PET等 分割的定义: Image segmentation is a procedure for extracting the region of int ...