JQuery 基础

yangeoo
浏览: 129754 次
性别:
来自: 杭州
最近访客更多访客>>

wangyy
zgdkik
C_P_HU
eric_weitm
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
JAVA 学习
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>


一、Jquery语法结构
$(selector).action();
包含三个部分,$() 工厂函数，selector为选择器，action为执行方法。
工厂函数，$(）是Jquery()的缩写，作用是将DOM对象转化成jquery对象。jquery对象只能使用jquery中的方法，不能在使用DOM对象方法。比如
getElementById()等。

选择器
$("#userName")//获取DOM中id为userName的元素
$("div")//获取DOM中所有div的元素
$(".textbox")//获取DOM中class为textbox的元素。

方法
click()、mouseover()、mouseout()、addClass()
css("属性","属性值")
css方法是为元素设置给定的css样式，addClass是为元素添加新样式。


二、DOM对象与Jquery对象的互换

建议jquery变量前缀为$
juqery对象转化成DOM对象(不常见)。jquery对象是一个类似数组的对象，通过[index]或get(index)可以获取DOM对象。

var $txtName = $("txtName");
var txtName = $txtName[0];
或者
var txtName = $txtName.get(0);

DOM对象转换成jquery对象
var txtName = document.getElementById("txtName");
var $txtName = $(txtName);

三、
--页面加载完成后，执行事件
$(document).ready(function(){
  //执行代码
});
类似于
window.onload=function(){
  //执行代码
};

两者区别:
jquery在所有DOM文档结构绘制完毕后即开始执行，可能与DOM元素无关联的内容(图片，视频，FLASH等)并没有加载完成。
同一个页面可以编写多个$(document).ready(function(){});
window.onload必须等待所有内容加载完毕后才执行，包括图片、视频等。此函数同一页面只有编写一个，不能编写多个。

四、基本选择器
标签选择器 $("input") 选取所有input元素
类选择器   $(.title) 选取所有class为title的元素
ID选择器   $("#title")  选取ID为title的元素
并集选择器 以逗号分隔 $("div,p,.title")选取所有div,p,及拥有class为title的元素.
交集选择器 elment.class或elment#id, 比如$(h2.title)选择所有class为title的h2元素。
全局选择器 *

五、层次选择器
后代选择器 $("#menu span") 选择#menu 下所有的span元素
子选择器 parent>child  示例 $("#menu>span") 选择#menu内的子元素span(被#menu标签阔起来的)
相邻元素选择器 prev+next 示例 $("h2+dl") 选择紧邻h2元素之后的同辈元素dl(h2标签之后相邻)
同辈元素选择器 prev~sibings, 示例 $("h2~dl") 选取h2元素之后所有的同辈元素dl(h2标签之后的同辈dl)

六、属性选择器
[attribute] 示例$("[href]") 选取含有href属性的元素
[attribute=value] 示例$("[href='#']") 选取含有href属性值等于#的元素
[attribute!=value] 示例$("[href!='#']") 选取含有href属性值不等于#的元素
[attribute^=value] 示例$("[href^='en']") 选取含有href属性值以en开头的元素
[attribute$=value] 示例$("[href$='.jpg']") 选取含有href属性值以.jpg结尾的元素
[attribute*=value] 示例$("[href*='txt']") 选取含有href属性值含txt的元素
[attribute*=value] 示例$("[href*='txt']") 选取含有href属性值含txt的元素

同时支持多个复合属性 $("li[id][title='新闻要点']") 选取含有id属性且title属性为新闻要点的<li>元素

七、条件过滤选择器
:first 选择第一个元素, 示例 $("li:first") 选取所有li元素中第一个li元素
:last 选择最后一个元素, 示例 $("li:last") 选取所有li元素中最后一个li元素
:not(selector) 选取去除所有与给定选择器匹配的元素, 示例 $("li:not(.three)") 选取所有li元素中class不是.three的元素
:even 选择偶数元素(index从0开始), 示例 $("li:even") 选取所有li元素中偶数li元素
:odd 选择奇数元素(index从0开始), 示例 $("li:odd") 选取所有li元素中奇数li元素
:eq(index) 选择元素索引等于index的元素, 示例 $("li:eq(1)") 选取所有li元素中索引等于1的元素
:gt(index) 选择索引大于index的元素(index从0开始), 示例 $("li:gt(1)") 选取所有li元素中索引大于1的元素，但不包含1
:lt(index) 选择索引小于index的元素(index从0开始), 示例 $("li:lt(1)") 选取所有li元素中索引小于1的元素，但不包括1.

:header 获取所有标题元素，如h1-h6.示例$(":header")选取网页中所有标题元素
:focus 获取当前获取焦点的元素，.示例$(":focus")选取当前获取焦点的元素

:visible 获取所有可见元素, 示例 $("p:visible").hidden()获取p标签中可见的标签
:hidden 选取所有隐藏元素,示例 $("p:hidden").hide()获取p标签中被隐藏的标签
show()和hide()都是jQuery中的方法，show方法是将隐藏的元素进行显示，hide是将显示的元素进行隐藏。
请注意，:hidden不仅获取包括display=none的元素，还包括<input type="hidden">和visibility:hidden的元素。

八、选择器注意事项。
1.选择器中含有特殊字符
 <div id="id#a">aa</div>
 <div id="id[2]">cc</div>

 按照普通的方式无法获取，只能采用\\转换
 $("#id\\#a")
 $("#id\\[2\\]")

2. 选择器中含有空格的注意事项。
<div class="test">
  <div style="display:none;">aa<div>
  <div style="display:none;">bb<div>
  <div style="display:none;">cc<div>
  <div class="test" style="display:none;">dd<div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>

$(".test :hidden") 选取的aa,bb,cc,dd。因为是class为test的元素，后代中隐藏的元素。
$(".test:hidden") 选取的dd,ee,ff。因为是class为test的元素，且为隐藏的元素。

9、jquery中的事件与动画

javaScript中的事件处理：
DOM 对象. 事件名=函数;

jquery 
9.1 window事件 
ready(),示例 $(document).ready(function(){})
9.2 鼠标事件
click(): 单击鼠标
示例 $("input[name="btn"]").click(
	 function()
	{alert("the button is clicked")}
    );
mouseover():鼠标指针移过时
mouseout():鼠标指针移除时
$(document).ready(
 $("#nav li").mouseover(function(){ //当鼠标移过id为nav,后代中为li的元素
   $(this).addClass("heightlight");
  });
  $("#nav li").mouseout(function(){
   $(this).removeClass();
  })
)

9.3 键盘事件
keydown():按下按键时
keyup(): 按键被释放时
keypress():产生打印的字符时,在keyup事件之前可产生多个keypress事件。
$(document).ready({
 $("[type=password]").keyup(function(){
   $("#events").append("keyup");
 }).keydown(function(){
   $("#events").append("keydown");
 }).keypress(function(){
   $("#events").append("keypress");
 });
 $(document).keydown(function(event)){  //表示键盘事件作用于HTML DOM中的任意对象.
   if(event.keyCode=="13"){             //获取当前按键的键值(keyCode)，识别按下了哪个键。需注意方法中药定义一个参数,表示当前的事件对象
     alert("确认要提交么?");
   }
 });
});

