JQuery入门

JQuery

JQuery：是一种javascript的框架，一种对javascript的封装。
表示文档加载：

$(function(){
});

通过ID获取元素

$("#id")

增加监听器

$("#id").click();

隐藏和显示

$("#id").show();
$("#id").hide();

常见方法

• val() 取值 列如取得标签的value的值。
• html() 获取元素内容，包括子标签
• text() 获取元素内容，不包括子标签，包括子标签的内容

JQuery css：

- addClass() 为标签添加css样式

<script>
$(function(){
 $("#id").addClass("pink");});
 </script>
 
  <style>
 .p{
 background-color:blue;
 }
  </style>`
  
  <div id="id"></div>

- removeClass() 移除标签的css样式

 <script>
 $(function(){
$("#id").removeClass("pink");
});
 </script>
 <style>
 .pink{
 background-color:blue;
}
 </style>
 <div id="id"  class="pink"></div>`

- toggleClass() 切换标签css样式 是指存在删除，不存在添加

<script>
$(function(){
$("#id").toggleClass("pink");
});
</script>
<style>
.pink{
background-color:blue;
}
</style>
<div id="id" class="pink"></div>

css(property,value)或者 css({p1:v1,p2:v2}) 设置标签属性

JQuery 选择器

1. 根据标签 $(“tagName”)
2. 根据id $("#id")
3. 根据类名 $(".className")
4. 层级 $(“selector1 selector2”)
5. $(“selector: first”) $(“selector:last”)
6. 根据标签的奇偶选择 标签从0开始 $(“selector:odd”) $(“selector:even”)
7. 根据属性选择 $(“selector[attribute]”)

$("div[id]").addClass() //具有id属性的div
$("div[id='pink']").addClass()  //属性id=pink
$("div[id!='pink']").addClass()  //id不等于pink的
$("div[id^='p']").addClass()  //id以p开头
$("div[id$='k']").addClass()  //id以k结尾
$("div[id*='k']").addClass()  //id包含k

8. $(this) 触发该事件的组件
9. 表单对象元素：form下会出现的输入元素

:input    input标签开始     还包括textarea  option   select标签
:button   type=button   和  button标签
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮

9. 表单对象属性：

:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用 
:disabled会选择不可用的输入元素 
:checked会选择被选中的单选框和复选框 
:selected会选择被选中的option元素 

筛选器

• first()
• last()
• eq(num)

$("div").first();
$("div").last();
$("div").eq(num);  //num从零开始

• parent()
• parents()

$("p").parent();  //最近父元素
$("p").parents();  //所有父元素

• children()
• find(selector)

$("div").children()  //  第一层子元素
$("div").find(selector)  //根据selector筛选子元素

• siblings() 筛选同级元素

属性

• attr（属性） 获取值
• attr(属性,值) 修改
• removeAttr(属性) 删除
• prop与attr 区别 prop不能获得自定义属性 attr只能获得选中属性的初始值

CRUD操作 节点的操作

1. append():父元素将子元素追加到末尾
2. 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
3. prepend():父元素将子元素追加到开头
4. 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
5. before():添加元素到元素前边
6. 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. 对象.remove():将对象删除掉
8. 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

效果

• 隐藏 hide() 切换 toggle() 显示show() 里面可以加毫秒参数
• 向下滑动 slideUp() 向下滑动 slideDown() 滑动切换 slideToggle()
• 淡入fadeIn(); 淡出fadeOut() 淡切换fadeToggle() 淡出程度设置fadeTo(“slow”,0.2) 参数0-1
• 自定义动画效果 animate(css样式,milliseconds) 动画演示完变回
• 回调函数callback 作为animate() 的第三个参数

<script>
$(function(){
var div=$("#d1");
div.animate({right:'200px',height:'500px'},1000,function(){
alert("演示完毕");
});
});
</script>
<div id="d1">移动</div>

事件

• $(document).ready(); $(); 里面可以加函数显示加载完成的内容
• 图片加载完成显示 load()里面加函数

 -  $(function(){
 - $("#img").load()
 - });

• click() dblclick() 单击 双击

 $(function(){
 $("#b").click(function(){
          $("#message").html("单击按钮");
      });
 $("#b").dblclick(function(){
 	$("#mssage").html("双击按钮");
 });
      });

• 绑定事件 on.(event,function)

 - $(function(){
 - $("#b").on("onclick",function(){}) ;
 - });

• 触发事件 $("#b1").trigger(event);

• 提交事件 submit(function(){});

• 改变事件 change(function); 要改变文本后失去焦点才会触发

• 焦点事件 获得焦点 focus(function) 失去焦点 blur(function)

• 键盘
  keydown表示按下键盘 keypress表示按住键盘 keyup表示键盘弹起
  先后顺序：
  按照 keydown keypress keyup 顺序发生
  键盘按钮值：
  通过event对象的which属性获取键盘的值
  keydown和keyup 能获取所有按键，不能识别大小写
  keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
  文本取值：
  keydown和keypress：不能获取最后一个字符
  keyup： 获取所有字符

• 鼠标事件
  mousedown 表示鼠标按下
  mouseup表示鼠标弹起

  mousemove表示鼠标进入
  mouseenter表示鼠标进入
  mouseover表示鼠标进入

  mouseleave表示鼠标离开
  mouseout表示鼠标离开

JQuery Ajax

提交AJAX请求

<div id="checkResult"></div>
<input type="text" id="name">

$(function(){
$("#name").keyup(function{
var page="check.jsp";
var value=$("#this").val();
$.ajax({
url:page;
data:{"name":value};
success:function(result){
	$("#checkResult").html(result);
}
});
});
});

使用get方式提交ajax

$.get(
page,
{"name",value},
function(result){}
);

使用post方式提交ajax

$.post(
page,
{"name",value},
function(result){}
);

格式化form下的数据 serialize();

var data=$("form").serialize();
data = decodeURIComponent(data,true); //可以解码
var url="checkName.jsp"
var link=data+"?"+url;

数组操作

$.each 遍历数组

$.each(array,function(i,element){
});

$.unique() 去掉重复元素 用之前数组要调用sort()函数
$.inArray(num,a) 返回元素在数组中的位置 不存在返回-1

字符串操作

$.trim() 去除首尾空白

document.write($.trim("  hello  JQuery()  "));

JQuery JSON

$.parseJSON() 将JSON字符串转化为JSON对象 parse:解析

var s1 = "{\"name\":\"盖伦\",\"hp\":616}";
	 var hero=$.parseJSON(s1);

JQuery 对象转化

  var div= $("#d");  //JQuery
      var d = div[0]; //DOM对象
var div= document.getElementById("d"); //DOM对象
      var d = $(div);  //JQuery对象