jQuery知识点

最新推荐文章于 2024-08-21 14:09:37 发布
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量54 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Providential365/article/details/130691118
版权

jQuery介绍

jQuery是一个快速、简洁的js框架，并且开源免费。 引入jq：将jq的js包放到项目的文件中，并且在需要的地方进行引入

jq的特点 1.简化dom操作 2.轻量级 3.跨浏览器

jq的基本语法

$(selector).action()
selector代表获取元素
action代表获取元素之后的操作
$代表jQuery

jq选择器

1.基本选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input id="in1" type="text" /><br>
<span>111</span>
练习
1.引入jq，验证$是否绝对相等jQuery
2.通过dom和jq的方式获取元素
3.验证基本选择器，包括*选择器
2.层级选择器
3.基本筛选器
<span>222</span>
<p class="p1">333</p>
<p class="p1">444</p>
</body>
</html>
<script>
//id选择器
var in1 = $("#in1");
console.log(in1);
//标签选择器
var sps = $("span");
console.log(sps);
//class选择器
var ps = $(".p1");
console.log(ps);
//群组选择器
var result = $("span,#in1");
console.log(result);
</script>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<div id="div1">
<span>111</span>
<p>222</p>
<!-- <div id="div2">
<span>333</span>
<p>444</p>
</div> -->
<span>
<p>555</p>
</span>
</div>
</body>
</html>
<script>
//后代选择器
console.log($("div p"));
//子代选择器
console.log($("div>p"));
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<table border="1px" width="200px">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</table>
</body>
</html>
<script>
//修改索引值为偶数的行为红色
$("table tr:even").css("background-color","red");
//修改索引值为奇数的行为绿色，并且字体颜色为白色
$("table tr:odd").css({"background-color":"green","color":"white"});
</script>

2.层级选择器

4.属性选择器

5.表单对象属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<button id="btn1">点击</button><br>
<input name="clothe" type="checkbox" checked="checked"/>T恤
<input name="clothe" type="checkbox" checked="checked"/>衬衫
<input name="clothe" type="checkbox" />牛仔裤
<input name="clothe" type="checkbox" />拖鞋
<input name="clothe" type="checkbox" />运动鞋
<input name="clothe" type="checkbox" />休闲裤
<br>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
</select>
</body>
</html>
<script>
$("#btn1").click(function(){
console.log($("input[name^=clo]:checked").length)
})
$("select").mousedown(function(){
console.log($("select option:selected").html());
})
</script>

jq常用事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input type="text" />
<span></span>
<div id="div1"></div>
<button id="btn1">点击</button>
<img src="../img/b.png" />
</body>
</html>
<script>
$("input").keydown(function(){
$("span").html("正在输入...");
})
$("input").keyup(function(){
$("span").html("输入完成");
})
//方式一：
// $("#div1").mouseenter(function(){
// alert("鼠标移入");
// })
// $("#div1").mouseleave(function(){
// alert("鼠标移出");
// })
//方式二
$("#div1").hover(
function(){
$("#div1").css("background-color","green");
},
function(){
$("#div1").css("background-color","red");
})
//实现图片隐藏或显示
$("#btn1").click(function(){
$("img").toggle();
})
</script>

 jq操作dom对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input id="in1" type="text" value="aaa" />
</body>
</html>
<script>
//通过dom对象获取元素
var in1 = document.getElementById("in1");
console.log(in1);
//dom转jq
var $in1 = $(in1);
console.log($in1);
//通过jq获取元素
var $in2 = $("#in1");
console.log($in2);
//jq转dom
//方式一
var in3 = $in2.get(0);
console.log(in3);
//方式二
var in4 = $in2[0];
console.log(in4);
</script>

