jQuery基础

最新推荐文章于 2023-07-07 15:41:41 发布

HYJ0101

最新推荐文章于 2023-07-07 15:41:41 发布

阅读量257

点赞数

分类专栏：前端基础文章标签： jquery js

本文链接：https://blog.csdn.net/u014761412/article/details/112393286

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、加载jQuery的方法
二、基本语法
三、选择器
四、操作DOM对象
五、操作CSS对象
六、事件
- 基本语法
- 常用动作
六、each和data方法
- each
- data

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程

一、加载jQuery的方法

网页CDN直接加载

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

下载文件后加载

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

二、基本语法

$(selector).action()

文档就绪事件

//完整写法
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

//简洁写法
$(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败

三、选择器

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

元素选择器

//在页面中选取所有 <p> 元素
$("p")

//按下按钮后，所有p元素都会被隐藏
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

id选择

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

$("#test")

.class 选择器

$(".test")

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

层级选择器

$("x y")
//找到x所有的后代y
$("x > y")
//找到x所有的儿子y
$("x + y")
//找到紧挨着x所有的y
$("x ～ y")
//找到x所有的兄弟y

更多选择器

$("*")
//选取所有元素
$(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!='_blank']")	
//选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	
//选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")	
//选取偶数位置的 <tr> 元素
$("tr:odd")
//选取奇数位置的 <tr> 元素

四、操作DOM对象

4.1 内容操作

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

获得内容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

设置内容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});

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

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});

4.2 属性操作

获得属性

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

设置属性

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

回调函数

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

4.3 添加操作

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

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

4.4 删除操作

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

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

五、操作CSS对象

5.1 添加类

addClass() - 向被选元素添加一个或多个类

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

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

5.2 css方法

返回 CSS 属性

css("propertyname");

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

设置 CSS 属性

css("propertyname","value");

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

设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

5.3 位置相关方法

offset()：获取元素在当前窗口的相对偏移或者设置元素位置
position()：获取元素相对于父元素的位置偏移
scrolltop()：获取元素相对于滚动条顶部的偏移
scrollleft()：获取元素相对于滚动条左部的偏移

5.4 尺寸

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

六、事件

基本语法

写法一：

$("元素").动作(function(){
    // 动作触发后执行的代码!!
});

写法二：

$("元素").on("动作","选择器",function(){
    // 动作触发后执行的代码!!
});

常用动作

click()

click() 方法是当按钮点击事件被触发时会调用一个函数

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

dblclick()

当双击元素时，会发生 dblclick 事件

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件

hover()

hover()方法用于模拟光标悬停事件

focus()

当元素获得焦点时，发生 focus 事件
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点

blur()

当元素失去焦点时，发生 blur 事件。

六、each和data方法

each

each() 方法规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element))

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});
//输出每个 li 元素的文本

data

data() 方法向被选元素附加数据，或者从被选元素获取数据

$(selector).data(name) //获得数据

$(selector).data(name,value) //添加数据

$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

HYJ0101

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

文章目录一、加载jQuery的方法二、基本语法三、选择器四、操作DOM对象4.1 内容操作4.2 属性操作4.3 添加操作4.4 删除操作五、操作CSS对象5.1 添加类5.2 css方法5.3 位置相关方法5.4 尺寸六、事件基本语法常用动作六、each和data方法eachdatajQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程一、加载jQuery的方法网页CDN直接加载<head><script src="http
复制链接

扫一扫