<参考文档>
1、什么是?
DOM的作用:提供了一种动态的操作HTML元素的方法。
jQuery是一个优秀的js库。用来操作HTML元素的工具。
jQuery和DOM关系:DOM--树。jQuery是多个DOM模型的集合。
jQuery设计核心理念:write less,do more;
DOM获取id的值:document.getElementById("id");
jQuery获取id的值: $("#id");$=jQuery
jQuery的缺点:效率会下降。
注意点:jQuery可以和DOM混用。
2005诞生-------11年了。
2、相关作用?
1、获取HMTL元素---id,name,tag......
2、动态改变页面中的css样式和属性。
<p color="red" style="id:p1;" id="p1">
css样式。name="p1" input disabled="disabled"
3、动态的改变页面内容。
var p1=document.getElementById("p1");
p1.value="";
4、事件响应。
click;focus,blur......鼠标的移动等........
5、快速实现通信
ajax---对异步请求的支持非常的缜密。功能非常的完成。
6、提供页面基本动画需求
淡入,淡出,擦除,移动。。。。。。
3、怎么用?
第一步:下载包......
第二步:配置
本机配置:<script src="js/..."></script>
联网配置:< src="http://ajax.googleapis.com/ajax/jquery/1.6.4/jquery.min.js">
第一种:< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
第二种:< script type= "text/javascript" src= "./js/jquery-1.7.2.min.js" ></script >
第三步:测试;
4、选择器
基本选择器
- id选择器:$("#p1").css({"color":"red","font-size":"50px"});
- 类选择器:$(".p1").css("color","red");
- 标签选择:$("p").css("color","blue");
- 选择后过滤:$("p[class='p1']").css("color","blue");
- 通配符选择器:$("div *").css("color","blue");(注意,星号前有空格键)
- 组选择器:$("h2,#div1,.p2,[title='p2']").css("color","yellow");
伪类选择器:选择符前有一个 ":"(冒号)
特定位置选择器::first,:last,:eq()
- $("tr:last").css("background-color","red"); --------表格的最后一行变成红色
- $("tr:first").css("background-color","red");
- $("p").eq(0).css(); -----得到第一个<P>标签
指定范围选择器:(多用表格)
- :even, //奇数行
- :odd, //偶数行
- gt(),
- lt()
注意点:指定范围选择器在表格的使用中非常的方便。
< script type= "text/javascript" >
$( function() {
//随着页面自动加载
//$("#p1").css({"color":"red","font-size":"20px"});
//$(".p2").css("color","red");
// $("p[class='p1']").css("color","blue");
//$("div *").css("color", "green");
// $("h2,#div1,.p2,[title='p2']").css("color", "yellow");
// $("tr:first").css("background-color","red");
// $("tr:last").css("background-color","green");
// $("tr").eq(1).css("background-color","blue");
// $("tr:even").css("background-color","blue");
// $("tr:odd").css("background-color","green");
$( "tr:gt(1)").css( "background-color" , "blue" );
$( "tr:lt(1)").css( "background-color" , "red" );
});
</ script>
5、属性和css操作
属性操作: attr();
css样式操作: css("","");css({"":"","":""});
6、获取文本和值?
文本:text();<p>hello</p> $("#p3").text()
值 val() :主要正对于表单元素中的value中的值。
7、事件控制
jQuery中定了bind统一的接口,来为每一个匹配的标签添加事件控制。
案例:点击p标签,让字体变成红色。
1、事件注册
bind
$("p").bind();
2、toggle
可以为click是绑定两个方法
3、hover:可以模仿悬停事件和鼠标移上去和鼠标离开。
8、综合案例。
综合案例1:使用jQuery完成密码是否一致判断。
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
$( function() {
$( "#username").focus( function(){
if($( "#username").val()== "请输入用户名" )
$( this).val( "");
});
$( "#username").blur( function(){
if($( "#username").val()== "")
$( this).val( "请输入用户名" );
});
$( "#pwd").focus( function(){
if($( "#pwd").val()== "请输入密码" )
$( this).val( "");
});
$( "#pwd").blur( function(){
if($( "#pwd").val()== "")
$( this).val( "请输入密码" );
if($( "#pwd").val()==$( "#username").val()){
$( "#s1").text( "用户名可用" ).css("color" ,"green" );
} else{
$( "#s1").text( "用户名不可用" ).css("color" ,"red" );
}
});
});
</ script>
</ head>
< body>
<input id = "username" type= "text" value= "请输入用户名" />< span id = "s1"></ span>
<br >
<input id = "pwd" type= "text" value= "请输入密码" />
</ body>
综合案例2:全选,反选,全部选,选中的值
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
$( function() {
$( "#qx").click( function(){
var chks=$( "input[type='checkbox']" );
for( var i=0; i<chks.length;i++){
chks[i].checked= true;
}
});
$( "#fx").click( function(){
var chks=$( "input[type='checkbox']" );
for( var i=0; i<chks.length;i++){
chks[i].checked=!chks[i].checked;
}
});
$( "#qbx").click( function(){
var chks=$( "input[type='checkbox']" );
for( var i=0; i<chks.length;i++){
chks[i].checked= false;
}
});
$( "#test").click( function(){
$( "input:checkbox[name='chks']:checked" ).each(
function(){
alert($( this).val());
});
});
});
</ script>
</ head>
< body>
<input type = "checkbox" name= "chks" value= "100" />
<input type = "checkbox" name= "chks" value= "200" />
<input type = "checkbox" name= "chks" value= "300" />
<input type = "checkbox" name= "chks" value= "400" />
<input type = "button" id= "qx" value= "全选" >
<input type = "button" id= "fx" value= "反选" >
<input type = "button" id= "qbx" value= "全不选" >
<input type = "button" id= "test" value= "选中的值" />
</ body>
综合案例3:隔行变色
综合案例4:克隆。
< script type= "text/javascript" >
$( function() {
var i=0;
$( "#tab1").click( function(){
/* var b2=$("table").clone();
$("#tab1").append(b2); */ ----------克隆
i++;
$( "#tab1").append( "<p>我是" +i+"</p>" );
});
});
</ script>
< style type= "text/css" >
table {
width: 800px;
border: 1px solid black;
border-collapse: collapse;
}
tr {
height: 25px;
}
td {
border: 1px solid black;
}
</ style>
</ head>
< body>
<input type = "button" id= "b1" value= "" >
<input type = "checkbox" id= "c1" value= "100" checked= "checked" />
<input type = "checkbox" />
<input type = "checkbox" />
<input type = "checkbox" checked= "checked" />
<table id = "">
<tr >
<td ></td >
<td ></td >
<td ></td >
</tr >
<tr >
<td ></td >
<td ></td >
<td ></td >
</tr >
<tr >
<td ></td >
<td ></td >
<td ></td >
</tr >
</table >
< span id= "tab1" >点击我 </span >
</ body>
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用 jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- jquery插件开发基础入门
jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- 新知识:JQuery语法基础与操作
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...
- jQuery之基础核心(demo)
jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
- 第一百六十三节,jQuery,基础核心
jQuery,基础核心 一.代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所 ...
- 第一百六十九节,jQuery,基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
随机推荐
- C++ 可配置的类工厂
项目中常用到工厂模式,工厂模式可以把创建对象的具体细节封装到Create函数中,减少重复代码,增强可读和可维护性.传统的工厂实现如下: class Widget { public: virtual i ...
- NPM (node package manager) 入门 - 基础使用
什么是npm ? npm 是 nodejs 的包管理和分发工具.它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单. 截至 ...
- 关于几个主流语音SDK的接入问题
这两周都在忙着游戏上线还有接入游戏语音,两周分别接了腾讯语音和百度语音!!! 关于腾讯语音的一些问题 由于发现腾讯语音的在录完音频后的数据是编过码的所以出现了一些问题: *不能解码(腾讯方不提供解码算 ...
- iframe用法
<iframe src="http://caiyanli.top/" height="500" width="500" frameb ...
- 以bank account 数据为例,认识elasticsearch query 和 filter
Elasticsearch 查询语言(Query DSL)认识(一) 一.基本认识 查询子句的行为取决于 query context filter context 也就是执行的是查询(query)还是 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面
系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...
- [原]分享一下我和MongoDB与Redis那些事
缘起:来自于我在近期一个项目上遇到的问题,在Segmentfault上发表了提问 知识背景: 对不是很熟悉MongoDB和Redis的同学做一下介绍. 1.MongoDB数组查询:MongoDB自带L ...
- C++内联函数
在C语言中,我们使用宏定义函数这种借助编译器的优化技术来减少程序的执行时间,那么在C++中有没有相同的技术或者更好的实现方法呢?答案是有的,那就是内联函数.内联函数作为编译器优化手段的一种技术,在降低 ...
- ABP创建数据库操作步骤
1 ABP创建数据库操作步骤 1.1 SimpleTaskSystem.Web项目中的Web.config文件修改数据库配置. <add name="Default" pro ...
- Eclipse使用Git教程
A:点击Window--->Show view--->other..--->Git Repositories--->[OK] B:克隆码云上的代码仓库 C:选择对应目录存储你的 ...