jQuery基本用法

作为前端必备知识点，怎么能不会Jquery呢，今天我们来学一下Jquery吧~

jQuery基本语法

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）”查询”和”查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

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

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

// 实例
$("p").hide();  //元素选择器
$("#test").hide();  //id选择器
$(".test").hide();  // class选择器

jQuery获取内容或属性

• text() 设置或返回所选元素的文本内容
• html() 设置或返回所选元素的内容（包括 HTML 标记）
• val() 设置或返回表单字段的值
• attr() 方法用于获取属性值。

//获取元素文本内容
$("#btn1").click(function(){ 
    alert("Text: " + $("#test").text()); 
});

//设置元素文本内容
$("#btn1").click(function(){ 
    $("#test1").text("Hello world!"); 
});

//获取元素属性
$("button").click(function(){ 
    alert($("#runoob").attr("href")); 
});

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

//text()、html() 以及 val() 的回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
$("#btn2").click(function(){   
    $("#test2").html(function(i,origText){ 
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

操作表单对象属性

Jquery提供了两个方法：prop(),attr()。
官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

<input type="checkbox"  id="checkId" checked=""/>
<input type="text"  id="textId" value="abc" valuebak="" />
<script>
$(function() { 
     var checkValue = $("#checkId").prop('checked');  //获取复选框checked的属性值
     console.log(checkValue);
     var textValue = $("#textId").attr('valuebak');   //获取输入框valuebak的属性值
     console.log(textValue );
     $("#checkId").prop('checked',’true’);            //给复选框checked的属性赋值
     $("#textId").attr('valuebak',’abc’);             //给输入框valuebak的属性赋值
}); 
</script>

jQuery添加元素

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

append/prepend和after/before有什么区别呢？

• append

<p>
    <span class="s1">s1</span>
</p>
<script>
    $("p").append('<span class="s2">s2</span>');
</script>

结果是这样的:

1
2
3
4

<p>
    <span class="s1">s1</span>
    <span class="s2">s2</span>
</p>

• after

<p>
    <span class="s1">s1</span>
</p>
<script>
    $("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:

1
2
3
4

<p>
    <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

总结：append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加。

jQuery删除元素

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

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

remove()和hide()的区别
用 hide 和用 remove 都可以得到相同效果，但两者有区别，当我们用hide 时，事件触发后HTML代码中第一个 div 多了一个 “display：none；”属性，并且是由此属性来实现页面隐藏，源代码还存在；而用 remove 时，是通过移除第一个 div 及其里面的内容来实现页面隐藏的，源代码已被删除。当需要实现页面隐藏效果时，推荐使用 hide()。

jQuery操作css

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

$("body div:first").addClass("important blue");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery对象绑定事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时触发 keypress 事件”。

<div  id="btId" name="btName"></div>
<script>
$(function() { 
     $('#btId').bind('click',function(){
        alert(‘click me!’);
     });
}); 
</script>

常用的 jQuery 事件方法

• $(document).ready() 允许我们在文档完全加载完后执行函数。
• 鼠标事件：
  • click() 当按钮点击事件被触发时会调用一个函数。
  • dblclick() 当双击元素时，会发生 dblclick 事件。
  • mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件。
  • mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。
  • mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
  • mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
  • hover() 用于模拟光标悬停事件。
• 键盘事件：
  • keypress() 当按钮被按下时发生该事件。keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）
  • keydown() 当键盘键被按下时发生 keydown 事件。
  • keyup() 当键盘键被松开时发生 keyup 事件。
• 表单事件：
  • submit() 当提交表单时，会发生 submit 事件。该事件只适用于
    元素。
  • change() 当元素的值改变时发生 change 事件（仅适用于表单字段）。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
  • focus() 当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。
  • blur() 当元素失去焦点时，发生 blur 事件。
• 文档/窗口事件：
  • resize() 当调整浏览器窗口大小时，发生 resize 事件。
  • scroll() 当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

//当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
$("p").click(function(){ 
    $(this).hide(); 
});

//当提交表单时，显示警告框：
$("form").submit(function(){
    alert("提交");
});

//当 <input> 字段获得焦点时调整span标签的样式
$("input").focus(function(){
    $("span").css("display","inline").fadeOut(2000); 
});

//对浏览器窗口调整大小进行计数
$(window).resize(function(){
    $('span').text(x+=1); 
});

//对元素滚动的次数进行计数：
$("div").scroll(function(){ $("span").text(x+=1); });

jQuery常用效果

• hide() 和 show() 隐藏和显示 HTML 元素

  $(selector).hide(speed,callback);
  可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
  可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
  第二个参数是一个字符串，表示过渡使用哪种缓动函数。

$(document).ready(function(){   
    $(".hidebtn").click(function(){     
        $("div").hide(1000,"linear",function(){ 
            alert("Hide() 方法已完成!"); 
        });
    }); 
});

• toggle() 切换 hide() 和 show() 方法。
• fadeIn() 和 fadeOut() 用于淡入已隐藏的元素/淡出可见元素。
• fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

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

• fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

  $(selector).fadeTo(speed,opacity,callback);
  必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

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

• slideDown() 和slideUp() 用于向下/向上滑动元素。
• slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。
• animate() 方法用于创建自定义动画。

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

• stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

jQuery获取页面尺寸

• width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
• height() 设置或返回元素的高度（不包括内边距、边框或外边距）。
• innerWidth() 返回元素的宽度（包括内边距）。
• innerHeight() 返回元素的高度（包括内边距）。
• outerWidth() 返回元素的宽度（包括内边距和边框）。
• outerHeight() 返回元素的高度（包括内边距和边框）。

$("button").click(function(){ 
    var txt=""; 
    txt+="div 的宽度是: " + $("#div1").width() + "</br>"; 
    txt+="div 的高度是: " + $("#div1").height(); 
    $("#div1").html(txt); 
});

jQuery遍历

jQuery 遍历，意为”移动”，用于根据其相对于其他元素的关系来”查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

• parent() 返回被选元素的直接父元素。
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
• parentsUntil() 返回介于两个给定元素之间的所有祖先元素。