关于jQuery的学习
1.jQuery的入口函数
$(function(){
…//此处为页面DOM加载完成的入口
})
或者
$(doucument).ready(function(){
…//此处为页面DOM加载完成的入口
})
-
等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
-
相当于原生js 中的LOMContentloaded.
-
不同于原生js 中的 load事件是等页面文档、外名的js文件、css文件、图片加载完毕才执行内部代码。
2.jQueryz中的顶层对象$
-
$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。
-
$是jQuery的顶级对象，相当于原生JavaScript中的window。把元索利用$包装成jQuery对象，就可以调用jQuery的方法。
2.1DOM对象和jQuery对象
- 用原生JS获取到的对象是DOM对象，用jQuery方法获取jQuery对象，两者之间只能各用各的方法，DOM对象无法使用jQuery方法，反之亦然。
2.jquery获取的对象是以伪数组的方式存在的。
- 两种对象之间可以相互转换，
var ca = document.querySeletor('video');
// DOM对象转化为JQuery对象
$('video');
//在括号中用引号写标签名或者 .类名 或者 #id.
//$(ca).play() 是不被允许的jQuery中没有play方法需要转换
$('ca')[0].play()
3.jQuery常用的API
3.1jQuery选择器
- $(“选择器”）里面选择器直接写CSS选择器即可，但是要加引号。
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“”#id””) | 获取指定ID的元素 |
| 全选选择器 | $(“*”) | 匹配所有元素 |
| 类选择器 | $(“.class”) | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
- jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $( “ul>li”); | 使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
- 筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | … |
| :eq(index) | $(‘li:eq(2)’) | 获取li元素中序号为2的元素 |
| :odd | ;;; | ::: |
| :even | ;;; | 偶数 |
-
隐式迭代（重要)
遍历内部 DOM元素（伪数组形式存储)的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。 -
链式编程
一种简化代码的书写方式。
3.2jQuery样式操作
-
参数只写属性名，则是返回属性值
//$(this).css(“color””); -
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
//$(this).css(“color” ;, “red”); -
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，
//$(this).css({ “color”:”white” ,” font-size”:” 20px”);
//$(this).css({
color:”white” ,
font-size:” 20});
3.3jQuery效果
-
显示与消失。
show(速度，曲线，回调函数)
hide(一样)
toggle([speed],[easing],[fn])
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 -
滑动，
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 -
事件切换
hover([over,]out) hover(function(){},function(){})
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
- 动画队列及其停止排队方法
(1) 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
element.stop().animate({
width:100,
})
(2) 停止排队
stop()方法用于停止动画或效果。
注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
3.4jQuery属性操作
-
获取元素的固有属性使用 porp(‘herf’),同时也可以用于设置属性值prop(‘name’,’jahn’)。
-
获取元素自定义的属性 attr(“herf”),类似于原生中的setattribute(),getattribute().
-
数据缓存，date(‘yourname’,’keea’),这个是把数据储存到元素的内存中，
也可以获取H5的自定义属性。 -
购物车全选练习
.change()事件可以监听元素状态的改变。
：checked选择器可以选出被选中的复选框，返回的是一个对象。
当全选框被选中时利用prop(),将每一个子选框的属性修改。
3.5jQuery文本属性值
-
element.html()获取和修改元素中的内容，相当于js 中的 innerHTML(),同时要修改就在括号中添加内容。
-
text(), 获取和修改元素中的文本内容。相当于 innertext（）
-
val(), 获取和修改表单中的值，value。
-
toFixed（3）计算结果保留3位小数。
-
substr(1) 字符串截取 ，如：p = $23.33 , p.substr(1) = 23.33;
-
parents(”) 可以返回指定的祖先元素。
3.6jQuery元素操作
- each（function（i, obj）{}） 方法遍历元素,回调函数的的第一个 参数是遍历元素的索引号，第二个是返回的DOM对象。
$('div').each(function(index,DOMelement){
var arr = ['blue','green', 'yellow'];
$(DOMelement).css("color",arr[index]);
})
- $.each(sth, funchtion(i, ele){}) 可以遍历任何元素，还可以遍历数组，和对象，主要用于处理数据。
$.each(arr,function(i,ele){
console.log(i); //数组中的序号
console.log(ele);// 数组元素
})
// 遍历对象。
$.each({
name:'hahh',
age: 12,
},function(i,ele){
console.log(i); //输出的是name，age等属性名
console.log(ele);// 输出属性值。
})