1.JQuery
a.定义:jQuery 是一个 JavaScript 库
b.作用:极大地简化了 JavaScript 编程
c.引入:
<script src="jquery.js"></script>
2.文档就绪函数
a.完整写法
$(document).ready(function(){ });
b.简便写法
$(function(){ });
3.jq选择器
$("#userName") //ID选择器 $("p") //标签选择器 $(".pClass") //类选择器 $("[href]") //属性选择器 $("p.intro") //class为introde <p>标签 $("[href $='.jpg' ") //以.jpg结尾的href属性
4.隐藏
a.隐藏
$("#myDiv").hide(2000);
b.显示
$("#myDiv").show(4000,test);
c.隐藏/显示
$("#myDiv").toggle(2000);
5.淡入
a.淡出
$("#myDiv").fadeOut(1000,function(){});
b.淡入
$("#myDiv").fadeIn(2000);
c.淡出/淡入
$("#myDiv").fadeToggle(2000);
6.滑动
a.收起
$("#myDiv").slideUp(5000);
b.展开
$("#myDiv").slideDown(5000);
c.收起/展开
$("#myDiv").slideToggle();
7.动画
a.语法:
$("#myDiv").animate({left:'300px'},2000,function(){ $("#myDiv").animate({top:'200px','font-size':'24px'}); });
b.注意:
在动画中无法改变颜色相关样式
8.样式(css())
a.获取:
$(".myDiv").css("width");
b.修改:
$(".myDiv").css("width","300px") //方法一 $(".myDiv").css({width:"300px", height:"200px"); //方法二
9.事件
a.事件的绑定方式
$("#myA").click(function(){ //方法一 }); $("#btn").bind("click",function(){ //方法二 });
b.解除事件绑定
$("#btn").unbind("mouseover");
10.DOM
a.获取元素值
$("#userName").val()
b.等同于innerHTML
$(this).html(); $(this).html("<span style='color:red'>test</span>");
c.等同于innerTest
$(this).text(); $(this).text("<a>hello</a>");
d.等同于 js中getAttribute("属性名")
$("#userName").attr("errorMsg")
$("#userName").attr("style","background-color:red");
e.添加
$("#myDiv").append("<a href='#'>test1</a>"); //append表示在元素内部的尾部进行添加 //支持html的添加 $("#myDiv").prepend("<a href='#'>test2</a>"); //prepend表示在元素内部的开始位置进行添加 $("#myDiv").after("<a href='#'>test3</a>"); //after示在元素后面添加(外部) $("#myDiv").before("<a href='#'>test4</a>"); //after示在元素前面添加(外部)
f.删除
$("#myDiv").remove(); //全部删除 $("#myDiv").empty(); //删除内部
e.CSS类(对 class 的特殊操作)
$("#myDiv").addClass("divClass"); //添加class $("#myDiv").addClass("divClass"); //删除class $(this).toggleClass("divClass"); //没就加,有就删
11.节点
a.父级/祖先
$("#myTable").parent() //获取父级 $("#myTable").parents() //获取所有祖先 $("#myTable").parentsUntil(".test") //获取所有直到class为test的祖先
b.后代
$("#myTable").children() //获取子元素 $("#myTable").find("td") //获取所有<td>标签子元素
c.同胞
$("#myTable").siblings() //获取所有同胞元素 $("#myTable").prev() //获取前一个同胞元素 $("#myTable").prevAll() //获取前面所有同胞元素 $("#myTable").next() ///获取后一个同胞元素 $("#myTable").nextAll() //获取后面所有同胞元素
d.遍历
$(".fav").each(function(){ alert($(this).val()); }) //不传参 $(".fav").each(function(i){ alert($(".fav")[i].checked); }) //传参i为下标
e.过滤
$(".fav").last().val() //最后一个元素 $(".fav").first().val() //第一个元素 $(".fav").eq(2).val() //下标为2的元素 $(".fav").filter("[type = 'radio']") //筛选指定的元素 $(".fav").not("[type = 'radio']") //排除指定的元素