JavaWeb1——第 4 章 jQuery

最新推荐文章于 2024-07-23 12:35:43 发布

Ane-z

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量196

点赞数

分类专栏： JavaWeb 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_51072448/article/details/119981186

版权

JavaWeb 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

第 4 章 jQuery

1．简介

1）jquery 是目前最流行的一种 JavaScript 库。
2）所谓 JavaScript 库就是对 JavaScript 进行进一步封装和开发，然后将其打包为 js 文件方便重复调用。jquery 也可称为 JavaScript 框架。
3） jquery 的主要功能是简化 JavaScript 的开发工作。并且基本解决了浏览器的兼容问题

2．核心函数

2.1 $是 jQuery 的核心函数。

jquery 的大部分功能都是核心函数来完成的。

2.2 核心函数根据实参的不同，有四种不同的用法

传入一个函数作为参数 如：

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

作用一样，在文档加载完成后调用

传入一个选择器的字符串 如：

$(“#id”)
document.getElementById(“id”)

作用一样，从文档查询需要的元素

传入一段 HTML 代码 如：

$(“<li>广州</li>”)

作用：创建一个 li 对象

传一个 DOM 对象如：

var ele=document.getElementById(“abc”); 
var x= $(ele);

作用：将一个 js 获取的 dom 对象转化为一个 jquery 对象。这样就可以使用 jquery 里面的方法了

3． jQuery 对象与 dom 对象

3.1 dom 对象

dom 对象是原生的网页文档对象。可以通过 js 获取到文档对象。然后进行增删改操作。

通过原生 JS 获取的对象是 DOM 对象

3.2 jQuery 对象

jquery 对象是使用 jquery 包装后的文档对象。只有这个对象才可以调用 jquery 的方法。 dom 对象不是 jquery 的对象，所以我们不能调用 jquery 的方法，我们需要将其包装为 jquery 对象才可

通过 jQuery 核心函数包装过的对象叫做 jQuery 对象

3.3 比较

1）两种对象之间不能互相调用对方的方法
2）命名上的区别： jQuery 对象命名时习惯加上$,加以区分。

3.4 转换

1）DOM --> jQuery
将一个 js 获取的 dom 对象转化为一个 jquery 对象
eg:

var ele=document.getElementById(“abc”); 
var x= $(ele);

2）jQuery --> DOM
jQuery 对象[索引]
jQuery 对象的本质就是 DOM 对象的数组，所以可以通过给对象加下标的形式获取数组中的 DOM 对象
eg:

var domObj=jqObj[0]

4． jQuery 选择器

4.1 选择器简介

1）jQuery 的最厉害的地方就是它拥有众多的选择器。
2）jQuery 的选择器主要是集合 CSS 和 xPath 部分语法。
3）选择器可以很方便的获取到页面中元素。

4.2 基本选择器

基本选择器是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。所谓的网页中id只能使用一次的意思是说，一个网页中的id是不可以重复的，也就是具有唯一性。

1、#id

用法: $("#myDiv");    返回值  单个元素的组成的集合
说明: 这个就是直接选择html中的id="myDiv"

2、Element

用法: $("div")     返回值  集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div, input, a,p等等.
eg:
$("p") //所有 <p> 元素

3、class

用法: $(".myClass")      返回值  集合元素
说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(因为在同一html页面中
class是可以存在多个同样值的)
eg:
$(".intro") //所有 class="intro" 的元素

4、*

用法: $("*")      返回值  集合元素
说明: 匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN
选择器分组 $(“选择器 1 , 选择器 2 , 选择器 N”)

用法: $("div,span,p.myClass")    返回值  集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合
并到一个结果内。其中p.myClass是表示匹配元素

p class="myClass"

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery选择器</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        div{
            background-color:dodgerblue ;
            width: 100%;
            height: 50px;
        }
        span{
            background-color:pink ;
            width: 100%;
            height: 20px;
        }
    </style>
    <script>
        $(function () {
            $("#id1").click(function () {
                $("span,#myDivId").css("backgroundColor","green");
            });
        });
    </script>
 
</head>
<body>
    <input id="id1" type="button" value="改变标签为span的元素，或者id为myDivId的元素背景变为绿色">
    <hr><hr>
    <div >
        这是div
        <span >
        这是span
        </span>
    </div>
    <br>
    <div id="myDivId">
        这是div,id为myDivId
    </div>
    <br>
    <span id="myspanid">
        这是span,id为myspanid
    </span>
</body>
</html>

4.3. 层级选择器

只有这个方法返回的是JQuery对象才能进行链式操作。如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。

1 、ancestor descendant

用法: $("form input") ;   返回值  集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要和"arent > child"区分开。
祖先元素中查找，包含子元素和子元素的子元素。

2、parent > child

用法: $("form > input") ;    返回值  集合元素
说明: 在给定的父元素下匹配所有子元素。注意:要区分好后代元素与子元素
父元素中查找，只包含子元素，不包含子元素的子元素。

3、prev + next

用法: $("label + input") ;   返回值  集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings

用法: $("form ~ input") ;    返回值  集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.

注意:

是匹配之后的元素,不包含该元素在内,并且JQuery的siblings方法匹配的是和prev同辈的元素,其后辈元素不被匹配.

(“prev ~ div”) 选择器只能选择 "# prev"元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

4.4. 过滤选择器

5． jQuery 筛选

以已经查到的元素为标准，再进行查询。DOM 查询

5.1 过滤

eq(index|-index) 获取第 N 个元素

$(“p”).eq(1)；

first() 获取第一个元素

$(“p”).first();

last() 获取最后一个元素

$(“p”).last();

5.2 查找

children([expr]) 获取所有的子元素（不包括孙子<后代元素>）
find(expr|obj|ele) 找出所有的后代元素
next([expr]) 相邻后一个的元素
parent([expr]) 获取某元素的直接父元素
parents([expr]) 获取某元素的祖先元素，不包含根元素
prev([expr]) 获取元素的前一个元素

6． jQuery 事件

6.1 常见事件列表

blur([[data],fn])
bind()

可以给元素一次性绑定一个或多个事件（绑定多个时用空格隔开）

$("h5").one("click mouseover mouseout",funtion(){
	console.log("这是bind绑定的事件");
});

change([[data],fn])
click([[data],fn])

它可以绑定单击事件，也可以触发单击事件

dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])

