Jquery基础

层级选择器

$(“div span”) 匹配所有后代元素
$(“div>span”) 匹配所有直接子元素
$(“prev+next”) 匹配所有紧接在prev元素后的next元素
$(“prev ~ siblings”) 匹配所有prev元素的所有同辈siblings元素

选择器对象相关方法

. $(“选择器”).each(function(index){this})选择器对象的遍历

$(this)代表当前循环到的对象

2. $(“选择器”).find() 在前面选择器匹配到的元素的子元素

$(".box ul").find("p").css("background","red")

3. $(“选择器”).not() 在前面选择器匹配到的元素中除去某个或某多个

$(".box ul li").not(".cul").css("border","greed")

4. $(“选择器”).add() 在前面选择器中再追加节点选择

子元素选择器

:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:first-of-type 选择所有相同的元素名称的第一个兄弟元素
:last-of-type 选择所有相同的元素名称的最后一个兄弟元素
:nth-child 匹配其父元素下的第N个子或奇偶元素
:nth-last-child() 选择所有他们父元素的第n个子元素。从1开始，计数从最后一个到第一个
:nth-last-of-type 选择的所有他们的父级元素的第n个子元素，计数从最后一个到第一个
:nth-of-type 选择同一个父元素之下，并且标签名相同的子元素
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配到
:only-of-type 选择所有没有兄弟元素，且具备相同的元素名称的元素

表单

:input 匹配所有input标签
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有隐藏域

表单对象属性

:enabled 匹配所有可用元素
:disabled 匹配所有禁用元素
:checked 匹配所有选中的被选中元素（复选框，单选框等，不包括select中的option）
:selected 匹配所有选中的option元素（select元素用）

var res = $(":checked").val();//得到被选中的值

DOM操作

基础

DOM  document(文档) object(对象) model(模型)
获取元素的方式：
    document.getElementById()
        1.根据ID获取元素
        2.返回一个元素
        3.对ID区分大小写(IE8和IE8以上)
    document.getElementsByClassName()
        1.根据class名获取元素
        2.返回是一个伪数组
        3.IE8和IE8以下不支持
    document.getElementsByTagName()
        1.根据标签名获取元素
        2.返回一个伪数组
        3.兼容很好
    document.getElementsByName()
        1.根据name名获取，一般应用于表单
        2.返回伪数组
        3.只针对对name属性有效的标签生效。

伪数组
    1.必须是对象
    2.必须有length属性
    3.存放内容必须以索引+内容
    4.有数组的一些基本特性，但是不能使用数组的方法。

获取元素属性

    ele.setAttribute("属性名","属性值")
    ele.getAttribute("属性名")
    ele.removeAttribute("属性名")
    ele.dataset.prop="值"
    dom.style.prop
        1.可读写行间样式
        2.写入的值必须是字符串格式
    window.getComputeStyle(ele,null)
        1.null的地方可以存放伪类
        2.返回的都是绝对值
        3.是只读的，不可修改
    ele.currentStyle
        1.是只读的，不可修改
        2.返回的是经过转换的绝对值
        3.IE独有的属性
    ele.id   ele.title
    获取样式：ele.style.prop--效率低，维护不方便   ele.className---维护方便

获取元素的内容    
    innerHTML:
        在赋值的时候：标签会被解析成标签，页面中不会输出，
        在提取内容时：标签会一并被提取
    innerText:
        在赋值的时候：标签会被解析成文本，在页面中输出，
        在提取内容时：标签不会并被提取，只提取文本内容
    value:
        使用于表单

offset系列属性
    滚动条滚动的距离：
        window.pageYOffset(ie9以下不支持)
        document.body.scrollTop
        document.documentElement.scrollTop;
    可视窗口尺寸：
        window.innerWidth(IE8以下不兼容)
        document.documentElement.clientWidth
        document.body.clientWidth(怪异模式)
        判断怪异模型的方法
            document.compatMode
            
    查看元素在页面中的位置
        ele.offsetWidth--包含padding
            对于无定位的父级，返回相对文档的位置
            对于有定位的父级，返回相对于最近的有定位的父级的位置
        ele.offsetParent
            返回最近的有定位的父级，如无，返回body，body.offsetParent为null
    滚动到指定位置
        scroll(x,y)   scrollTo(x,y)  scrollBy(x,y);

创建元素