jq获取节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<input id="in1" type="text" value="陈森"/>
<span class="sp">我是一个span</span>
<p id="p1"></p>
<a href="www.baidu.com">百度</a>
<img src="../img/a.png" />
<div id="div1">
<p id="p2">我是一个段落</p>
<span>我是一个文本</span>
</div>
</body>
</html>
<script>
//通过dom获取input的内容
var in1 = document.getElementById("in1");
var in1Value = in1.value;
console.log(in1Value);
//通过jq获取input的内容
var $in2 = $("#in1");
var $in2Value = $in2.val();
console.log($in2Value);
//通过dom获取span的内容
var result = document.getElementsByClassName("sp");
console.log(result);
var spanStr = result[0].innerHTML;
console.log(spanStr);
var spanStr2 = result[0].innerText;
console.log(spanStr2);
//通过jq获取span的内容
var $result = $(".sp");
var $spanStr = $result.html();
console.log($spanStr);
var $spanStr2 = $result.text();
console.log($spanStr2);
//jq获取a标签的href
var aAttr = $("img").attr("src");
console.log(aAttr);
console.log("=================");
//jq获取父节点
var parents = $("#p2").parent();
var parents2 = $("#p2").parent("div");
console.log(parents);
//jq获取子节点
var childs = $("#div1").children();
console.log(childs);
//jq获取同胞节点
var sibling = $("#p1").siblings();
console.log(sibling);
</script>

jq新增节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
//dom新增节点
//创建元素节点
var p1 = document.createElement("p");
//创建文本节点
var text = document.createTextNode("我是一个段落");
//文本节点放在元素节点下面
p1.appendChild(text);
//将p标签放在div标签
document.getElementById("div1").appendChild(p1);
//jq新增节点
var sp = $("<span title='标题'>我是一个文本</span>");
$("#div1").append(sp);
</script>

jq更新节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
<style>
.p2{
font-size: 25px;
font-weight: bolder;
}
</style>
</head>
<body>
<p id="p1">我是一个段落</p>
<a href="#">京东</a>
</body>
</html>
<script>
//dom
var p1 = document.getElementById("p1");
// p1.innerHTML="段落1";
p1.innerText="段落2";
// p1.style.color="red";
p1.setAttribute("class","p2");
//jq
//修改文本内容
// $("#p1").html("<a href='#'>百度</a>")html可以识别标签，text不可以
$("#p1").text("<a href='#'>百度</a>")
//修改样式
$("#p1").css("color","green");
$("#p1").css({"fontSize":"50px","fontWeight":"bolder"});
//修改属性
//https://www.jd.com/
// $("a").attr("href","https://www.jd.com/");
// $("a").attr({"href":"https://www.baidu.com","title":"百度"});
$("a").attr("style","color:pink");
</script>

jq删除节点

//dom
// document.getElementById("p1").remove();
$("#p1").remove();

jq动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
<img width="200px" src="../img/b.png" />
</body>
</html>
<script>
$("#btn1").click(function(){
$("img").hide();
})
$("#btn2").click(function(){
$("img").show();
})
$("#btn3").click(function(){
$("img").toggle();
})
$("#btn4").dblclick(function(){
$("img").fadeOut("1000");
})
$("#btn5").dblclick(function(){
$("img").fadeIn("1000");
})
$("#btn6").click(function(){
$("img").animate({
width:"250px",
opacity:"0.5"
})
})
</script>

bootstrap入门

bootstrap是基于html、css、js的简洁的开源的前端框架。

bootstrap的特点： 1.移动设备优先 2.浏览器支持 3.容易上手 4.响应式开发 5.12列栅格系统

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--必须要有的meta标签-->
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>入门</title>
<!--引入css-->
<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
<!--引入js，注意jq的顺序必须在bootstrap的前面-->
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
<h1>hello boostrap</h1>
<h2>hello boostrap</h2>
<h3>hello boostrap</h3>
<h4>hello boostrap</h4>
<h5>hello boostrap</h5>
<h6>hello boostrap</h6>
正文内容
<p class="h1">我是一个段落</p>
<p class="lead">我是一个段落</p>
<p class="text-center">我是一个段落</p>
<p class="text-left">我是一个段落</p>
<p class="text-right">我是一个段落</p>
<p class="text-danger">我是一个段落</p>
<p class="text-warning">我是一个段落</p>
<p class="text-info">我是一个段落</p>
</body>
</html>

