前端jQuery简述

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

查看jquery版本
$.fn.jquery

通常DOM加载完成后执行jQuery
//要记住
$(document).ready(function(){});

$(function(){})

语法
$().事件();

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

$("p").click(function(){});

click()//当按钮点击事件被触发时会调用一个函数
dbclick()//当双击元素时
mouseenter()//当鼠标指针穿过元素时
mouseleave()//当鼠标指针离开元素时
mousedown()//当鼠标指针移动到元素上方，并按下鼠标按键时
mouseup()//当在元素上松开鼠标按钮时
hover()//用于模拟光标悬停事件
focus()//当元素获得焦点时
blur()//当元素失去焦点时

jquery效果

1.隐藏/显示

hide(速度，回调函数);
show(速度，回调函数);
toggle(速度，回调函数);
速度：slow,fast,毫秒

$(document).ready(function(){
  $(".hidebtn").click(function(){
    //第二个参数是一个字符串，表示过渡使用哪种缓动函数
    //jQuery自身提供"linear" 和 "swing"
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

2.淡入淡出

fadeIn(速度，回调函数);//淡入已隐藏的元素
fadeOut(速度，回调函数);
fadeToggle(速度，回调函数);
fadeTo(速度，回调函数);//允许渐变为给定的不透明度（值介于 0 与 1 之间）
速度：slow,fast,毫秒

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3.滑动—用于下拉列表

slideDown(速度，回调函数);//向下滑动元素
slideUp(速度，回调函数);//向上滑动元素
slideToggle(速度，回调函数);
速度：slow,fast,毫秒

4.动画

animate({参数},速度，回调函数);
速度：slow,fast,毫秒

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

也可以使用使用相对值
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px',
    fontSize:'3em'
  });
});

使用预定义的值
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

使用队列功能
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

5.停止动画—对所有的效果函数暂停

stop(是否清除动画队列,是否立即完成当前动画) 
是否清除动画队列，默认false，默认不清除队列
是否立即完成当前动画，默认false
默认情况下：只是暂停效果

6.回调函数

通常在上述效果执行后，会再执行回调函数

7.链

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

jquery html

1.获取内容/设置内容

空参数就是获取，有参数就是设置
text() // 设置或返回所选元素的文本内容
html() //设置或返回所选元素的内容（包括 HTML 标记）<xx></xx>这样形式
val() //设置或返回表单字段的值


$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});


回调函数---在里面写function就可以
$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

2.获取属性/设置属性

attr() //方法用于获取属性值

$("button").click(function(){
  alert($("#runoob").attr("href"));
});


设置属性
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});


设置多个属性
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});


回调函数
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

3.添加元素

append() // 在被选元素的结尾插入内容---元素内
prepend() // 在被选元素的开头插入内容
after() // 在被选元素之后插入内容-----元素外
before() // 在被选元素之前插入内容



通常添加文本
$("p").append("追加文本");
$("img").after("在后面添加文本");


也可以添加新元素
function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);       // 追加新元素
}

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

4.删除元素

remove()// 删除被选元素（及其子元素）
empty() //从被选元素中删除子元素----只删子元素


过滤被删除的元素
$("p").remove(".italic");//只删除class为italic的元素

5.css类

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


$("h1,h2,p").addClass("important  blue");//important和blue是类名

6.css()方法

css("属性");

获得
$("p").css("background-color");//得到背景属性值

设置
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

7.尺寸

width()//不包括内边距、边框或外边距
height()//不包括内边距、边框或外边距
innerWidth()//包括内边距
innerHeight()//包括内边距
outerWidth()//包括内边距和边框
outerHeight()//包括内边距和边框

jquery 遍历

1.遍历父元素

parent()//选中直接父元素
parents()//所有祖先元素,包括根元素
parentsUntil()//介于两个给定元素之间的所有祖先元素


$("span").parent();
$("span").parentsUntil("div");//返回span与div之间的元素

2.遍历后代元素

children()//被选元素的所有直接子元素
find()//被选元素的后代元素，一路向下直到最后一个后代


可选参数来过滤对子元素的搜索
$("div").children("p.1");//子元素为p且class为1的


使用find，通常我们不找所有的子元素，而是稍微限定一下需要哪个
$(document).ready(function(){
  $("div").find("span");
});

3.遍历兄弟元素

siblings()//所有兄弟元素
next()//下一个兄弟元素
nextAll()//下面所有兄弟元素
nextUntil()//在某区间里的所有兄弟元素
prev()//前面兄弟元素
prevAll()//前面所有兄弟元素
prevUntil()//前面在某区间里的所有兄弟元素



也可以
$("h2").siblings("p");//属于 <h2> 的兄弟元素的所有 <p> 元素

$("h2").nextUntil("h6");//<h2> 与 <h6> 元素之间的所有兄弟元素

4.过滤

first()//返回被选元素的首个元素
last() //被选元素的最后一个元素
eq()//被选元素中带有指定索引号的元素

filter()//返回一个匹配的
not()// 返回一个不匹配的


例子：
$("div p").last();
$("p").eq(1);//选取第二个 <p> 元素

$("p").filter(".url");//返回带有类名 "url" 的所有 <p> 元素
$("p").not(".url");//返回不带有类名 "url" 的所有 <p> 元素