jQuery

目录

 

定义

引入jQuery

jQuery语法

入口函数

jQuery选择器

jQuery事件

jQuery效果

jQuery HTML DOM操作

---

定义

       jQuery是一套JavaScript的函数库，不是一种新的语言，也不能取代JS。它能帮助我们快速方便的使用JS。

 

引入jQuery

1.将jQuery库文件添加到项目的js目录中

2.在页面汇总使用script标签引用jQuery库文件

3.在HTML页面使用jQuery

• 在里面使用jQuery
• 在独立的.js文件中使用jQuery，然后将.js文件引入HTML页面

jQuery语法

      jQuery就是通过选取HTML元素，并对选取的元素执行某些操作。

语法：$(selector).action();
如
隐藏当前元素：$(this).hide();
隐藏所有的
元素：$("p").hide();
隐藏所有的class="test"的元素：$(".test").hide();
隐藏所有的id="test"的元素：$("#test").hide();

 

入口函数

1.JavaScript入口函数

window.onload = function(){
    //...
}

        JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。且只会执行一次，如果执行多次，前面的会被后面的覆盖。

2.jQuery入口函数

$(document).ready(function(){
    //...
});
或者
$(function(){
    //...
});

        jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。可以执行很多次，不会覆盖。

jQuery选择器

      注意事项：通过jQuery选择器获取的对象是jQuery封装过后的对象，并不是JS的原生对象。所以JS对象的属性和方法并不能使用

1.元素选择器

       通过HTML的元素名选取元素，如：选取页面中所有的

元素

$("p")

2.class选择器

        通过元素的class来选取元素：

$(".num")

3.id选择器

        通过元素的id来选取元素：

$("#num")

更多选择器实例

元素 元素

$("*")	选取所有元素
$(this)	选取当前HTML元素
$("p.intro")	选取class为intro的 元素
$("p:first")	选取第一个 元素
$("ul li:first")	选取第一个 元素的第一个 元素
$("ul li:first-child")	选取每个 元素的第一个 元素
$("[href]")	选取带有href属性的元素
$("a[target='_blank']")	选取所有target属性值等于"_blank"的元素
$("a[target!='_blanl']")	选取所有target属性值不等于"_blank"的元素
$(":button")	选取所有type="button"的 元素和 元素
$("tr:even")	选取偶数位置的
$("tr:odd")	选取奇数位置的

jQuery事件

常见 DOM 事件：([function])表示事件函数可选，(function)表示事件函数必须

鼠标事件	click([function])	单击事件。如下所示： $("p").click(function(){       $(this).hide(); });
	dblclick([function])	双击事件
	mouseenter([function])	鼠标指针进入元素时事件
	mouseleave([function])	鼠标指针离开元素时事件
	mousemove([function])	获得鼠标指针在页面中的位置
	mouseout[function]()	鼠标指针离开元素时事件
	mouseover([function])	鼠标指针位于元素上方时事件
	mouseup([function])	当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。
	hover([function])	鼠标指针悬停事件
键盘事件	keypress([function])	键盘被按下
	keydown([function])	键盘被按下的过程
	keyup([function])	键盘被松开
