<参考文档>
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.元素样式操作 ...
随机推荐
- react-router 组件式配置与对象式配置小区别
1. react-router 对象式配置 和 组件式配置 组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...
- 【流量劫持】躲避 HSTS 的 HTTPS 劫持
前言 HSTS 的出现,对 HTTPS 劫持带来莫大的挑战. 不过,HSTS 也不是万能的,它只能解决 SSLStrip 这类劫持方式.但仔细想想,SSLStrip 这种算劫持吗? 劫持 vs 钓鱼 ...
- 谈谈如何使用Netty开发实现高性能的RPC服务器
RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络,从远程计算机程序上请求服务,而不必了解底层网络技术的协议.说的再直白一点,就是客户端在不必知道 ...
- ABP文档 - 目录
ABP框架 概览 介绍 多层结构 模块系统 启动配置 多租户 集成OWIN 共同结构 依赖注入 会话 缓存 日志 设置管理 时间 领域层 实体 值对象(新) 仓储 领域服务 工作单元 领域事件(Eve ...
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- 算法与数据结构(十三) 冒泡排序、插入排序、希尔排序、选择排序(Swift3.0版)
本篇博客中的代码实现依然采用Swift3.0来实现.在前几篇博客连续的介绍了关于查找的相关内容, 大约包括线性数据结构的顺序查找.折半查找.插值查找.Fibonacci查找,还包括数结构的二叉排序树以 ...
- ASP.NET Core project.json imports 是什么意思?
示例代码: "frameworks": { "netcoreapp1.0.0": { "imports" : "portable- ...
- AndroidStudio — Error:Failed to resolve: junit:junit:4.12错误解决
原博客:http://blog.csdn.net/u013443865/article/details/50243193 最近使用AndroidStudio出现以下问题: 解决:打开app下的buil ...
- git命令行操作
从本地上传代码到仓库(假设已经建好仓库): 1.初始化: git init 2.将所有文件加入缓存区: git add * 3.提交当前工作空间的修改内容: git commit -m 'commit ...
- 基于SOA架构的TDD测试驱动开发模式
以需求用例为基,Case&Coding两条线并行,服务(M)&消费(VC)分离,单元.接口.功能.集成四层质量管理,自动化集成.测试.交付全程支持. 3个大阶段(需求分析阶段.研发准备 ...