JQ DOM操作
var div=$("<div><a herf=‘#’></a></div>")//创建新标签
div.css({
width:200,
height:200,
})
jQ ready 和onload的区别，
ready采用了事件监听机制，不会发生覆盖；read只需css，HTML，js文件加载完毕后就可以执行，无序等待图片加载
onload 需要所有的都加载完毕后才执行
绑定事件：JQ中的事件 不需要使用on开头
JQ可以使用CSS来获取样式和设置样式
//JQ动画animate
animate只针对数值变化，字符串变化是不可以的
第一个参数为变化值的集合，第二个参数为变化的时间；第三个为变化的轨迹，第四个参数为结束之后执行的回掉函数
$("#div").animate({
css内容，或者样式
}，2000，linear，function(){})；
JQ的特殊方法1 JQ hover(function(){},function(){})两个参数第一个为 移入事件，得二个为移出事件
JQ特殊方法2， $("#")hide(),隐藏 $("#"). show()；显示；
JS与JQ互相转化
JS：var div=document.getElementById("div"); div.offsetWidth
JQ方式 var div=$("#div); div.css("width)；
JQ转JS div.get(0).offsetWidth;
JQ 修改行间属性：
$(this).atter({
value:使用attr修改value，则val略必须先修改
type:也可以添加属性；
})
单独修改value的值是使用 val();可以获取也可以设置
$("# div")index()是获取制定元素的下标 //但是位置是从1开始的
所以为了获取当前按钮的下标 index= $("inpnut").index($(this))
JQ 2
css直接写属性名是获取属性值例如 $("#div").css("width" )//获取 修改，不加大括号一次只能修改一个属性
$("#div").css({ "width"，400 })/、设置width为400px；并且可以设置多个属性
JQ中的宽高
$(“#div”).width() 只能获取到css中设置的width的值，并不是元素的显示宽度；其他的Height也是一样的！ $(“#div”).width(400)这就是设置div的宽度为400px；
outerWidth()相对于width();包含了 边框 padding的值；而且当$("#div1").outerWidth(true)；而且当填入true时可以获取到包括margin在内的值
JQ 的 offset()获取的是 元素距离文档的偏移量，不考虑父级元素
格式 $("#box").offset().top；
position()方法；
position()获取的事本身距离父级的偏移量
格式： $("#content").position().left 或者("#content").offsetParent().width(400)；设置父级的元素
scrollTop() && scrollLeft() 简而言之就是滚动条与页面顶部的垂直距离
方法返回或设置匹配元素的滚动条的垂直位置 写值就是设置，不写值就是获取
节点的遍历
1.length ，size()都可以获得数组的容量
children()什么都不写获取的是所有的子元素 $("#box").children().size()；
$("#box").children("p").length；
可以使用选择器，找到具体的某个或者某些子元素
var div = $("#box").children("div:eq(0)");
div.html() 括号内什么都不写则是获取标签的内容，写入则是修改标签的内容；
元素的查找
var p = $("#box").children("p:eq(0)"); p:eq(0)第一个p元素
console.log(p.next());
p.next()找的事目标元素的同级以下紧邻元素
p.sibling("h3") ;括号内不写内容就是找到所有的同级元素；如果写选择器内容，找到的是 同级复合条件的所有元素；
p.parent() 获取p的父级元素
p.prev()获取p的紧邻上一个元素；
$("#box").find("div:eq(0)") ；找到第一个div ，寻找的是box中符合条件的子集；
JQ中插入添加节点
//添加在ul内部后面的方法
$("#ul").append(li),父级元素执行添加；
li.appendTo("#ul") 子集元素执行添加
//添加在ul内部前面的方法
$("#ul").prepend(li);父级添加；
li.prependTo.($("#ul"));子集添加
添加在同级以下，紧挨着
$("#ul").after(li);
li.insertAfter($("#ul"));
添加在同级以上紧挨着
$(#ul).brfore(li);
li.insertBefore($("#ul));
JQ节点复制
clone(); JQ中复制自身以及子元素都会被复制；clone(true)写入true时会把原生的事件复制过来，false则不可以
JQ删除节点
remove();将自身以及元素所有的元素全部删除 格式$("#ul1").remove();
empty();方法 将自身内部的所有元素全部删除，但是不会删除自身 $("#ul1").empty();
JQ中替换节点
replaceAll(); 替换，替换的参数为选择器，通过给定的选择器决定替换的元素；
可以替换一个，也可以替换多个！ 格式 newp.replaceAll("p:eq(0)")
JQ的class 操作
addClass()添加类名，不会出现覆盖
toggleClass()如果传入的类名当前没有相当于添加，如果传入的类名有，就是删除；
$("#box").toggle(500)//500是毫秒，时间 过渡时间
JQ动画
show();hide()；通过改变disply的属性来实现动画的效果；括号内可以写一个时间和一个完成后的回调函数
可以利用布尔值来改变现实与否
var bol=true;
$(document).on("click",function(){
if(bol){$("#box").hide(500,function(){
alert("隐藏")}
)}
}else{
$("#box").show(显示)})；bol=true；
JQ动画2
toggle综合了none和block会根据具体情况进行调整点击显示或者阴藏
JQ动画3
slideUp()从有到无，从下往下； 同样小括号内可以填写时间和回调函数简单的说就是function(){};
slideDown() 从上往下，
slideToggle();综合两者
JQ动画4
fadeIn(不透明度变为0，none)；
fadeOut(不透明度变为不透明block)；
fadeTo(时间，变化到得值，function(){})
fadeToggle(在out和In之间切换)
JQ动画设置动画，动画1~4是默认动画
$("#wrap li").on("mouseover", function() {
var index = $("#wrap li").index($(this));
$("#slider").stop().animate({
left:index * $(this).width()
}, {
duration: 1000,
easing:"swing"、、需要引入jq的easing的动画效果文件
})
})
网友评论