表单事件	submit([function])	当提交表单时，会发生 submit 事件。
	change(([function])	当元素的值改变时发生 change 事件（仅适用于表单字段）。 当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
	focus(([function])	当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。
	blur(([function])	当元素失去焦点时发生 blur 事件。
文档/窗口事件	load(function)	当指定的元素已加载时，会发生 load 事件。
	resize([function])	当调整浏览器窗口大小时，发生 resize 事件。 $(window).resize(function(){       //.... });
	scroll([function])	当用户滚动指定的元素时，会发生 scroll 事件。
	unload(function)	当用户离开页面时，会发生 unload 事件。当发生以下情况下，会触发 unload 事件： 点击某个离开页面的链接 在地址栏中键入了新的 URL 使用前进或后退按钮 关闭浏览器窗口 重新加载页面

 

jQuery效果

      speed表示时长(可以取值为slow、fast、毫秒)，callback表示要执行的回调函数

1.隐藏和显示

• hide([speed], [callback])

       用于隐藏元素

• show([speed], [callback]))

       用于显示元素

• toggle([speed], [callback]))

       用于让元素在隐藏和显示之间来回切换

   说明：

1.可选的speed表示隐藏或显示的速度（毫秒单位）

2.可选的callback表示回调函数。 callback如果为函数名()，则会立刻执行该函数；callback如果为匿名函数则在隐藏或显示完成后才执行。 如果$(selector)选中的元素的个数为n 个，callback为函数名()则只会执行1次，如果为匿名函数则执行n次。

2.淡入淡出

• fadeIn([speed], [callback])

              用于淡入已隐藏的元素。

• fadeOut([speed], [callback])

             用于淡出可见元素。

• fadeToggle([speed], [callback])

             用于淡入和淡出，在 fadeIn() 与 fadeOut() 方法之间进行切换。

• fadeTo(speed, opacity, [callback])

            用于将渐变设置为给定的不透明度（值介于 0 与 1 之间）。

3.滑动

• slideDown([speed], [callback])

          用于向下滑动元素。

• slideUp([speed], [callback])

         用于向上滑动元素。

• slideToggle([speed, [callback])

        用于在 slideDown() 与 slideUp() 方法之间进行切换。

4.动画

         animate() 方法用于创建自定义动画。

• 语法

$(selector).animate({params},[speed],[callback]);
必须的params:表示形成动画的CSS属性，多个属性使用逗号分隔
可选的speed:表示动画效果时长
可选的callback:表示动画完成后只需的函数名称

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

• 案例

          把

元素往右边移动了 250 像素如下：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

• animate()使用相对值

        需要在属性值的前面加上 += 或 -=

• animate()使用预定义的值

         比如​​​​​​把属性的动画值设置为 "show"、"hide" 或 "toggle"：

• animate()使用队列功能

         jQuery会依次运行多个 animate() 方法。

• 停止动画

         语法如下：

$(selector).stop([stopAll],[goToEnd]);
可选的stopAll参数：表示是否清除动画队列，不选默认是false
可选的goToEnd参数：表示是否立即完成当前动画，不选默认是false

         因此，默认地，stop() 会清除在被选元素上指定的当前动画。

5.链

      可以把动作/方法链接在一起。如下所示："p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

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

 

jQuery HTML DOM操作

1.获取内容和属性

• 获取内容

text()	返回所选元素的文本内容
html()	返回所选元素的内容（包括HTML标签）
val()	返回表单字段的值

• 获取属性         

attr(params)	用于获取属性值。对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 1.如果有指定相应的属性，返回指定属性值。 2.如果没有指定相应的属性，返回值是空字符串。
prop(params)	用于获取属性值。对于HTML元素自定义的DOM属性，在处理时，使用 attr 方法。 1.如果有指定相应的属性，返回指定属性值。 2.如果没有指定相应的属性，返回值是 undefined。

       例如：

    
    
    


    
百度
    显示href属性的值

         点击按钮后，弹出显示：http://www.baidu.com

2.设置内容和属性

• text(valueStr)，html(valueStr)，val(valueStr)

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

• 回调函数：text(function(index,value){})，html(function(index,value){})，val(function(index,value){})

       回调函数参数index表示被选元素列表中当前元素的下标，value表示原始（旧的）值。然后以函数新值返回希望使用的字符串。

$("#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 world! (index: " + i + ")"; 
    });
});

• attr()

        attr() 方法也用于设置/改变属性值。如下所示：

设置一个属性：
$("button").click(function(){
  $("#text").attr("href","http://www.baidu.com");
});

设置多个属性
$("button").click(function(){
    $("#text").attr({
        "href" : "http://www.baidu.com",
        "title" : "百度首页"
    });
});

      attr()方法也有回调函数，跟上面的html(),text(),val()方法回调函数一样

3.添加元素