1,选择器:
基本选择器:
$("p"), $("#btn"), $(".class"), $(this), $("p.class")
层次选择器:
$("div>span")div中的所有span, $("div~span")div后的所有 span元素 $("div+span")div后的第一个span元素
*基本过滤选择器:""
$("div:first"), $("div:last"), $("div:not()"), $("div:gt(2)"), $("div:eq(2)"), $("div:lt(2)"), $("div:even"), $("div:odd"), $("div:animate"), $(":header"), $(":focus")
**内容过滤选择器:
$("div:contains(‘我’)"),$("div:has(p)"), $("div:empty")不包含子元素的div, $("div:parent")拥有子元素的div
**可见性过滤选择器:
$("div:hidden"), $("div:visible");
**属性过滤选择器:
$("div[id]"), $("div[id=test]")
**子元素过滤选择器:
$("ul li:first-child"), $("ul li:last-child"), $("ul li:only-child");
**表单对象选择器:
$("input:checked"), $("select options:selected"), $("#form:disabled"), $("#form:enabled");
**表单选择器:
$(":input"), $(":text"), $(":submit"), $(":button"), $(":checkbox"), $(":radio"), $(":image"), $(":file"), $(":reset"), $(":password");
**可以混合选择器:
$("ul>li:gt(7):not(:last)") 表示ul的子元素li下,大于7,且不包含最后一个li的所有集合
2,事件:
$("#btn").click() dblclick() mouseenter() mouseleave() mousedown() mouseup() hover() focus() blur()失焦
3,函数:
**显示/隐藏
$("ul li:first-child").hover(function(){ $("p").hide() show() toggle() })
**淡入淡出
$(":button").mousedown(funciton(){ $("[href]").fadeIn() fadeOut() fadeTaggle() fadeTo()颜色变淡 })
fadeIn(slow, opacity, function);
**滑进滑出
$("a[target="_blank"]").mouseenter(function(){
$("tr:even").slideDown() slideUp() slideToggle();});
**动画:
$("button").dblclick(function(){
$("div").animate({left:100px;});} ) 需要给div设置position
让动画停止:
$("#btn").click(function(){
$("div").stop();})
4,jquery的链式操作:
$("button").css("color","red").slideUp(1000).slideDown(3000);
其原理是每次执行完毕一个操作,函数返回this指针:
function S(){ }
S.prototype={
fn:function(){
console.log(1);
return this;},
fn1:function(){
console.log(2);
return this;}}
var n=new S();
n.fn().fn1(); // 1 2
5,获取内容:
$(".div1").html() 获取带标签的内容
$(".div1").text() 获取不带标签的内容 button
$(".input").val() 获取input表单中的输入值;
6,获取,设置元素的属性:
$(".div1").attr("class"); $(".div1").attr("class","div2")
7,回调函数:允许添加的函数
hide(300, function(){ }) , attr("href", function(){} )
8,添加文本内容:
前增(还在这个文本内部):$(".btn").click(funciton(){ $(".div1").prepend("<p>这是一段文字</p>")})
后增(还在这个文本内部):append()
前增(不在文本中):before()
后增(不在文本中):after()
9,删除元素:
删除这个元素:$("div").remove();
删除这个元素中的容: $("div").empty();
过滤掉某个元素: $("div").remove(".div1"); //class name 为div1的div不被删除
10,操作class name:
添加class name: $("div").addClass("div1 div2");
删除class name: $("div ").removeClass("div1");
切换class name: $("div").toggleClass("div3");
11,操作css:
$(".btn").css({"color":"red","width":"100px"});
12,获取元素宽度,长度:
$(".div").width() innerWidth() 包括内边距 outerWidth()包括内边距和外边框
13,遍历:
**向上遍历:
一个祖先:$("span").parent();
所有的祖先:$("span").parents();
一定范围内的祖先:$("span").parentsUntil("div");
**向下遍历:
直系儿子:$("div").child();
直系中的某个儿子:$("div").child("p.1");
寻找后代中某些:$("div").find("span");
返回所有后代:$("div").find("*");
-------------emmmm,遍历同胞。。。。。--------------
同级别所有同胞:$("div").siblings().css("color":"red");
同级别下一个同胞:next();
同级别自己以下所有同胞:nextAll();
prev() prevAll() prevUntil()
***closest(): 选择离自己最近的祖先,如果是自己,就选定自己;
14,过滤:
选中的第一个:$("div p").first()
选中的最后一个:$("div p").first();
选中特定序号:$("div").eq(2) 选中第三个div
选中有这个特征的元素:$("div").filter(".classname")
选中没有这个特征的元素:$("div").not(".classname");
15,jquery的ajax异步请求:
必须部署在http服务器中,可以使用xampp,放在hotdocs中运行;
load(url):
$("div").load("tt.txt");
get(url, callback):
$.get("test.php", function(data, status){alert(data+status);})
post(url, data, callback):
$.post("tt.php",{name:"bob",age:12},function(data,status){alert(data+status);});
----------------------------------------------------------------------------------------------------------
歇一会儿。。。。。
---------------------------------------------------------------------------------------------------------
1,dom和jquery对象之间的转换:
**jquery转换成dom:
var $div=$("div");
var div=$div[0];获取到第一个div
或者:var div=$div.get(0);
**dom转换成jquery:
var div1=document.getElementById("div");
var $div=$(div1);
2,jQuer在其他库之后导入:
可以使用jQuery.noConflict()把$控制权交给其他库,用jquery代替$
或者自定义:var $j=jQuery.noConflict();
又或者:jQuery.noConflict()
jQuery( function($){ 又可以随意使用$了 } )
3, 注意:
不能使用这种方式判断是否有这个对象:
if($("#btn"){ };
4,使用转义字符处理特殊字符:. # ( [
某id=bt#n
$("#bt#n")是错误的,应该这样$("#bt\\#n")写;
选择器中不要出现空格;
5 ,可以用来判断是否存在:
if($("li:eq(3)").is(":visible")) { }如果第三个li可见则。
6,获取节点属性:
var m=$("a").attr("href");
7,利用工厂函数 $( )添加节点:
var m=$( "<li >hello</li>" );
$("ul").prevpend(m); 在ul前添加一个li
8,插入节点:
$("A").append(B) 将B插入到A内部
$("A").appendTo(B); 将A插入到B内部
$("A").prepend(B);
$("A").prependTo(B);
9,设置属性:
$("#btn").attr("class","high");
10,:
addClass():增加
removeClass():移除属性,可以以空格的方式同时移除两个class;
toggleClass():使得类名存在就删除,不存在就添加;
hasClass():判断是否有这个class:;有就返回true,没有就返回false;等价于is(); is(":visible")是否可见;
11,html()带标签,text()不带标签,val()是input;
12,用css设置多个样式的方法:
css("width","100px");仅仅设置一个属性;
css( { width:'100px', height:"200px", "background-color":"red" })
注意:1,要在()中加{ } 2,如果属性中有 连字符‘ - ’一定要把属性加引号,如果不想加引号可以把属性用驼峰法写;没有连字符不加“ ‘也可以;3,设置多个属性的时候要用冒号:隔开。设置单个属性的时候用,隔开
13,获取元素的高度,宽度:
height()获取的是元素的实际高度,和css设置无关;
css("height");获取的是css设置的高度,可能是auto;
设置高度:height("10em"), height(100);
$("#btn").offet()返回相对窗口的偏移量对象,$("#btn").offet().left/ top获取偏移量;
scrollTop(), scrollLeft()
14,加载事件:
$(document).ready(function(){ } );在DOM完成之后就开始执行,但是与dom树相关联的关联文件可能还没有加载完毕。后面的$(document).ready会追加,不会覆盖前一个;简写方式:$(function(){ }) 或者:$().ready(function(){ } ).
$(window).onload(function(){ });在DOM和关联文件都加载完毕才执行。关联文件可能是图片等。后面的window.onload会覆盖前一个。
15,事件绑定:
bind("click",function(){ }); 和 click(function() { }) 一样;
可以链式绑定bind: $(".btn").bind("mouseover", fn1). bind("mouseout", fn2);
16,合成事件:
hover(fn1,fn2)鼠标入,触发fn1事件,鼠标移出,触发fn2事件;替代mouseenter和mouseleave;
17,防止事件冒泡:
.click(function(event){ alert(); event.stopProPagation(); } )
不能阻止事件捕获,必须用js;
阻止默认事件:
$("submit").click(function(event){ 验证表单:if(name==" "){ event.preventDefault; 阻止表单默认提交事件; } })
18,事件对象的属性
事件类型event.type :
$("submit").click(function(event) { return event.type ; }) 返回click;
被触发对象名event.target:
$("submit").click(function(event){ return event.target })返回input;
光标距离页面:event.pageX/Y
获取鼠标1左2中3右,键盘键值: event.which;
获取alt键:event.metaKey;
19,移除绑定事件:
$(".btn").click(function(){
$(".div1").unbind("mouseover"); 移除.div1上所有的mouseover;
})
如果.div1的mouseover有多个函数,则必须为这些匿名函数取名字,作为参数传进unbind("mouseover", name1);
20,仅执行一次的事件绑定函数one():
$(".btn").one("click", function(){ }) 仅第一次点击有效;
21,tigger();
22,使用bind绑定多个事件:
.bind("mouseover mouseout", function(){
$(".btn").toggleClass("color"); })
使用toggleClass()时候,需要把对应的class中的属性值后加!important;
.color{
background-color: red!important;
}才会有效;
23,利用命名空间快速删除多个绑定事件:
.bind("click",fn0);
.bind("click.plugin",fn1);
.bind("mouseover.plugin",fn2);
.bind("dblclick" ,fn3);保留
.unbind(".plugin");删除所有命名空间为plugin的事件;
理论上:.click(function() { $("/.div1").tigger("click !") })代表只触发不包括命名空间的事件函数,但是不起作用。