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阿丽

posted @ 2016-03-21 22:37  liaoali  阅读(182)  评论(0编辑  收藏  举报