jQuery 复习

jQuery 复习

基础知识

1，

window.onload	$(function(){});   $(document).ready(function(){});
只执行函数体重的最后一个方法，事件	依次执行函数体中的所有方法，事件

2，jQuery对象和DOM对象

jQuery对象	DOM对象
$("#food").html();	document.getElementById("food").inerHTML;

3，jQuery对象和DOM对象的相互转换

JQ->DOM	1，[index]  : var $src = $("#id").[0]; 2,  get(index)  :  var cr = $("#id").get(0);
DOM->JQ	1,$() var cr = document.getElementById("cr"); var $cr = $(cr);

4  ,   if($cr.is(":checked"))   单选框或者复选框。Checked，不是selected

选择器：（重点）

1 ，基本选择器

$("#id").css("color", "red");

$(".class").css("color", "red");

$("div").css("color", "red");

$("*").css("color", "red");

$("span #id").css("color", "red");

2层次选择器

$("ancester descendant") $("parent > child") $("prev + next") $("prev ~ sibling")

祖先 子孙 父母 孩子 同胞 兄弟

3 基本过滤选择器

:first   :last   :not(selector)  :even   :odd   :eq(index)   :header

:animated   :focus   :gt(index)    :lt(index)

4 内容过滤选择器

:contains(text)   :empty  :has(selector)  :parent

5 可见性过滤器

:hidden  :visible

6 属性过滤器

[attribute]   [attribute=value]  !=(不等于)  ^=(以..开头)  $=(以..结束)  *=(含有..)

7 表单过滤器

:enabled  :disabled  :checked  :selected

8 表单选择器

:input  :text  :password  :radio :checkbox  :submit  :image  :reset

:file   :hidden

DOM

Jquery中的DOM对象

1   $("#id").attr("attribute", "value");

2  创建元素节点

var $li = $("<li></li>");

$li.appendTo("ul");

3          创建文本节点

var $li = $("<li>你好你好你好</li>");

$li.appendTo("ul");

4          创建属性节点

var $li = $("<li class= "hello" title= "nihao">你好你好你好</li>");

$li.appendTo("ul");

5          查找节点

1  var li = $("ul li:eq(1)");

var $li_text = $li.text();

2   var $para = $("p");

var $a = $para.attr("title");

6          删除节点

1 remove()  2 detach()  3 empty()

7          替换节点

1 replaceWith()  2 replaceAll()

$("#id").replaceWith("里面填写html代码")；

$("里面填写html代码").replaceAll("#id")；

8          包裹节点

1 wrap()  2 wrapAll()   3 wrapInner()

属性操作

1 attr() 获取和设置属性

2 removeAttr() 删除元素属性

获取和设置HTML , 文本， 值

1 html()

2 text()

3 val()

遍历节点

1 children()

2 next()

3 prev()

4 siblings()

5 closet()

CSS-DOM

1 css()

$("p").css("color", "red");

2 offset()

var offset = #("p").offset();

var left = offset.left;

var top = offset.top;

2 position

var position = #("p").position();

var left = position.left;

var top = position.top;

3 scrollTop()  scrollLeft()

var $p = $("p");

var scrollTop = $p.scrollTop();

var scrollLeft = $p.scrollLeft();

jQuery事件和动画

1 执行时机

$(document).ready(function())	$(document).load(function)
DOM就绪时执行	加载完毕后执行

2 事件绑定

bind(type, [data], fn)

on(type, [data], fn)

(判断)  is(":visible")

3 合成事件

jQuery自定义方法   ready()  hover()  toggle()

ready()
hover()	hover(enter, leave);  用法如下 $(function(){ $(this).show(); }, function(){ $(this).hide(); })
toggle()	toggle(fn1, fn2, fn3, fn4...fnN) 切换元素的可见状态：（如下） $("#id").click(function(){ $(this).next().toggle(); })

addClass("class");

事件冒泡  事件捕获

动画 ：

fadeIn() slideUp() animate()

fadeOut() slideDown() animate({left : "+50px"},400)

jQuery表单和表格

1 多行文本框

属性：height   (高度变化)

$comment.height($comment.height()+50);

动画效果如下：

$comment.animate({height: "+50"},400);

scroolTop  (滚动条)

2 复选框

全选 全不选 反选

attr("checked", true/false);

each(function(){this.checked = !this.checked});

3 下拉框

追加：appendTo()

var $options = $("#selected1 option :selected");

$options.appendTo("#selected2")

4 表单验证

失去焦点是验证填写的信息是否正确

$("#form :input").blur(function(){

.....

})

5表格

.even    .odd

添加或者移除类

var hasselected = $(this).hasClass("selected");

$(this)[hasselected? "removeClass" : "addClass"]("selected");

6 根据条件查询出相应的数据

$("table tbody tr").hide();

filter("contains("li")").show();

$(function(){

$("#search").click(function(){

$("table tbody tr").hide();

filter(":contains("+$(this).val()+")").show();

});

});

选项卡功能

jQuery中的ajax

$.ajax()

load()

$.get()  $.post()

$getScript()  $getJson()

load()

有参数传递是的方法：post  无参数传递时：get

jQuery插件：表单验证

性能优化

感觉再复习一遍下来对整个jQuery有熟悉了很多，好多东西是之前不会的，或者很不熟悉的东西都清晰了非常多。多学一点知识，少些一行代码！

L阿丽