鼠标移入事件

mouseout([[data],fn])

鼠标移出事件

mouseover([[data],fn])
mouseup([[data],fn])
one()

使用上跟bind一样，但是one方法绑定的事件只能响应一次

$("h5").one("click mouseover mouseout",funtion(){
	console.log("这是one绑定的事件");
});

resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
unbind()

跟bind方法相反的操作，解除事件的绑定

$("h5").unbind("click mouseover");

$("h5").unbind(); //都删除

live()

也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出
来的也有效

$("h5").live("click",function(){
	alert('h5单击事件 == live方法绑定');
});

$('<h5 class = "head">什么是jQuery？</h5>').appendTo( $("#panel"));

6.2 事件绑定

1）使用事件对应的函数进行绑定如：

 $(“#btn”).click(function(){ 
 	alert(“我被点击啦！”); 
 	});

2）使用 bind()绑定事件：
用法：元素.bind(事件名,[参数],回调方法) 如：

 $("p").bind("click", function(){ 
 	alert( $(this).text() ); 
 	});

可以绑定多个事件，多个事件用空格隔开如：

$('#foo').bind('mouseenter mouseleave', function() { 
	$(this).toggleClass('entered'); 
	});

3）绑定一个一次性的事件，事件只会触发一次。one()；如：

$("p").one("click", function(){ 
	alert( $(this).text() )
	});

4）为当前的对象以及以后创建的对象都绑定此事件如：

$("p").live("click", function(){ 
	alert(“我是 p！”); 
	});

6.3 解除绑定

使用 unbind()方法解除事件绑定。

1）不传参数，取消当前元素的所有事件如：

$("p").unbind()

2）传递参数，取消某个事件如：

$(“p”).unbind(“click”)

3）传递多个参数，用空格隔开：取消一组事件如：

$(“p”).unbind(“click mouserover”);

6.4 事件冒泡

父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去
响应。

例子：

<div>
	<p>你好<p> 
<div>

为 div 和 p 同时绑定点击事件。当点击 p 的时候，div 的点击事件也会被触发 ·

$(“div”).click(function(){
	alert(“我是 div”)
	}); 
$(“p”).click(function(){
	alert(“我是 p”)
	});

6.4.1、阻止事件冒泡

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
eg：

$(“div”).click(function(){
	alert(“我是 div”)
	}); 
$(“p”).click(function(){
	alert(“我是 p”)
	return false;
	});

当我们点击 p 的时候,先弹出我是 p，又弹出我是 div。阻止事件冒泡： return false；即可。

6.5、事件对象

7．dom 增删改

7.1 文档操作

对 dom 对象的增删改

内部插入

append(content|fn)：父.append(子)：
父元素的最后插入子元素 

prepend(content|fn)：父.prepend(子)：
父元素的最前面插入子元素

appendTo(content)：子.appendTo(父)：
子元素添加到父元素的最后 

prependTo(content)： 子.prependTo(父)：
子元素添加到父元素的最前面

