1.DOM对象转换为jquery对象
$(DOM对象)
2.jquery对象转换为DOM对象
jquery对象是数组对象-角标【0】
jquery对象提供一个get(index)方法 .get(0)
3.注意:DOM对象与jquery对象之间不能相互调用
二、选择器
1.计数问题
:nth-child(n) -n从1开始
:eq(n) - n从0开始
: even/ :odd 从0开始计数
三、文档jquery
1.$("selector").remove() $("selector).empty()
$("selector).remove() - 删除自身节点和对应的子节点
$("selector).empty() - 删除对应的子节点,保留自身节点
2.内部插入和外部插入
内部插入和外部插入
内部插入仅仅是在这个节点也就是标签里的插入
外部插入是在这个节点也就是标签外的插入
1)内部插入
/*1. append()
append后面的节点被添加到append前面的节点的后面
*/
// $("#tj").append($("#ms"));
/*2. prepend()
prepend后面的节点被添加到append前面的节点的前面
*/
//$("#tj").prepend($("#ms"));
/*3. appendTo()
appendTo前面的节点被添加到 appendTo后面的节点的后面
*/
//$("#tj").appendTo($("#ms"));
/*4. prependTo()
prependTo前面的节点被添加到 appendTo后面的节点的后面
*/
$("#tj").prependTo("#ms");
</script>
2)外部插入
/*1. before()
brfore后面的节点被添加到before前面的节点的前面
*/
$("#tj").before($("#ms"));
/*2.after()
after后面的节点被添加到after前面的节点的后面
*/
$("#tj").after($("#ms"));
/*3.insertBefore()
与before()相反
*/
$("#tj").insertBefore($("#ms"));
/*4.inserAfter()
与after()相反
*/
$("#tj").insertAfter($("#ms"));
*/
四、效果
1.自定义动画:
1)animate(params,duration,easing.callback)
params - 设置动画执行的样式(CSS的属性)
写法 - {attrName:attrValue,}
duraion - 设置动画执行的时长(毫秒)
三个预定义值 - slow|fast|normal
easing - 需使用的擦出效果的名称(不使用)
callback - 当动画执行完毕后的函数
写法: $(...).animate({//目标样式
css属性:值,
... : ... ,
}, speed, easing, callback)
//所有属性,从当前状态,同时均匀变化到指定的目标样式
2)animate(params,option)
params - 设置自定义动画的样式(css属性)
options - 选项
duration - 设置自定义动画的时长
queue - Boolean值。如果为false,该动画不会被加入到动画队列中
2.切换动画
toggle() ---hide()+show()
slidetiggle() ----slideDown() +slideUp()
3.停止动画
$(...).stop();
问题: 默认只能停止正在执行的一个动画
如果后续有排队的动画,依然会继续触发
解决: $(...).stop(true); //1. 停止当前动画,2. 清除队列
五、jquery遍历
1.$().each(callback)方法 --隐式迭代 callback - 回调函数 function(index,domEle) index - 当前遍历数组或对象的索引值 domEle - 遍历数组或对象的每个元素(DOM对象)
2.$.each(obj,callback)obj - 需要遍历的数组或对象 callback - 回调函数 function(index,domEle) index:当前遍历数组或对象的索引值 domEle - 遍历数组或对象的每个元素