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