bootstrap栅格系统

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>栅格系统</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
<!---浏览器左右有间隔-->
<div class="container">
<div class="row">
<div class="col-3" style="background-color: #0000FF;">111</div>
<div class="col-6" style="background-color: green;">222</div>
<div class="col-3" style="background-color: #8A2BE2;">333</div>
</div>
</div>
<!--占满整个浏览器-->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="background-color: pink;">444</div>
<div class="col-md-6" style="background-color:
yellow;">555</div>
<div class="col-md-3" style="background-color:
#0000FF;">666</div>
</div>
<!--固定布局-->
<div class="row">
<div class="col-lg col-md col-sm" style="background-color:
#002752;">777</div>
<div class="col-lg col-md col-sm" style="background-color:
#BEE5EB;">888</div>
</div>
<!--等宽布局-->
<div class="row">
<div class="col-sm" style="background-color: #008000;">999</div>
<div class="col-sm-9" style="background-color:
red;">101010</div>
<div class="col-sm" style="background-color: grey;">111111</div>
</div>
<!--自动分配-->
<div class="row">
<div class="col-4" style="background-color:
#721C24;">121212</div>
div class="col-auto" style="background-color:
#D39E00;">1313131313133131313313</div>
<div class="col-4" style="backgroundcolor:yellowgreen">141414</div>
</div>
<!--嵌套-->
<div class="row">
<div class="col-4" style="background-color:
#686868;">15151515</div>
<div class="col-8">
<div class="row">
<div class="col-4" style="background-color:
#E0A800;">16161616</div>
<div class="col-4" style="background-color:
#FFC0CB;">17171717</div>
<div class="col-4" style="background-color:
#B21F2D;">18181818</div>
</div>
</div>
</div>
<div class="row" style="height: 200px;">
<!--上边对齐-->
<div class="col align-self-start" style="background-color:
#00FF00;">模块一</div>
<!--上下左右居中对齐-->
<div class="col align-self-center" style="background-color:
#80BDFF;">模块二</div>
<!-- 下边对齐-->
<div class="col align-self-end" style="background-color:
#856404;">模块三</div>
</div>
</div>
</body>
</html>

 

Providential365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery 知识点总结
znhyXYG的博客
12-06 1837
概念： JavaScript库 把一些浏览器兼容性，或者是一些常用的函数封装到一个js文件中，就是JavaScript库 我们自己封装的animate.js，就是JavaScript库 常见的JavaScript库： jQuery、Prototype、MooTools JQuery的优点 强大的选择器 链式编程 隐式迭代 丰富的插件，可以自己编写插件 开源 JQ中的顶级对象 jQuery中的顶级对象是$或jQ..
jquery知识点
weixin_43366786的博客
04-19 808
个人总结jquery知识点，对基础学者帮助提升
JQuery知识点
anye_zhuzai的博客
04-16 866
两种引入 1、本地引入:<sciipt scr ="js/jquery-3.5.1.min.js"></script> 2、cdn引入:<sciipt scr ="https://code.jquery.com/jquery-3.5.1.min.js"></script> 两种写法 1、$(document).ready(function(){ }) 2、$(function(){ }) ............
jQuery知识点.docx
07-07
在本篇笔记中，我们将深入探讨 jQuery 的一些核心知识点。 首先，我们关注初始化过程。`$(document).ready()` 与 `window.onload` 都用于在页面加载完成后执行代码，但它们有区别。`$(document).ready()` 在 DOM ...
jquery知识点整理
07-19
jQuery知识点整理 jQuery是当前最流行的JavaScript库之一，提供了许多有用的方法和属性来简化Web开发。下面是对jQuery知识点的整理： 基本概念 * jQuery对象：使用$符号来声明jQuery对象，如：`$()`或`jQuery()` ...
jQuery 知识点归纳
01-08
jQuery是一个快速、简介的JavaScript库，宗旨是“write less,do more”。 官网：https://jquery.com 版本： 1x：兼容IE6、7、8，不再更新 2x：不兼容IE6、7、8，不再更新 3x：不兼容IE6、7、8，当前官网主要更新版本...
jquery知识点总结.md
09-05
jquery
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 498
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 155
【代码】【js】各类前端输入校验方法。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1154
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 876
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 741
react详细自我学习笔记，内容包括JSX、Redux、Router等
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 172
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 511
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 155
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
vue3 @antv/x6 使用画布滚动条以后的几个问题的解决
jwbabc的专栏
08-20 102
通过设置@antv/x6的插件scroller的options，来达到基本上满足项目的原型要求。
前端点击预览图片：Viewer.js 使用方法
mq1314520_zhl的博客
08-21 552
Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为jQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值