jq总结
使用$() 方法获取 jquery对象（其实是一个类似数组的集合，但是不是真实的数组，不能调用数组的方法）。
这个集合中包含了所有你要查找的元素。可能有很多，可能只有一个，或者没有，所以获取jquery对象得到的不可能是 undefind 或者 null
jquery 对象它含有一个lenght属性，可以获取对象里面有几个元素；也可以像数组一样访问小标。
好处：
1.jq和原生js相比 jq在dom操作中更加简便方便。
2.我们直接可以对jQuery对象（类似数组的集合）进行操作，不管里面有几个元素，无需显示控制迭代一一操作，它的内部会自动迭代操作。
3.如果是在css或者标签选择器 里面设置的话 就是 伪类选择器的操作 如果是在js 或者 jq 里面操作 就是 方法
1 迭代案例 2 var n = 1; 3 for(var i = 0; i < 10; i++){ 4 n = n+i; 5 } 6 这个就是迭代的案例。 7 不是迭代就是说明可以任意哪一个数值
2.$()，.html .test()
3.empty() 清空双标记中间的所有内容（包括后代所有内容）
| jq方法名 | jq含义 | jq案例 |
| 查找元素 | ||
| $('选择器表达式') | 找Dom元素 | $('id或者标签或者类选择器'), |
| 查找元素中的伪类选择器 在$('li:伪类选择器') 然后在方法中使用时.方法名（） 的形式 | ||
| .eq(从0开始进行索引) | 查找给定参数的值 | $('li:eq(4)').css('background': 'red'); |
| .frist | 匹配找到第一个元素 | $('li:frist') 找到第一个元素 |
| .last | 匹配找到最后一个元素 | $('li:last') 找到最后一个元素 |
| .even | 匹配到下标索引值为偶数的元素 | $('li:even') 下标索引值是偶数 |
| .odd | 匹配到下标索引值为奇数的元素 | $('li:odd') 下标索引值是奇数 |
| .clone() | 拷贝 | $('li').last.clone().appendTo(‘li’) //把li的最后一个元素拷贝下来添加到一个标签里面 |
| .header | 匹配 h1 h2 之类的标题元素 |
//⑨ :header 获得h1/h2/h3...的标题元素
//$(":header").css('color','blue');
|
| .parent(选择器表达式) | 找到父亲节点 |
$('#id').parent() 找到父亲节点
|
| .not(‘选择器表达式’) | 对当前找的东西，按照选择器在进行筛选一次() 与 filiter取反 | |
| .filiter('选择器表达式') | 对当前找的东西，按照选择器在进行筛选一次 | $('div').filite('id').css("background":"red") |
| .find('选择器表达式') | 找到符合条件的子元素(筛选出后代) | $('#id').find('div').css(); |
| .silibligs('选择器表达式') | 找到除自身以外的所有兄弟选择器 | $('#id').slibligs() 找到兄弟选择器 |
| .chlid(选择器表达式) | 找到所有子元素，但是不包括子元素的后代，根据情况要求来 | |
| .end（选择器表达式） | end(选择器表达式) 链式操作，退回链式操作的上一节点（一个end退后一个。） | 找到上一步的节点 |
| .closest(选择器表达式) | 找到符合选择器表达式要求的离我最近的先祖元素 | |
| .next（选择器表达式） | 后面紧挨着相邻兄弟，可以视情况给参数进一步筛选 | |
| .nextAll(选择器表达式) | 后面的所有兄弟，可以视情况给参数进一步筛选。 | |
| 。prev(选择器表达式) | previous的缩写 前面紧挨着相邻兄弟，可以视情况给参数进一步筛选 | |
| .prevAll(选择器表达式) | 前面的所有兄弟，可以视情况给参数进一步筛选。 | |
| .add(选择器表达式) | $('p').add('h) 这个是并集 ，把两批jquert找到的东西合在一起。 | |
| .end(选择器表达式) | 链式操作，退回链式操作的上一节点（一个end退后一个。） | |
| 绑定事件 | ||
| 鼠标事件 $('标签名').鼠标事件的方法（function(){}） | ||
| click() | 鼠标点击事件 | |
| mouseover() | 鼠标移入事件 | |
| mouseout（） | 鼠标移出事件 | |
| mouseenter() | 鼠标指针进入时 | |
| mouseleave() | 鼠标指针离开时 | |
| 绑定事件 为匹配的元素同时绑定一个或多个事件 | ||
| bind( 参数类型 , 【data】,（不是必须的） 描述) |
type 事件类型 主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件 [data] 可选参数 作为event.data属性值传递给事件对象的额外数据对象,该参数不是必需的 |
unbind()方法有两个参数,这两个参数不是必须的,当unbind()不带参数时,表示移除所绑定的全部事件。 |
| 移出事件 | ||
| unbind() 方法 | [type] 事件类型 主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件 [fn] 处理函数 用来解除绑定的处理函数 |
|
| 复合事件 | ||
| hover() | 第一个函数(enter);当鼠标指标移除这个元素时,会触发第二个函数(leave),该方法相当于mouseenter和mouseleave事件的组合。 | hover(enter,leave); |
| toggle()带参数 | 带参数的方法用于模拟的方法用于模拟鼠标连接click事件。第一次点击元素,触发指定的第一个函数(fn1);当再次单击同一个元素时,则触发指定的第二个函数(fn2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数轮番调用,toggle()方法的语法格式如下。 | |
| toggle() 不带参数 | 不带参数时,与show()和hide()方法的作用一样,切换元素的可见状态,如果元素是可见性,则切换为隐藏状态;如果元素是隐藏的,则切换为可见状态;语法格式如下。 | toggle(); |
| 动画 | ||
| show() | ||
| hide() | ||
| fadeln |
可以使用fadeln()方法控制元素的淡入,fadeln()方法的语法格式如下。 speed: |
$(selector).fadeIn([speed],[callback]) |
| fadeOut() | ,fadeOut()方法可以控制元素淡出,还能定义显示元素时的效果。 | $(selector).fadeOut([speed],[callback]) |
| slideUp() | 若元素的display属性值为none,当调用slideDown()方法时,这个元素会从上向下衍伸显示, | $(selector).slideUp([speed],[callback]) |
| slideDown() | 而slideUp()方法正好相反,元素从上到下缩短直至隐藏, |
$(selector).slideDown([speed],[callback]) speed为可选参数,用来规定改变元素高度的时长,它的取值也是slow、fast或毫秒 |
| animate() | params:必须,定义形成动画的CSS属性。 speed:可选,规定效果时长,取值:毫秒、fast、slow. callback:可选,滑动完成后执行的函数名称。 |
$(selector).animate({marginLift:-100%},speed,callback) |
| 属性 attr | ||
| .attr(获取/取值) |
$(selector).attr([name]) //获取属性值 $(selector).attr({[name1:value1],[name2:value2].....[nameN:valueN]}) //设置多个属性值 其参数name表示属性名称,value表示属性值 |
$('input.increase').attr('disabled',false); |
| .removeAttr('属性') | $(selector).removeAttr(‘name’) | |
| addClass('属性') | 添加属性 属性不加选择器 | |
总结： 使用jq方法找到的结果是jq对象， 只能调用jq体系的方法和属性，不能跨体使用，
对象是可以相互转换的。
jq找的对象从类型上面来看永远是一个数组，把他们当成一个数组（集合来进行使用）。
找元素：
常用的操作：
html（）
text()
css（） 设置dom的css样式
empty() 清空双标记之间的是所有内容（包括）
val() 设置/获取 表单标签的value属性的值
attr(属性，属性值) 一个就是取 ，两个就是设置 设置/获取 dom的指定属性的值
addCLass（class值） 添加class属性
removeClass（class 值） 移出clss属性
hasCLass(class值) 判断是否有这个属性值
toggleClass(class值) : 切换指定的class
toggle () 进行隐藏显示交互事件 本来显示的进行隐藏 本来隐藏的进行显示。
绑定事件：
on(事件名字，选择器表达式，回调函数) 绑定事件 为dom的指定时间绑定回调函数，第二个参数：可以给两个或三个元素。
off() 取消时间
trigger(事件名称，传参) 以代码的方式来触发指定dom元素的指定事件
=====================
.创建标签
$(小标签对象的html代码内容) 创建一个指定的标签
remove（） 删除一个指定的标签。
插入
头部追加
父.append(子)
子。appendTo(父亲)
尾部追加
prepend() 父亲 子
prependTo() 子 父亲
后面插入
after() 前 后
inserrafter 后 钱
前面插入
before 后 前
insertbefore 前 后
jq 动画
fadeln()
fadeout()
slideup(）
animate() 自定义动画
stop(两个参数bloble) 是否清空动画队列，是否讲未i完成的动画达到结束的位置 ） 停止动画
offset().height
offset().widht
offset left()
offsertop()
positiom().left
posituin().top
scrollTop()
方法
1.index()方法： 获取dom元素在其所有兄弟中排第几，这个是从0 开始计数的。
2. is(':annimated') 判断是否在动画中。 isAnimate () 判断dome 是是否处于动画中。
is(':hidden'); 判断该标签是否隐藏
3.hide() 隐藏（淡入） HTml 元素
4.show() 显示（淡出） Html 元素。
$('#hide').click(function(){
$('p').hide(); //隐藏html元素
})
$('#show').click(function(){
$('p').show() //显示 html元素
})
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
//speed/slow/fast/毫秒 第一个参数 显示/隐藏的速度，
//第二个参数 callback是 显示或隐藏完成后所执行的函数名称（又叫回调函数）
这里无论是 hide() show() toggle() 都可以使用 speed 和 callback这两个参数，
并且可以省略 callback.
$('p').show(1000);
5.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------–
3、window.onload与$(document).ready()的对比
window.onload:
执行时机:
必须 等待网页中所有的内容加载完毕后(包括图片,Flash、视频等)才能执行
编写个数:
同一时间不能编写多个
执行以下代码:
window.onload=function(){
alert("小明学习不好");
}
window.onload=function(){
alert("小明学习不好");
}
结果只会输出一个"小明学习不好"
简写方法:
无
$(document).ready():
执行时机:
网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完
编写个数:
同一时间能同时编写多个
执行以下代码:
$(document).ready(function(){
alert("小明学习不好");
});
$(document).ready(function(){
alert("小明学习不好");
});
结果会输出两次"小明学习不好"
简化写法:
$(document).ready(function(){
//执行代码
});
可以简写成:
$(function(){
//执行代码
});–4、jQuery语法结构