<script>
	var p = $("<p class='p'>这是一个段落标签</p>")
</script>

查找获取

1. text() - 设置或返回所选元素的文本内容
2. html() - 设置或返回所选元素的内容，包括html标签
3. val() - 设置或返回表单字段的值

设置

<script>
	$(".box").html("<a href="http://www.baidu.com">百度</a>")
	$(".box").text("<a href="http://www.baidu.com">百度</a>")
	$("button").click(function(){
		$("input").val("请再次输入！");
	});
</script>

内部插入

1. append() 向每个匹配的元素内部追加内容

<script>
	var p = $("<p class='p'>这是一个段落标签</p>")
	$(".box").append(p);
</script>

2. appendTo() 把所有匹配的元素追加到另一个指定的元素集合中

<script>
	var p = $("<p class='p'>这是一个段落标签</p>")
	p.appendTo($(".box"));
</script>

3. prepend() 向每个匹配的元素内部前置内容
4. prependTo() 把所有匹配的元素前置到另一个指定的元素集合中

外部插入

1. after() 在每个匹配的元素之后插入内容
2. before() 在每个匹配的元素之前插入内容
3. insertAfter() 把所有匹配的元素插入到另一个指定元素集合的后面
4. insertBefore() 把所有匹配的元素插入到另一个指定元素集合的前面

替换

1. replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素
2. replaceAll() 用匹配的元素替换掉所有的selector匹配到的元素

删除

1. empty() 删除匹配的元素集合中所有的子节点
2. remove() 从DOM中删除所有匹配的元素

克隆

1. clone() 克隆匹配到的DOM元素并且选中这些克隆的副本

补充

$("button").click(function(){
	console.log($("input").val());
});

Jquery选择

过滤

1. eq() 获取第N个元素
2. first() 获取最后一个元素
3. last()
4. hasClass() 检查当前的元素是否含有某个特定的类，如果有，返回true
5. filter() 筛选出与指定表达式匹配的元素集合
6. is() 匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
7. slice(start, end) 选取一个匹配的子集

查找

1. children() 取得一个包含匹配元素集合中每一个元素的所有子元素的元素集合
2. find() 搜索所有与指定表达式匹配的元素
3. next() 区的一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
4. nextail() 查找当前元素之后所有的同辈元素
5. parent() 取得一个包含所有匹配元素的唯一父元素的元素集合
6. parents() 取得一个包含所有匹配元素的祖先元素集合（不含根元素）。可以通过一个可选的表达式进行筛选
7. prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
8. prevall() 查找当前元素之前所有的同辈元素
9. sibings() 获取一个包含匹配的元素集合中每一个元素的兄弟元素集合

Jquery事件

页面载入

• ready(fn) 当DOM载入就绪时就可以查询及操作时绑定一个要执行的函数

<script>
	$(document).ready(function(){
		
	})
	//简写模式
	$(function(){
		
	})
</script>

事件绑定

on() 在选择元素上绑定一个或多个事件的事件处理函数，动态元素也可以绑定

<script>
	//第一种方法
	$("#box").click(function(){})
	//第二种方法，事件委托，可以绑定动态元素
	$("#box").on("click",function(){
	})
	//例子
	$(function(){
		var p = $("<p>这是段落！</p>");
		$(".box").append(p);
		$(".box").on("click","p",function()){
			console.log("p");
		}
	})
</script>

off() 在选择元素上移除一个或多个事件的事件处理函数

<script>
	$(".box").off("click")
</script>

鼠标事件

1. click()事件：用户在元素敲击鼠标元素左键，并在相同元素上松开左键时触发。
2. dbclick()事件：在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用！
3. mousedown()事件：在用户敲击鼠标键时触发，跟keydown事件不一样，该事件只在按下鼠标时触发。
4. mouseup()事件：在用户松开鼠标时触发。如果在与按下鼠标的元素相同的元素上松开，那么click事件也会触发！
5. hover(f1(),f2())事件：一个模仿悬停事件（鼠标over及out）的方法，f1是经过时触发，f2是离开时触发的！

键盘事件

1. keydown()事件：当键盘或按钮被按下时，发生keydown事件
2. keyup()事件：当键盘被松开时发生keyup事件。
3. keypress()事件：当键盘或按钮被按下时，发生keypress事件

表单事件

1. submit()事件：当提交表单时，会发生submit事件
2. change()事件：当元素的值发生改变时，会发生change事件

文档窗口事件

1. scroll()事件：当用户滚动指定的元素时，会发生scroll事件
2. resize()事件：当调整浏览器窗口的大小时，会发生resize事件。
3. 例子：

<script>
	$(function(){
		$(document).scroll(function(){
			console.log($(document).scrollTop());
		})
		$(window).resize(function(){
			console.log(1);
		})
	})
</script>

事件冒泡

适用事件类型主要有键盘事件：keypress，keydown，keyup；以及鼠标事件：mouseup，mousedown。

1. e.pageX鼠标相对于文档的左边缘的位置
2. e.pageY 鼠标相对于文档的上边缘的位置
3. e.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发任何前辈元素上的事件处理函数
4. e.preventDefault() 阻止默认事件行为的触发
5. e.target 最初触发事件的DOM元素
6. e.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮
7. 例子：

<script>
	$(function(){
		$(document).scroll(function(e){
			e.stopPropagation();
			console.log($(document).scrollTop());
		})
		$(window).resize(function(){
			console.log(1);
		})
	})
</script>

Jquery动画

上卷与下拉

上卷slideUp

$(".up").click(function(){
	//第一个参数是动画执行时间，以毫秒计。第二个参数是动画的上卷格式，动画函数，第三个参数是回调函数
	$(".box").slideUp(5000, "linear", function(){
		//动画执行完毕后执行的代码
		alert("动画执行完毕！");
	})
});

下拉slideDown

$(".down").click(function(){
	$(".box").slideDown("fast");
	// slow 600ms 默认400ms fast 200ms
});

切换slideToggle

$(".toggle").click(function(){
	$(".box").slideToggle(2000);
});

显示和隐藏

隐藏

$(function(){
	$(".hide").click(function(){
		$(".box").hide(5000, function(){
			$(".hide").prop("disabled", true);
			//上面的是简单的属性增修，下面的是自定义的属性的增修
			//$(".hide").attr("disabled","disabled");
			$(".show").prop("disabled", false);
		});
	});
	......
})

显示

$(".show").click(function(){
	$(".box").show("fast", "linear", function(){
		$(".hide").prop("disabled", false);
		$(".show").prop("disabled", true);
	});
});

切换

$(".toggle").click(function(){
	$(".box").toggle(1000, function(){
	alert("动画执行完毕！");
	})
})

淡入和淡出

淡入

$(".in").click(function(){
	$(".box").fadeIn(3000);
});

淡出

$(".out").click(function(){
	$(".box").fadeOut(3000);
});

到指定透明度

$(".out").click(function(){
	$(".box").fadeTo("slow", 0.5);
});

切换

$(".out").click(function(){
	$(".box").fadeToggle();
});

自定义动画

$("button").click(function(){
	$(".box").animate({
		//自定义动画的演示方式！
		"margin-left":"50px",//可以写+=，-=，即在原有的基础上加减多少！
		//逗号分隔多个动画格式！
	}, 3000, functionm(){
		console.log("回调函数2");		
	})
})

停止动画

$(function(){
	$(".box").animate({
	"width":"+=400px"
	}, 2000)
	$(".box").animate({
		"height":"+=200px"
	}, 2000)
	$(".box").animate({
		"opacity":"0.2"
	}, 2000)
	// 3个动画依次执行！
	$(".btn1").click(function(){
		$(".box").stop();//停止当前动画，后续继续执行！
		$(".box").stop(true);//停止当前动画及后续动画
		$(".box").stop(true, true);//停止当前执行的动画并且跳转到当前动画的最终状态，后续不执行！
	})
})

案例

$(function(){
	$(.con h1).click(function(){
		$(this).next().slideDown("slow").parent().siblings().children(".list").slideUp("slow");
	})
})

Jquery的Ajax

语法

$.ajax(){
	url:'demo.json',
	type:'get',
	data:'',
	dataType:'json',
	sucess:function(re){
		console.log(re);
	}
}

load方法

$(function(){
	$(".box").load("demo.html", [发送给数据库的数据可选,]function(){
		console.log("3");
	})
})

json文件

demo.json
{
	"name":"校长",
	"age":19
}

{
	"like":[
		{"name":"yan","age":30},{"name":"yuan","age":50}
	]
}