")//创建新标签 ...">

JQ随笔

作者: 久久归移 | 来源:发表于2016-12-15 21:59 被阅读0次

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的动画效果文件

})

})


相关文章

网友评论

      本文标题:JQ随笔

      本文链接:https://www.haomeiwen.com/subject/dsugmttx.html