网页编程之jQuery常用知识点整理

网页编程之jQuery常用知识点整理

备注:本文的知识点针对后端编程人员的需求进行整理,所涉知识较为基础。

1.1 jQuery是什么

jQuery是一个JavaScript代码库,极大的简化了JavaScript编程。

1.2 如何在网页中添加jQuery

  • 从jquery.com下载jQuery库

  • 从CDN中载入jQuery

  • jQuery有两个版本

    • Production version :用于实际的网站中,精简了注释和源码,体积小。

    • Development version:用于测试和开发,包含注释和源码,体积大。

jQuery 库是一个 JavaScript 文件,可以使用 HTML 的 script标签引用它:

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

1.3 jQuery语法

通过jQuery语法,可以查询HTML元素,并对其执行一些操作。

1.3.1 基础语法

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

基础语法: $(selector).action()

  • 美元符号定义jquery
  • 选择符(selector)用于查询和查找HTML元素
  • 通过action()方法对元素进行操作,这里的action()方法是泛指,并非实际方法。

1.3.2 文档就绪事件

所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){
 
   // jQuery 代码...
 
});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数,操作可能失败。

jQuery 入口函数与 JavaScript 入口函数的区别:

  • jQuery的入口函数是在HTML所有标签(DOM)都加载之后就会去执行。

  • JavaScript的window.onload事件是等到所有内容包括外部图片之类的文件加载完毕
    才去执行。

1.4 jQuery选择器

jQuery 选择器对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

元素选择器:通过元素名选取元素

获取p标签元素

    $("p")

#id选择器:通过元素的id属性获取元素

获取id为test的元素

    $("#test")

.class选择器:获取指定的class元素

获取class为test的元素

    $(".test")

其他选择器:

选择器名选择器描述
$("*")选取所有元素
$(this)选取当前 HTML 元素
$(“p.intro”)选取 class 为 intro 的 p标签元素
$(“p:first”)选取第一个p元素
$(“ul li”)选取所有ul元素下的li元素
$(“ul li:first”)选取第一个ul元素下的第一个li元素
$(“ul li:first-child”)选取每个ul元素的第一个li元素
$("[href]")选取带有 href 属性的元素
$(“a[target=’_blank’]”)选取所有 target 属性值等于 “_blank” 的 a元素
$(":button")选取所有 type=“button” 的 input元素 和 button元素
$(“tr:even”)选取偶数位置的 tr 元素
(“tr:odd”)选取奇数位置的 tr元素

1.5 jQuery事件

jQuery是为事件特别设计的。

1.5.1 什么是事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当HTML中发生某些事件时所调用的方法,比如:

  • 在元素上移动鼠标

  • 单机某个按钮

  • 按下键盘某个按键

在事件中经常使用术语"触发"(或"激发")例如: “按下按键时触发 keypress 事件”。

常见DOM事件:

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
hover

1.5.2 jQuery事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件:

$("p").事件();

如果事件触发后需要执行操作,可以这样写:

$("p").事件(function(){
  // 事件触发后执行的代码!!
});

1.5.3 jQuery事件绑定

bind()方法

bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

语法:

$(selector).bind(event,function)

示例:

 $("p").bind("click",function(){
    alert("这个元素被单击。");
  });

在上述示例中,当鼠标单机p元素时就会触发函数,弹出弹窗。

one()方法

one() 方法为被选元素添加一个或多个事件处理程序,并规定当事件发生时运行的函数。

当使用 one() 方法时,每个元素只能运行一次事件处理程序函数。

语法:

$(selector).one(event,function)

示例:

 $("p").one("click",function(){
    alert("这个元素被单击。");
  });

在上述示例中,当鼠标单机p元素时就会触发函数,弹出弹窗。
但是这个事件仅可触发一次,第二次点击时,将会失效。

1.6 jQuery 添加元素

通过 jQuery,可以很容易地添加新元素/内容。

1.6.1 jQuery append()方法

jQuery append() 方法在被选元素的结尾插入内容(仍然在元素的内部)。

$("p").append("追加文本");

1.6.2 jQuery prepend()方法

jQuery prepend() 方法在被选元素的开头插入内容(仍然在元素的内部)

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

1.6.3 通过append()和prepend()添加多个元素

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。

下面是使用append()方法向body标签末尾添加多个文本的示例
同样的也可以使用prepend()方法向body标签头部添加多个文本

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

1.6.4 jQuery after()和before()方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

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

1.6.5 通过after()和before()添加多个元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。

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);          // 在图片后添加文本
}

1.7 jQuery 获取或设置内容和属性

Query 拥有可操作 HTML 元素和属性的强大方法。

1.7.1 获得内容 -text()、html()、val()

  • text()-设置或返回所选元素的文本内容,类似于js中的innnertext
  • html()-设置或返回所选元素的内容(包括HTML标记),类似于js中的innnerhtml
  • val()-设置或返回表单字段的值,类似于js中的value

下面是一组示例:

$("#test").text());
$("#test").html());
$("#test").val());

1.7.2 获取属性 -attr()

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

