jQuery学习小记

2018-11-28  本文已影响0人  冯九岁

基本选择器

层次选择器

<div>
  <span id="span1"></span>
  <span id="span2">
    <span id="span3"></span>
  </span>
</div>
<!-- div span 选取的结果是{span1,span2,span3} -->
<!-- div > span 选取的结果是{span1,span2} -->

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

表单选择器

表单对象属性过滤选择器

查找、设置、删除属性

$("div").attr("background");//获取属性值
$("div").attr("background","blue");//设置属性值
$("div").attr({"background":"blue","height":"200px"});//设置多个属性值

$("div").css("background");//获取属性值
$("div").css("background","blue");//设置属性值
$("div").css({"background":"blue","height":"200px"});//设置多个属性值

另外width()方法和height()方法可以直接获取宽度和高度

$("div").addClass("myclass");

$("div").removeAttr("background");

$("div").removeClass("myclass");
$("div").removeClass();

$("div").hasClass("myclass");

创建元素、文本、属性节点

var p=$("<p title='mytitle'>假装是标题</p>")

插入节点

<p>我是内容</p>

$("p").append("<span>我是追加的内容</span>");

结果：

<p>我是内容<span>我是追加的内容</span></p>

<p>我是内容</p>

$("<span>我是追加的内容</span>").appendTo("p");

结果：

<p>我是内容<span>我是追加的内容</span></p>

<p>我是内容</p>

$("p").prepend("<span>我是追加的内容</span>");

结果：

<p><span>我是追加的内容</span>我是内容</p>

<p>我是内容</p>

$("<span>我是追加的内容</span>").prependTo("p");

结果：

<p><span>我是追加的内容</span>我是内容</p>

<p>我是内容</p>

$("p").after("<span>我是追加的内容</span>");

结果：

<p>我是内容</p><span>我是追加的内容</span>

<p>我是内容</p>

$("<span>我是追加的内容</span>").insertAfter("p");

结果：

<p>我是内容</p><span>我是追加的内容</span>

<p>我是内容</p>

$("p").before("<span>我是追加的内容</span>");

结果：

<span>我是追加的内容</span><p>我是内容</p>

<p>我是内容</p>

$("<span>我是追加的内容</span>").insertBefore("p");

结果：

<span>我是追加的内容</span><p>我是内容</p>

删除节点

var $li=$("ul li:eq(1)").remove();//删除节点
$li.appendTo("ul");//将节点添加回去

$("ul li:eq(1)").empty();//此时第一个li标签内无任何内容及节点了

复制节点

$("ul li:eq(1)").clone(true).apppendTo("ul");

替换节点

$("p").replaceWith("<ul><li></li></ul>");

$("<ul><li></li></ul>").replaceAll("p");

包裹节点

<p>我是内容</p>
<p>我是另一个内容</p>

$("p").wrap("<span></span>");

结果：

<span><p>我是内容</p></span>
<span><p>我是另一个内容</p></span>

<p>我是内容</p>
<p>我是另一个内容</p>

$("<span></span>").wrapAll("p");

结果：

<span>
  <p>我是内容</p>
  <p>我是另一个内容</p>
</span>

<p>我是内容</p>

$("p").wrapInner("<span></span>");

结果：

<p><span>我是内容</span></p>

设置、获取文本、HTML和值

$("p").html();

$("p").text("我是内容");

遍历节点

<div>
  <p>我是内容
    <span>我是内嵌的内容</span>
  </p>
  <p>我是另一个内容</p>
</div>

var $div = $("div").children();
$div.length;//返回2，不是3，只包含直接子元素，不包含span

<div>
  <p>我是内容</p>
  <h1>我是另一个内容</h1>
</div>

var $h1=$("p").next();//返回h1元素节点

<div>
  <h1>我是另一个内容</h1>
  <p>我是内容</p>
</div>

var $h1=$("p").prev();//返回h1元素节点

<div>
  <h1>我是另一个内容</h1>
  <p>我是内容</p>
  <ul>我是列表</ul>