9.4 表单事件
focus(): 获得焦点
blur(): 失去焦点
示例
$(document).ready(
  $("[name=member]").focus(function(){
    $(this).addClass("input_focus");
  })
  $("[name=member]").blur(function(){
    $(this).removeClass("input_focus");
  })
});

9.5 复合事件
hover(enter,leave): 当鼠标移动到元素上，出发enter函数，当鼠标移除这个事件时，会触发leave函数。
$(document).ready(function(){
  $("#myaccound").hover(function(){
    $("#menu_1").css("display","block");
  }),function(){
    $("#menu_1").css("display","none");
  }
});
toggle(fn1,fn2,...,fnN): 此方法用于模拟鼠标连续click事件。如果参数为空，则模拟show(),hide()事件
$(document).ready(function(){
  $("#body").toggle(function(){
    $(this).css("backgroundColor","red");  //表示当前对象
  },
  function(){
    $(this).css("backgroundColor","green");  //表示当前对象
  },
  function(){
    $(this).css("backgroundColor","blue");  //表示当前对象
  } )
});

$(document).ready(function(){
 $("input[name=more_btn]").click(function(){
   $("li:gt(5):not(:last)").toggle();  //代替show()方法和hide()方法
 })
})

9.6 动画事件
$(selector).show([speed],[callback])  显示
$(selector).hide([speed],[callback])  隐藏
$(selector).fadeIn([speed],[callback]) 淡入
$(selector).fadeout([speed],[callback]) 淡出
$(selector).slideUp([speed],[callback]) 元素从下到上直至隐藏
$(selector).slideDown([speed],[callback]) 元素从上往下延伸显示
speed: 规定元素从隐藏到完全可现的速度，默认为"0"，选项包括毫秒(1000)，slow，normal，fast.
callback: s函数执行完成后, 要执行的函数

