jQuery讲解
在讲解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讲解的更多相关文章
- JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- Web前端开发工程师课程大纲
PHP程序员雷雪松整理出来的一套独一无二的Web前端开发课程.本套Web前端开发课程专门为想励志成为优秀web前端工程师的学习者而总结归纳的,本套Web前端课程舍弃了一些不常用的即将废弃的HTML标签 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享
http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享 在上四篇文章 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享
http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享 在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...
- 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享 在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...
- 【jquery】 API讲解 内部培训资料
资料在百度云盘 一.jquery API讲解 1.jquery api如何使用 jquery api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
随机推荐
- 针对JD-GUI
switch(0){ case 1001: JSONObject jsoObj; String data = null; boolean isclose = false; try{ jsoObj = ...
- Eclipse插件项目 引用其他类库的方法(jar)
这两天搞了个Eclipse插件项目,用来监测ios.android设备和电脑的连接,安装apk/ipa到对应设备等等功能. 遇到了build path下的library引入编译正常,运行时报Class ...
- node.js创建服务器报错
创建nodeTest.js如下: var http = require('http'); http.createServer(function (request, response){ respons ...
- Magento多语言功能
Magento多语言功能是建立在视图(view)基础之上的,可以通过后台创建店铺视图来创建基于Magento的多语言店铺.本文为大家讲解如何创建多语言的功能.首先,进入“管理店铺”节点,如下所示. S ...
- （转帖） java内存分配分析/栈内存、堆内存
http://blog.csdn.net/qh_java/article/details/9084091
- UILabel 添加图片
//设置显示图片 NSMutableAttributedString * cellAttributeStr = [[NSMutableAttributedString alloc]initWithSt ...
- Java学习-026-类名或方法名应用之二 -- 统计分析基础
前文讲述了类名或方法的应用之一调试源码,具体请参阅:Java学习-025-类名或方法名应用之一 -- 调试源码 此文主要讲述类名或方法应用之二统计分析,通过在各个方法中插桩(调用桩方法),获取方法的调 ...
- 使用Aspose.Cell控件实现Excel高难度报表的生成（二）
继续在上篇<使用Aspose.Cell控件实现Excel高难度报表的生成(一)>随笔基础上,研究探讨基于模板的Aspose.cell报表实现,其中提到了下面两种报表的界面,如下所示: 或者 ...
- .emacs
(tool-bar-mode 0)(menu-bar-mode 0)(blink-cursor-mode 0);;(set-scroll-bar-mode nil);;(global-linum-mo ...
- Android ExpandableListView的下拉刷新实现
该控件的修改时根据PullToRefreshList的机制修改 下面是对ExpandableListView的扩展 package com.up91.gwy.view.componet; import ...