jQuery

前端框架 专栏收录该内容
1 篇文章 0 订阅

目录

 

定义

引入jQuery

jQuery语法

入口函数

jQuery选择器

jQuery事件

jQuery效果

jQuery HTML DOM操作


定义

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

 

引入jQuery

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

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

<script src="jquery-1.10.2.min.js"></script>

3.在HTML页面使用jQuery

  • 在<script></script>里面使用jQuery
  • 在独立的.js文件中使用jQuery,然后将.js文件引入HTML页面

jQuery语法

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

语法:$(selector).action();
如
隐藏当前元素:$(this).hide();
隐藏所有的<p>元素:$("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>元素

$("p")

2.class选择器

        通过元素的class来选取元素:<p class="num"></p>

$(".num")

3.id选择器

        通过元素的id来选取元素:<p id="num"></p>

$("#num")

更多选择器实例

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

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!

  • 案例

          把 <div> 元素往右边移动了 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。

       例如:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                alert($("#baidu").attr("href"));
            });
        });
    </script>
</head>
<body>
    <p><a href="http://www.baidu.com" id="baidu">百度</a></p>
    <button>显示href属性的值</button>
</body>
</html>

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

2.设置内容和属性

  • text(valueStr),html(valueStr),val(valueStr)
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#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 <b>world!</b> (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.添加元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

luckyliuqs

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值