$(document).ready(function(){
  $("#del").click(function(){
    $(".tipsbox").show("slow");
  });
  $("input[name=cancel]").click(function(){
    $(".tipsbox").hide("fast");
  });
})

10、使用jquery操作DOM

10.1 样式操作
css(name,value) 设置单个属性
css({name:value,name:value,name:value}) 同时设置多个属性
addClass(class1 class2 class3) 增加类样式 各类样式之间以空格隔开
removeClass(class1 class2 class3) 移除类样式各类样式之间以空格隔开
toggleClass(class) 模拟了addClass()与removeClass()实现样式切换
$(document).ready(function(){
  $("dl").mouseover(function(){
    $(this).css("border","0px")
  });
  $("dl").mouseout(function(){
    $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"})
  });
})

10.2 内容操作
html([content])  等同于javaScript中的innerHTML，用于设置匹配元素的HTML内容或文本内容
text([content]) 用于设置所有匹配元素的文本内容
val([content]) 当参数为空时，返回第一个被选元素的value值。或者设置匹配元素的value值
$(document).ready(function(){
  var html_txt = $("div.left").html; //获取div标签中，class为left的标签
  $("input[type=button]").click(function(){
    $(div.left).html("div class='content'><h2>良好习惯从今天开始养成!</h2></div>")
  })
});

$(document).ready(function(){
  $("#searchtxt").focus(function(){  //当搜索框获得鼠标焦点
    var txt_value = $(this).val();
    if(txt_value =="空调"){
     $(this).val("")；		     //如果符合条件,则清空文本框内容
    }
  })
  $("#searchtxt").blur(function(){  //当搜索框获得鼠标焦点
    var txt_value = $(this).val();
    if(txt_value ==""){
     $(this).val("空调")；	     //如果符合条件,则清空文本框内容
    }
  })
});

  
11、jquery创建HTML元素


11.1 $(html)创建元素:

var $newNode = $("<li></li>"); //创建空的<li>元素节点
var $newNode1 = $("<li>死神</li>"); //创建含文本的<li>元素节点
var $newNode2 = $("<li title='标题为千与千寻'>千与千寻</li>"); //创建包含文本与属性的。属性以单引号包括

11.2 将元素插入

内部插入
向所选择的元素结尾插入内容:
$(A).append($B); 表示将B追加到A中。 $("ul").append($newNode1); 
$(A).appendTo($B); 表示将A追加到B中。 $newNode1.appendTo$("ul"); 

向所选择的元素开头插入内容:
$(A).prepend($B); 表示将B追加到A中。 $("ul").prepend($newNode1); 
$(A).prependTo($B); 表示将A追加到B中。 $newNode1.prependTo$("ul"); 

外部插入：
after : $(A).after(B);将B插入到A之后。
insertafter: $(A).insertAfer(B), 表示将A插入到B之后。
before: $(A).before(B),将B插入A之前.
insertBefore: $(A).insertBefore($B),将A插入到B之前。

11.3 删除节点：

$(selector).remove([expr]),expr为可选项，为筛选元素的jQuery表达式。
$(ul li:eq(1)).remove();

11.4 清空节点
$(selector).empty()
与remove的不同点，remove是删除整个节点，empty仅仅是删除了节点中的内容。

11.5 替换节点
$(selector).replaceWith($newNode1);
$($newNode1).replaceAll($(selector));
替换某个节点，两个语句的功能一样，只是写法不同。

11.6 克隆节点
$(selector).clone([includeEvents]);
参数includeEvents为可选值，为布尔ture或false。规定是否赋值元素的所有事件处理。
例如
$("ul li:eq(1)").clone(true).appendTo("ul");

11.7 属性的操作:
$(selector).attr([name]); //设置及获取某个属性值
$(selector).attr({[name1,value1],[name2,value2],[nameN,valueN]}); //设置属性值

11.8 //获取和设置单个属性的值
$($newNode4).attr("alt");
$("img").attr({width:"50",height:"100"});

11.9 删除属性
$(selector).removeAttr(name);
$($newNode2).removeAttr("title");

12.元素遍历
遍历子元素
$(selector).children();
遍历父元素
$(selector).parent();

