<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="utf-8" />
<title>JQ</title>
<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#bar{
margin:3px;
width:40px;
height:40px;
position:absolute;
left:0px;
top:30px;
background:green;
display:none;
}
#bar.newcolor{
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1 con">
<div class="div11">ss</div>
</div>
<div class="div2 con">
<div class="div21">sss</div>
</div>
</div>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
<button id="stop">stop</button>
</body>
<script>
//1.JQ搜索元素可以接受两个参数,第一个为目标,第二个为范围,但一般都是在HTML中搜索,因此省略第二个参数
console.log($(".div11",".div1"));
//2.JQ添加标签字段,接受两个参数,第一个为添加的标签,第二个用于附加在这个标签上的属性,内容,事件或者方法之类的。值得注意的是:第一个参数格式固定为$("<span/>") 或 $("<span></span>") ,微软规定 <input> 元素的 type 只能写一次,所以创建一个 <input> 元素必须同时设定 type 属性
$("<div/>",{
text: "Click me!",
id:'move',
click:function(){
$(this).css("background","blue")
}
}).appendTo($(".wrap"));
//3.当DOM加载完成后要执行的函数
/*
* js的onload和jq的ready区别:
* 1.window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
JQuery的ready事件实际上是对IE的readystatechange事件和DOM的DOMContentLoaded事件进行封装,这两事件都是在DOM树结构下载并解析完毕后触发。
* */
// $(document).ready(function(){})简写为下面代码
$(function(){
console.log(22)
})
//4.each循环函数同for,更简洁,需要i的时候传参数i就可以使用
$(".con").each(function(i){
console.log(i)
$(this).toggleClass("ex")
})
//5.size()已失效,作用和length一样,报错undefined is not a function
// console.log("Size: " + $("li").size());
//6.计算元素个数
console.log("length: " + $("li").length);
//7.返回$()搜索元素的第一个参数,已失效
// console.log($('ul li').selector)//ul li
//8.返回$()搜索元素的第二个参数,已失效
// console.log($('ul li',document.body).context)
//9.从0开始,返回一个匹配的DOM对象,和eq(0)相似,不过eq()返回的是Jq对象
console.log($(".con").get(0))
//10.index()返回下标 ,从0开始
console.log($('li').index($("#foo")))//传递一个dom对象或者JQ对象,返回在原先集合中的索引位置
console.log($('#bar').index("li"))//传递一个选择器,返回#bar在所有li中的索引位置
console.log($('li').index($('li:gt(0)'))); //传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
console.log($('#bar').index())//不给参数,返回同辈元素的位置
console.log($('baz').index())//找不到匹配的元素,则返回-1
//11.data()存取在元素上的自定义属性数据,可以是单个或集合
$('#bar').data('test',{'first':'sss','second':'eee','third':'www'})
console.log($('#bar').data('test').third)
$('#bar').removeData('test')//删除属性无法删除集合里的单个属性
console.log($('#bar').data('test'))
//12.函数队列的问题,防止动画过多回掉函数一层一层的,太复杂。
/*没定义队列名,默认为fx,动画函数放在fx队列中,然后在以先进先出的方式执行队列中的函数,非动画函数优先动画函数执行,
*/
/*queue(name,[callback]):
当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name')
当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数.$('#demo').queue('name',fun); 用queue将函数fun加入到name队列中
当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).
*/
$('#move').click(function () {
$("#bar").show("slow");
$("#bar").animate({left:'+=200'},2000);
//queue()将一个函数插入队列
$("#bar").queue(function () {
$(this).addClass("newcolor");
//shift()取出队列中最前端的函数,并执行它。两者必须同时存在,否则无效
$(this).dequeue();
});
$("#bar").animate({left:'-=200'},500);
$("#bar").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("#bar").slideUp();
});
//clearQueue([queueName])清除尚未进行的动画
$("#stop").click(function(){
$("#bar").clearQueue();
});
//出自文档http://www.cnblogs.com/rmbteam/archive/2011/07/25/2116357.html
//13.jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件) jQuery.fn = jQuery.prototype 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”,只有实例化对象后才可以使用
/*
* jQuery.extend(object)扩展jQuery对象本身。
* 参考文档:http://www.cnblogs.com/xuxiuyu/p/5989743.html
*/
</script>
</html>
JQuery学习之核心
最新推荐文章于 2021-05-17 16:00:21 发布