test

标签：function 返回元素 ready test document click

Part 1. JQuery 效果

1.1 选择器

$("p")
$(".test")
$("#test")
$("button").click(function(){
  $("p").hide();
});

1.2 事件

click、dbclick、mouseenter/leave/down/up、hover、focus、blur

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

1.3 效果&动画

显示隐藏：hide、show、toggle、

淡入淡出：fadeOut、fadeIn、fadeToggle、fadeTo

滑入滑出：slideDown、slideUp、slideToggle（设置display: none）

动画：animate（默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！）

语法：$(selector).hide(speed,callback);

$("#show").click(function(){
  $("p").toggle(1000,function(){
    alert('OK')
  });
});

$("#flip").click(function(){
  $("#panel").slideToggle();
});
//动画：
$("button").click(function(){
  $("div").animate({
    left:'250px',
    bottom: '-250px',
    height: '+=100px',
    width: '+=100px'
  });
});

1.4 设置css

$('#box1').css('color','green')
$('#box2').css({
  'color': 'green',
  fontSize: '20px'
})

Part 2. JQuery HTML DOM操作

（ Document Object Model 文档对象模型）

jQuery 中非常重要的部分，就是操作 DOM 的能力，jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

2.1 .text() .html() .val() 获取、设置内容

$("#btnA").click(function(){
  alert("Text: " + $("#A").text()); //获取
  $("#A").text("Hello world!");   //设置
});
$("#btnB").click(function(){
  alert("HTML: " + $("#B").html());
  $("#B").html("<b>Hello world!</b>");
});
$("#btnC").click(function(){
  alert("值为: " + $("#C").val());
  $("#C").val("RUNOOB");
});

回调函数

text()、html() 以及 val()的回调函数有两个参数：

原始（旧的）值
被选元素列表中当前元素的下标

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return  origText + " " + i; 
    });
});

2.2 .attr() 获取、设置属性

$("button").click(function(){
  alert($("#runoob").attr("href")); //获取attr
  $("#runoob").attr({ //设置attr
    "href" : "http:xxx",
    "title" : "jQuery 教程"
  });
});

回调函数

也是相同两个参数

原始（旧的）值
被选元素列表中当前元素的下标

2.3 添加元素.append() .prepend() .after() .before()

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

**.append() .prepend() **

//使用 HTML 标签创建文本
var txt1="<p>文本-1。</p>";
//使用 jQuery 创建文本
var txt2=$("<p></p>").text("文本-2。");
//使用 DOM 创建文本 text with DOM
var txt3=document.createElement("p");
txt3.innerHTML="文本-3。"; 
$("body").append(txt1,txt2,txt3);

$("p").append("追加文本");
$("p").prepend("在开头追加文本");

.after() .before()

$("img").after("在后面添加文本");
$("img").before("在前面添加文本")

2.4 删除元素 .remove() .empty()

假如你扔掉了一瓶水，那就是 remove。

假如你倒掉了一瓶水，那就是 empty。

$("#div1").remove();
$("#div1").empty();

过滤被删除的元素

$("p").remove(".italic"); //删除 class="italic"的所有 <p> 元素：

2.5 操作CSS .addClass() .removeClass .toggleClass() .css()

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

**.addClass() .removeClass .toggleClass() **

<style>
  .class1{
    color:blue;
  }
  .class2{  }
</style>
<script>
  $("button").click(function(){
    $("div").toggleClass("class1 class2");
});
</script>

.css() 设置css属性

$("p").css("background-color","yellow");
$("p").css({
  "background-color":"yellow",
  fontSize:"200%"
});

2.6 JQuery 尺寸

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

**width() 和 height() **

设置或返回元素的宽度/高度（不包括内边距、边框或外边距）

$("#div1").width()
$("#div1").height();

Part 3. JQuery 遍历

3.1 向上遍历 .parent() .parents() .parentsUntil()

parent() 方法返回被选元素的直接父元素

$(document).ready(function(){
  $("span").parent();
});

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 <html>

$(document).ready(function(){
  $("span").parents();
});
$(document).ready(function(){
  $("span").parents("ul"); //过滤搜索
});

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

3.2 向下遍历 .children() .find()

children() 方法返回被选元素的所有直接子元素

$(document).ready(function(){
  $("div").children();
  $("div").children("p.1"); //返回类名为 "1" 的所有 <p> 元素，且是 <div> 的直接子元素：
});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

$(document).ready(function(){
  $("div").find("*"); //返回 <div> 的所有后代：
  $("div").find("span"); //返回 <div> 后代的所有 <span> 元素：
});

3.3 同胞遍历 .siblings() .next() .nextAll() .nextUntil()

siblings() 方法返回被选元素的所有同胞元素

next() 方法返回被选元素的下一个同胞元素

nextAll() 方法返回被选元素的所有跟随的同胞元素

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素

$(document).ready(function(){
  $("h2").siblings();
  $("h2").siblings("p");
});

$(document).ready(function(){
  $("h2").next();
});

$(document).ready(function(){
  $("h2").nextAll();
});

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

.prev() .prevAll() .prevUntil() 方法

与上面的方法类似
只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）

3.4 过滤遍历 .first() .last() .eq() .filter()

first() 方法返回被选元素的首个元素

last() 方法返回被选元素的最后一个元素

$(document).ready(function(){
  $("div p").first(); //选取首个<div>内的第一个<p>
  $("div p").last();
});

eq() 方法返回被选元素中带有指定索引号的元素

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个<p>元素：

$(document).ready(function(){
  $("p").eq(1);
});

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

not() 方法返回不匹配标准的所有元素（与上相反）

$(document).ready(function(){
  $("p").filter(".url");//返回带有类名 "url" 的所有p
  $("p").not(".url");   //返回不带有类名 "url" 的所有p
});

PS.

链（chaining）

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

标签：function,返回,元素,ready,test,document,click
From： https://www.cnblogs.com/lin77/p/16803558.html