attr(“param”)方法中的参数是元素的属性。

如果没有相应的属性,则返回undefined。

比如获得id为test的超链接标签的href属性:

$("#test").attr("href");

与此方法比较类似的一个方法是**prop()**方法:

  • 对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。

  • 对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。

  • 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()方法。

使用prop()方法时,如果没有相应的属性,返回空字符串“”。

1.7.3 设置内容和属性

对于text()、html()、val()三个方法,只需给定相应的参数即可设置或改变元素的值。

$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("RUNOOB");

使用attr()也可以设置和改变元素的属性。

只需在参数中给定属性和要改变的值即可。

例如:将id为test的超链接标签的href属性设置为百度的链接。

 $("#test").attr("href","http://www.baidu.com");

1.8 jQuery删除元素

通过 jQuery,可以很容易地删除已有的 HTML 元素。

1.8.1 删除元素和内容

如果需要删除元素和内容,jQuery中提供了两个方法:

  • remove() - 删除被选元素本身及其下的所有子元素

    $("#div1").remove();
    
  • empty() - 仅删除被选元素的子元素

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

1.8.2 过滤需要被删除的元素

jQuery remove() 方法也可接受一个参数,允许对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面这个示例将移除所有id为div1下的class为italic的p元素。

<!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(){
    $("#div1>p").remove(".italic");
  });
});
</script>
</head>
<body>
	<div id="div1">
        <p>这是一个段落。</p>
        <p class="italic"><i>这是另外一个段落。</i></p>
        <p class="italic"><i>这是另外一个段落。</i></p>
        <button>移除所有  class="italic" 的 p 元素。</button>
    </div>
</body>
</html>

需要注意的是,这样的写法是错误的:

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

子元素的过滤器需要被包含在父元素的过滤器当中
这种写法父元素首先会选出id为div1的元素
但这些元素中并没有包含class为italic的元素。

1.9获取并设置CSS类

通过 jQuery,可以很容易地对 CSS 元素进行操作。

jQuery 拥有若干进行 CSS 操作的方法。

1.9.1 jQuery addClass()方法

该方法用于向被选元素添加一个或者多个类(class属性),从而为其添加已指定的css样式。

.important{
	height:100px;
	width:100px;
}
$("div").addClass("important");

在上述示例中,我们实现规定好了一种样式
通过改变div元素的class属性,为其指定了样式。

1.9.2 jQuery removeClass()方法

该方法用于从被选元素删除一个或多个类(class属性),从而删除已匹配的css样式。

 $("div").removeClass("important");

1.9.3 jQuery toggleClass()方法

顾名思义,toggle是开关、切换的意思。
该方法用于对被选元素进行添加或删除类的切换操作。

$("div").toggleClass("important");

如果被选择的元素没有class属性,则为其添加class=“important”
如果被选择的元素已经有了class=”implortant“属性,则将其删除

1.9.4 jQuery css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值,则需给定指定的属性作为参数。

获取p元素的背景颜色:

$("p").css("background-color");

如果在css()方法中指定了两个参数,则可以设置该属性。

第一个参数为属性名,第二个参数为属性值。

设置p元素的背景颜色为黄色:

$("p").css("background-color","yellow");

当需要设置多个css属性时,可以使用json,语法格式如下:

css({“propertyname”:“value”,“propertyname”:“value”,…});

示例:

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

上述示例中,为所有p元素 添加了背景颜色和字体的样式。

1.10 jQuery 替换元素

有两个常用的替换元素的方法,replaceWith() replaceAll()

1.10.1 jQuery replaceWith()方法

replaceWith() 方法把被选元素替换为新的内容。

语法:

$(selector).replaceWith(*content,*function(index))

说明:

  • content:必需参数。规定要插入的内容(可以包含html标签)

    • 可能的值:
      • HTML元素
      • jQuery对象
      • DOM元素
  • function(index):可选参数。规定返回替换内容的函数。

    • index:返回集合中元素的index位置。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replaceWith</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            //将第一个P元素内的文本替换为HelloWorld。
            $("p:first").replaceWith("Hello world!");
            //如果在参数内加上HTML标签也是可以的。
            //$("p:first").replaceWith("<b>Hello world!</b>");
            //这样的话气体会加粗
        });
    });
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>使用新文本替换第一个P元素</button>
</body>
</html>

1.10.2 jQuery replaceAll方法

replaceAll() 方法把被选元素替换为新的 HTML 元素。

语法:

$(content).replaceAll(selector)

说明:

  • content:必需。规定要插入的内容(必须包含HTML标签)。
  • selector:必需。规定哪一个元素将被替换。
  • 通过语法可以看出replaceAll方法实际是将HTML转成
    了jQuery对象然后替换了被选择的内容,所以其必须
    包含HTML标签,而不能是单纯的文本。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replaceAll</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            //这里一定不能缺少HTML标签,否则无法替换。
            $("<span><b>Hello world!</b></span>").replaceAll("p:last");
        });
    });
</script>
</head>
<body>
    <button>用一个span元素替换最后一个p元素</button><br>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值