外部插入

after(content|fn) ：A.after(B)：
a 的后边插入 b 

insertAfter(content) ：A.insertAfter(B)：
把 a 插入到 b 后边

before(content|fn) ：A.before(B)：
a 的前边插入 b 

insertBefore(content) ：A.insertBefore(B)：
把 a 插入到 b 的前边

替换

replaceWith(content|fn) ：A.replaceWith(B)：
A 被 B 替换（A 不存在,B 存在） 

replaceAll(selector) ：A.replaceAll(B)：
A 替换所有 B（B 不存在，A 存在）

删除

empty() ：A.empty()：
将 A 元素下的子元素全部删除（将 A 置空，子元素没有，A 还在） 
remove([expr]) ：A.empty()：
将 A 元素删除（A 不存在）

复制

clone([Even[,deepEven]]) ：A.clone()：
克隆 A 元素并选中克隆的副本

7.2 属性操作

对 dom 对象属性的增删改

属性

attr(name|pro|key,val|fn)
获取属性值：$("img").attr("src");
设置属性值：$("img").attr("src","test.jpg");
设置多属性：$("img").attr({ src: "test.jpg", alt: "Test Image" });
removeAttr(name)
移除属性：$("img").removeAttr("src");
prop(name|pro|key,val|fn)1.6+
一般用来操作内置属性
获取属性值：$("input[type='checkbox']").prop("checked");
设置属性值：$("input[type='checkbox']").prop("checked",true);
设置多属性：$("input[type='checkbox']").prop({ disabled: true});
removeProp(name)1.6+
移除属性：$('div').removeProp('style')

7.2.1 CSS 类

addClass(class|fn) ：
A.addClass(“selected1 selected2”)：为 A 添加两个 class
removeClass([class|fn]) ：
A.removeClass(“selected1 selected1”)：删除 A 的两个 class，
A.removeClass()：删除 A 的所有 class
toggleClass(class|fn[,sw]) ：
A.toggleClass(“highlight”): 切换 A 的 class，如果有 highlight 移除，如果没有添加

7.2.2 HTML 代码/文本/值

html([val|fn]) ：

获取 html 内容：A.html()；

设置 html 内容：A.html(“<a href=’#’>链接</a>”);
text([val|fn])

获取文本内容：$('p').text();

设置文本内容：$("p").text("Hello world!");
val([val|fn|arr])

获取表单元素值：$("input").val();

设置表单元素值：$("input").val("hello world!");

7.3 css 操作

对 dom 对象样式的增删改

7.3.1 CSS

css(name|pro|[,val|fn]) ：
获取 css 值：$("p").css("color");
设置 css 值：

$("p").css({ color: "#ff0011", background: "blue" }); $("p").css("color","red");

7.3.2 位置

offset([coordinates])
position()
scrollTop([val])
scrollLeft([val])

7.3.3 尺寸

heigh([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([soptions])
outerWidth([options])

8． jQuery 动画

1）show([speed,[easing],[fn]]);
显示隐藏的元素：

$("p").show()； 
$("p").show("slow");

2）hide([speed,[easing],[fn]]);
隐藏显示的元素:

$("p").hide()；
$("p").hide("slow");

3）toggle([speed],[easing],[fn]);
切换元素的显示状态
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；
如果元素是隐藏的，切换为可见的。

$(‘p’).toggle(); //显示隐藏 p 
$(‘p’).toggle("slow"); 
$('#foo').toggle(showOrHide); 
// showOrHide 是个 true 或者 false 值，如果这个参数 为 true ，那么匹配的元素将显示;如果 false ，元素将隐藏

9、 jQuery 事件操作

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

触发时间：

1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
2、原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象,还要等标签显示时需要的内容加载
完成。

触发顺序：

1、jQuery 页面加载完成之后先执行
2、原生js的页面加载完成之后

执行次数

1、原生js的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的function 函数，依次顺序全部执行。

事件绑定与触发的区别
在这里插入图片描述

Ane-z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb1——第 4 章 jQuery

Jquery第 4 章 Jquery1．简介2．核心函数2.1 $是 jquery 的核心函数。2.2 核心函数根据实参的不同，有四种不同的用法3．jquery 对象与 dom 对象3.1 dom 对象3.2 jquery 对象3.3 比较3.4 转换4．jquery 选择器4.1 选择器简介4.2 基本选择器4.3. 层级选择器4.4. 过滤选择器5．jquery 筛选5.1 过滤5.2 查找6．jquery 事件6.1 常见事件列表6.2 事件绑定6.3 解除绑定6.4 事件冒泡7．dom 增删改7.1
复制链接

扫一扫

专栏目录