同辈元素
获取紧邻之后的元素
$(selector).next();
获取紧邻之前的元素
$(selector).prev();
获取匹配元素前后的同辈元素
$(selector).siblings()

13. CSS-DOM操作
$(selector).css();
$(selector).height();
$(selector).width();

14.表单验证
表单有个onsubmit事件，提交表单时触发此事件，事件将根据返回结果决定是否提交表单到服务器.
$("myform").submit(function(){
  return check();
})
onblur: 失去焦点，当光标离开某个文本框时触发
onfocus：获得焦点，当光标进入某个文本框时触发
blur:从文本域中移开焦点
focus：在文本域中设置焦点，即获得鼠标光标
select：选取文本域中的内容，突出显示输入区域的内容.
示例
$(function(){
  $("$email").focus(clearText); //当点击文本框时，触发clearText方法.
  $("$email").blur(checkEmail);//当鼠标指针离开时, 触发checkEmail方法. 
  $("myform").submit(function(){
  return check();
  });
});

15.正则表达式

1)普通方式
var reg = /表达式/附加参数(也可以不加参数)
附加参数：
g:代表可以进行全局匹配(若未设置,则只会匹配第一个,设置后匹配全局)
i:代表不区分大小写匹配
m:代表进行多行匹配

RegExp对象的属性
global: RegExp对象是否具有标志g
ignoreCase: RegExp对象是否具有标志i
multiline: RegExp对象是否具有标志m

2)构造方式
var reg = new RegExp("表达式","附加参数");
两者区别，普通方式必须是一个常量字符串，而构造函数中可以是变量
正则表达式方法
exec：检索字符中是正则表达式的匹配，返回找到的值，并确定其位置
test：检索字符串中指定的值，返回true或false

语法：正则表达式对象实例.test(字符串);
示例
var Str = "my cat";
var reg = /cat/
var result = reg.test(str);
js除了支持RegExp对象的正则表达式方法外，还支持String对象的正则表达式方法.
字符串对象.match(RegExp对象或字符串) 找到一个或多个正则表达式的匹配的值,并返回.
字符串对象.search() 检索与正则表达式相匹配的值
字符串对象.replace(RegExp对象或字符串,"替换的字符串") : 替换与正则表达式匹配的字符串
字符串对象.split(RegExp对象或字符串,n)：将字符串分割为字符串组(n为限制输出数组个数)
正则表达式常用符合：
/.../ 代表一个模式的开始和结束
∧  代表字符串的开始
$  匹配字符串的结束
\s  任何空白字符串
\S  任何非空白字符串
\d  匹配一个数字字符,等于[0-9]
\D  除了数字之外的任何字符,
\w  匹配一个数字,字母,下划线
\W  任何非单字字符
.  除了换行符之外的任何字符
{n}  匹配前一项N次
{n,}  匹配前一项N次, 或者多次
{n,m}  匹配前一项至少N次, 但是不能超过M次
*  匹配前一项0次或多次, 等价于{0,}
+  匹配前一项1次或多次, 等价于{1,}
?  匹配前一项0次或1次, 等价于{0,1}
转义字符,使用反斜杠\来进行字符转义.
表单选择器：
:input: 匹配所有input,textarea,select和button  $(#myform :input)
:text:   匹配单行文本
:password 
:radio
:checkbox 
:submit
:image
:file
:button: 
表单过滤器
:enabled  $(#userform :enabled) 匹配form内部可用元素
:disabled :
:checked : $(#userform :checked) 匹配form中选中元素(单选,复选,select)
:selected ： (匹配选中的option)
分享到：
Html 基础 | Ibatis 框架基础
2015-05-03 21:25
浏览 649
评论(0)
分类:Web前端
查看更多
发表评论

您还没有登录,请您登录后再发表评论
最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery 基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery 基础

评论

发表评论

相关推荐

Flowable 入门简介

Java 8 新特性

Redis 入门

MAVEN知识整理

enum使用方法

JAVA 泛型总结篇(转载)

Java中的Atomic包使用指南

Java 队列Queue

Java 死锁

DOM4J读取XML文件

Java 设计模式

SPRING 事务控制

JS 学习总结

js逻辑与、或、非运算规则

Java 反射

Java Annotation注解

Java 并发常用工具类

JavaScript prototype(原型)

Java 线程池

JS 面向对象与闭包

最近访客更多访客>>