</div>

var $h1=$("p").next();//返回h1和ul元素节点集合

<div>
  <div class="div2">
    <p>我是内容</p>
  </div>
</div>

var $div=$("p").closest();//返回class为div2的div元素

<div>
  <div class="div2">
    <p>我是内容</p>
  </div>
</div>

var $div=$("p").parent();//返回class为div2的div元素

<div>
  <div class="div2">
    <p>我是内容</p>
  </div>
</div>

var $div=$("p").parents();//返回两个div元素组成的数组

元素定位

<div>我是内容</div>

var $offset=$("div").offset();
var left=$offset.left;
var top=$offset.top;

<div style="position:relative">
  <div><p>我是内容</p></div>
</div>

var $position=$("p").position();
var left=$position.left;
var top=$position.top;

加载DOM

事件绑定

bind(type data fn);

常见的事件类型：
blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keyup、error
另外，像click、mouseover、mouseout这类常用的事件，可以简写，如下：

$(function(){
  $("h1").mouseover(function(){
    $(this).next().show()
  }).mouseout(function(){
    $(this).next().hide()
  })
})

合成事件

jQuery中有两个合成事件——hover()和toggle()方法

hover(enter,leave);

toggle(fn1,fn2,...,fn);

阻止事件之外的额外问题

$("span").bind("click",function(event){
  //事件处理程序
  event.stopPropagation()
})

$("a").bind("click",function(event){
  //事件处理程序
  event.preventDafault();
  //或者return false;
})

事件对象

$("a").bind("click",function(event){
  //事件处理程序
})

$("a").bind("click",function(event){
  alert(event.type);
})

$("a").bind("click",function(event){
  alert(event.target.href);
})

$("a").bind("click",function(event){
  alert(event.pageX);
  alert(event.pageY);
})

$("a").mousedown(function(event){
  alert(event.which);
})
$("a").keyup(function(event){
  alert(event.which);
})

移除事件

unbind(type,data)
$("a").click(function(){
  $("#btn").unbind("click",fn1);
}

事件的其他用法

$("#btn").triggle("click")；

这段代码可以触发id为btn的按钮的click事件，trigger()方法会触发浏览器的默认事件，如果不想执行浏览器的默认操作，可以使用jQuery中的另一个方法triggerHandler()方法

$(function(){
  $("div").bind("mouseover mouseout",function(){
    $(this).toggleClass("over");
  });
})

这段代码效果和下方代码一样

$(function(){
  $("div").bind("mouseover",function(){
    $(this).toggleClass("over");
  }).bind("mouseout",function(){
    $(this).toggleClass("over")；
  });
})

动画

$("p").toggle(function(){
  $(this).next().hide(600);
},function(){
  $(this).next().show(600);
})

$("p").toggle(function(){
  $(this).next().fadeOut();
},function(){
  $(this).next().fadeIn(600);
})

$("p").toggle(function(){
  $(this).next().slideUp();
},function(){
  $(this).next().slideDown(600);
})

toggle(speed,callback);
$(this).next().toggle();

效果和hide()和show()方法类似

slideToggle(speed,easing,callback);

fadeTo(speed,opacity,callback)
$(this).fadeTo(100,0.3);

fadeToggle(speed,easing,callback);

animate(params,speed,callback);
params：一个包含样式属性及值的映射，如：{left:"400px",height:"500px"}
speed：速度参数，可选
callback：在动画完成后执行的函数，可选

$(function(){
  $("p").click(function(){
    $(this).animate({left:"+=500px"},300)
  });
});

$(this).animate({left:"500px"},300);
$(this).animate({height:"500px"},300);

等效于

$(this).animate({left:"500px"},300).animate({height:"500px"},300);

判断元素是否处于动画状态

if(!$("p").is(":animated")){
  //没有处于动画状态时执行的程序
}

延迟动画

$(this).animate({left:"500px"},200).delay(1000);
上一篇 下一篇

猜你喜欢

热点阅读