<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 要求当前网页使用IE最高版本的内核渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, inital-scale=1.0, maximum-scale=1.0, minimun-scale=1.0">
<title>第一天学习</title>
<script type="text/javascript" src="../js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/oneday.js"></script>
<!--
jQuery 语法
基础语法是：$(selector).action()
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
注： jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
如:$('.Commodities_Body_checkbox:checked') ->checked为 该类名 input的 checkbox 类型的 checked状态(被选)
隐藏显示
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback); hide()、show()方法都是一样的参数
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
淡入淡出:
拥有下面四种 fade 方法： 前三个方法参数与隐藏显示一样
1.fadeIn()
2.fadeOut()
3.fadeToggle()
4.fadeTo() 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
滑动方法： 方法参数与隐藏显示一样
1.slideDown() :用于向下滑动元素。
2.slideUp(): 用于向上滑动元素。
3.slideToggle()： slideDown() 与 slideUp() 方法之间进行切换。
jQuery事件:
change()事件
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
jQuery 动画 :
animate()
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
1.可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：意思为等于当前的值加多少多少
2.甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
可按执行顺序来，一个事件可绑定多个动画事件:
jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
如：$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
停止动画： stop()
stop() 方法用于在动画或效果完成前对它们进行停止。
语法:$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false(仅仅暂停)，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
});
jquery允许 在获得相同元素下 运行多条jquery命令 （最好 包含折行和缩进） 如：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
HTML的操作:
语法：text() - 设置或返回所选元素的文本内容
$(selector).text(function(index,currentcontent))
index - 返回集合中元素的 index 位置。
currentcontent - 返回被选元素的当前内容。
1.html() - 设置或返回所选元素的内容（包括 HTML 标记->标签）
2.val() - 设置或返回表单字段的值。
CSS 的选择器:attr()
CSS选择器用法： 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
1.attr() 方法用于获取/设置/改变一个到多个属性值。
如:$("#w3s").attr("href")；
1.1 pop() : 1.当该方法用于返回属性值时，则返回第一个匹配元素的值。 2.当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
返回属性的值：$(selector).prop(property)
设置属性和值：$(selector).prop(property,value)
使用函数设置属性和值：$(selector).prop(property,function(index,currentvalue))
设置多个属性和值：$(selector).prop({property:value, property:value,...})
2.addClass() - 向被选元素添加一个或多个类 如:$("div").addClass("important");
3.removeClass() - 从被选元素删除一个或多个类 如:$("div").removeClass ("important");
4.toggleClass() - 对被选元素进行添加/删除类的切换操作 如:$("div").toggleClass ("important");
5.css() - 设置或返回样式属性
如:$("p").css("background-color","yellow");
如:css({"propertyname":"value","propertyname":"value",...});
添加元素: 都可添加N个元素->文本/HTML, 一个在被选元素内添加，一个在被选元素外添加
append()和prepend()可包含 HTML标签 用作插入的标签
1.append(文本/HTML1,文本/HTML2,文本/HTML3...) - 在被选元素(内)的结尾插入内容,文本/HTML
2.prepend(文本/HTML1,文本/HTML2,文本/HTML3...) - 在被选元素(内)的开头插入内容，文本/HTML。
3.after(文本/HTML1,文本/HTML2,文本/HTML3...) - 在被选元素(外)之后插入内容
4.before(文本/HTML1,文本/HTML2,文本/HTML3...) - 在被选元素(外)之前插入内容
删除元素:
1.remove() - 删除被选元素（及其子元素） 可接受一个参数,如:ID、class等选择器的 进行过滤
2.empty() - 从被选元素中删除所有子元素
3.element.html() - 清空匹配的元素的子元素节点及内容
元素大小: 返回的所有的值(Number 数据类型)都不带单位。参数为数字则为修改该值,该参数可以不用写单位
1.width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
2.height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
3.innerWidth() 方法返回元素的宽度（包括内边距）。
4.innerHeight() 方法返回元素的高度（包括内边距）。
5.outerWidth() 方法返回元素的宽度（包括内边距和边框）。 如:outerWidth(true) 则返回元素的宽度（包括内边距和边框 和 maigin）
6.outerHeight() 方法返回元素的高度（包括内边距和边框）。如:outerHeight(true) 则返回元素的高度（包括内边距和边框 和 maigin）
元素位置(坐标): 返回的所有的值(Number 数据类型)都不带单位。参数为数字则为修改该值,该参数可以不用写单位
1. $(selet).offset() 返回第一个匹配元素相对于文档的(坐标)位置。 属性有: left、top 可以通过offset().left/top 获取坐标值，也可以通过offset({left:200,top:200}) 进行修改偏移量
2. $(selet).offsetParent() 返回最近的定位祖先元素。
3. $(selet).position() 返回被选元素相对于带有定位的父级偏移坐标，如父级没有则以文档为主。 ->可以通过offsetParent().left/top 获取坐标值， 只能获取不能修改
以下都能控制 html、body、domcument 等根节点对象都可以进行控制
4. $(selet).scrollLeft() 设置或返回匹配元素相对滚动条(被卷去的)左侧的偏移。->scrollLeft()获取坐标值，也可以通过scrollLeft(Number) 进行修改偏移量
5. $(selet).scrollTop() 设置或返回匹配元素相对滚动条(被卷去的)顶部的偏移。->scrollTop()获取坐标值，也可以通过scrollTop(Number) 进行修改偏移量
Jquery遍历:
注：比较好用的遍历元素 给同一个元素做不同操作
主要做元素操作
each() :语法 $('div').each(function(index(DOM对象索引),domEle(DOM节点对象->不是Jquery对象 但能用jq选择器 寻找该DOM对象)){})
遍历对象: ->主要做数据处理
$.each((obj,function(index(DOM对象索引),enlemnnt(遍历对象内的内容->为DOM元素 与上面参数返回的一致)){}))
如：$.each($('div'),function(index,elemnt){aleft(index);aleft(elemnt)}) 主要做数据处理
$.each
向上遍历
1.parent() 方法返回被选元素的直接父元素。
2.parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
如: $("span").parents("ul"); 返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
3.parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
如:$("span").parentsUntil("div"); 返回介于 <span> 与 <div> 元素之间的所有祖先元素,如其中 div/span没有子元素，则逐级向上寻找，一直到根元素
向下遍历:
1.children() 返回被选元素的所有直接子元素。
如: $("div").children("p.1"); 返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
2.find() 返回被选元素的后代元素，一路向下直到最后一个后代(包含后代元素中所有子元素，子元素中所有子元素，一直到最后一个)。
$("div").find("span"); 属于 <div> 后代的所有的 <span> 元素：
同级遍历:
1.elemnt.siblings('DOM元素/选择器') 返回被选元素的所有同胞元素 不包含被选元素本身
如: $("h2").siblings("p"); 返回属于 <h2> 的同胞元素的所有 <p> 元素：
2.elemnt.next() 返回被选元素的下一个同胞元素。 无参
3.elemnt.nextAll() 被选元素的所有跟随的同胞元素(按顺序 在被选元素下面的所有同胞元素)。
4.elemnt.nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
5.elemnt.prev() 返回被选元素的上一个同胞元素。 无参
6.elemnt.prevAll() 被选元素的所有跟随的同胞元素(按顺序 在被选元素上面的所有同胞元素)。
7.elemnt.prevUntil() 返回介于两个给定参数上面的所有同胞元素。
除了上面的可以过滤之外，还有其他的三个最基本的过滤方法：
1.elemnt.first() 返回被选元素的首个元素。
如：$("div p").first();->取首个 <div> 元素内部的第一个 <p> 元素
2.elemnt.last() 返回被选元素的最后一个元素
如: $("div p").last(); ->选择最后一个 <div> 元素中的最后一个 <p> 元素
3.elemnt.eq() 返回被选元素中带有 指定索引号的元素。
如: $("p").eq(1); 取第二个 <p> 元素（索引号 1）
4.elemnt.filter() ：允许您规定一个标准。不匹配这个标准的元素会从被选中的集合中删除，匹配的元素会被返回。
如： $("p").filter(".intro"); ->返回带有类名 "intro" 的所有 <p> 元素
5.elemnt.not() 方法返回不匹配标准的所有元素。 ot() 方法与 filter() 相反
如： $("p").not(".intro");->返回不带有类名 "intro" 的所有 <p> 元素
Jquery事件:
1.on()方法 绑定事件 ：在匹配元素上 绑定一个或者多个事件处理函数 ->能给动态创建的元素绑定事件
语法:elemnt.on(事件类型, selector(元素选择器),fn(回调函数))
如：$('div').on({
click:function(){
...
},
mouseenter: function(){
..
}
})
或者: $('div').on("click mouseout",function(){
$(this).toggleClass('current')
})
也可以完成事件委派 :- >减少与dom交互次数，提高性能 (访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间)
事件委派原理 ： 把子元素的事件绑定在父元素身上，触发条件在子元素被点击 ，被点击之后子元素开始冒泡，到了上一级便结束冒泡，发生事件
$('ul').on('click','li',function(){
});
注:Jquery里的click()事件绑定不了 动态创建的元素
2.off()解绑(移除on()方法添加的事件)事件: 解绑以后触发事件无回应
语法: elemnt.off('事件','元素',function(){}(回调函数)) 参数与上面一致 事件可写也可以不写，不写时默认全部移除事件
3. one() 向匹配元素添加事件处理器。每个元素只能->触发一次该处理器。
如: $("#tag2").find("li:eq(1)").one('click', function(){
$('#playback,#feed-back').scrollUp();
});
语法:$(selector).one(event(事件对象),data(传递到函数的额外数据),function(事件发生时运行处理的函数)).
如:$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
4. elemnt.trigger('事件类型') 自动触发事件 ->先添加好 后调用自动触发 如:click() 自己调用触发点击click事件
elemnt.triggerHandler('事件类型') 不会触发元素默认行为
jq事件对象 event 和js对象一致
JQuery 拷贝对象：
1. $.extend([deep(true为深拷贝反之浅拷贝),target(被拷贝对象赋值的),object1(被拷贝的 obj),[objectn]]);
js、jq里深拷贝和浅拷贝:
深拷贝：复制(申请)一份复杂类型和简单类型同样的对象空间，值一样，内存空间被分隔开，如tragetobj的复杂数据类型本身带有不同key的，object复制过来的不会覆盖
浅拷贝：复制简单类型的key value,复杂数据类型的则只是引用，如tragetobj的复杂数据类型本身带有不同key的，object仍旧会覆盖
jquery 多库共存： -> 让jquery和其他的js库不存在冲突并同时存在
解决方案:
1.jquery符号可以写成 $/jQuery
2. var xx=$.onConflict(); 自定义符号
数据存储:
element.data(key,value)方法 :可以在指定元素上存储数据，不会修改DOM元素结构。页面刷新时，数据被移除
访问:element.data(key) 也可以访问H5自定义属性 data-index 返回的是Number类型
注:stop()写在动画或者效果前面，相当于停止结束上一次的动画或者效果
注： Jquery对象只能使用jquery方法方法,dom对象则使用原生的javascript属性和方法
注： 链式编程比想象的更强大。 做之前，理清思路如何做。
-->
<style>
/* //清除浮动 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*清除浮动方法3.1->建议经常使用*/
.clearfix {
*zoom: 1;
/*->IE6、IE7专门清除浮动的样式*/
}
.a,
.b {
width: 300px;
height: 100px;
background-color: rgb(208, 235, 190);
}
.b {
display: none;
position: absolute;
height: 350px;
border-top: 2px solid #ccc;
}
.c {
width: 300px;
height: 100px;
background-color: rgb(49, 172, 189);
}
.r {
position: relative;
width: 836px;
margin: 0 auto;
overflow: hidden;
}
.e {
position: relative;
width: 400%;
height: 110px;
}
.w {
position: relative;
border: 2px solid cyan;
float: left;
}
</style>
</head>
<body>
<!-- 语法的面板隐藏学习 -->
<div class="a"><a>点击显示/隐藏下面的文字</a></div>
<div class="b">hhhhh</div>
<button class="stops">点击暂停</button>
<div class="d">
<h1>1313
<div class="c">这是类C的</div> 2131</h1>
</div>
<div class="r">
<div class="e clearfix">
<div class="w"></div>
</div>
</div>
</body>
</html>
04-19
339
339
08-08
456
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
