清湖做网站的,网站策划书怎么做的美观,广东seo推广费用,网站开发交流✨前言✨
1.如果代码对您有帮助 欢迎点赞#x1f44d;收藏⭐哟 后面如有问题可以私信评论哟#x1f5d2;️
2.博主后面将持续更新哟#x1f618;#x1f389;本章目录#x1f389; #x1f95d;一.jQuery简介#x1f965;二.JQeury常用API#x1f347;1.jQeury选择…✨前言✨
1.如果代码对您有帮助 欢迎点赞收藏⭐哟 后面如有问题可以私信评论哟️
2.博主后面将持续更新哟本章目录 一.jQuery简介二.JQeury常用API1.jQeury选择器和筛选方法2.jquery操作样式3.jqeury修改效果4.jquery操作属性5.jquery修改内容6.jquery操作元素 三.jQuery事件1.jQuery其他方法四.总结 一.jQuery简介
1.jQuery是一个快速、简洁的JavaScript框架是继Prototype之后又一个优秀的JavaScript代码库框架于2006年1月由John Resig发布。jQuery设计的宗旨是“write LessDo More”即倡导写更少的代码做更多的事情。它封装JavaScript常用的功能代码提供一种简便的JavaScript设计模式优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.jQuery的核心特性可以总结为具有独特的链式语法和短小清晰的多功能接口具有高效灵活的CSS选择器并且可对CSS选择器进行扩展拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器如IE 6.0、FF 1.5、Safari 2.0、Opera 9.0等。 1.将jquery文件引入到项目中:
script src../JQ/jquery-1.12.4.js/script2.jquery的基本使用方法:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscript// 函数入口// 方式1():$(document).ready(function () {alert(你好jquery1)//弹窗(alert)})// 方式2(简化版):$(function () {alert(你好jquery2)//弹窗(alert)})/script/head
body
/body
/html运行结果: 3.jquery对象和DOM对象: !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptdiv idmyDivHello, World!/divscript// 将jQuery对象转换为DOM对象var $myDiv $(#myDiv); // jQuery对象var domDiv $myDiv.get(0); // DOM对象console.log(domDiv); // 输出div idmyDivHello, World!/div// 将DOM对象转换为jQuery对象var $newDiv $(domDiv); // jQuery对象console.log($newDiv); // 输出[div idmyDivHello, World!/div]/script
/head
body
/body
/html
运行结果: 4.jquery对象和DOM对象互相转换:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscript$(function (){//使用js获取元素var jsdocument.getElementById(div1);//将DOM对象转换为jquery对象var $js $(js);$js.html(ol\n li将DOM对象转换为jquery对象/li\n li将DOM对象转换为jquery对象/li\n li将DOM对象转换为jquery对象/li\n li将DOM对象转换为jquery对象/li\n /ol);// 使用jq获取元素var $jq$(#div2);$jq.html(ol\n li将jquery对象转换为DOM对象/li\n li将jquery对象转换为DOM对象/li\n li将jquery对象转换为DOM对象/li\n li将jquery对象转换为DOM对象/li\n /ol)// 将jquery对象转换为DOM对象 jq[0]或者jq.get(0)var jq $jq[0];jq.innerHTML(ol\n li将jquery对象转换为DOM对象/li\n li将jquery对象转换为DOM对象/li\n li将jquery对象转换为DOM对象/li\n li将jquery对象转换为DOM对象/li\n /ol);})/script
/head
body
div iddiv1 styleheight: 100px;width: 280px;background-color: aqua/div
div iddiv2 styleheight: 100px;width: 280px;background-color: red/div
/body
/html运行结果:
二.JQeury常用API
以下是jQuery常用的一些API 1.选择器:
选择器(属性)描述$(selector)通过选择器选择元素。$(element)通将原生的DOM元素封装成jQuery对象。
2.事件处理:
事件处理(属性)描述.click(handler)给元素添加点击事件。.keydown(handler)给元素添加键盘按下事件。.mouseenter(handler)给元素添加鼠标进入事件。.mouseleave(handler)给元素添加鼠标离开事件。
3.DOM操作
DOM操作(属性)描述.html()获取或设置元素的内容。.text()获取或设置元素的文本内容。.val()获取或设置表单元素的值。.append(content)在元素内部末尾添加内容。.prepend(content)在元素内部开头添加内容。.remove()从文档中移除元素。
4.样式操作
样式操作(属性)描述.addClass(className)给元素添加指定的类名。.removeClass(className)移除元素的指定类名。.toggleClass(className)切换元素的指定类名。
5.AJAX:
AJAX(属性)描述$.ajax(options)发送AJAX请求$.get(urldata success dataType)发送一个GET请求$.post(urldata success dataType)发送一个POST请求
6.动画效果API:
动画效果API(属性)描述.hide()隐藏元素.show()显示元素.fadeIn()淡入元素.fadeout()淡出元素.slideDown()下拉显示元素.slideup()收起元素
这只是iQuery提供的一小部分API还有很多其他的API以用于处理和操作HTML文档。可以通过查阅iQuery官方文档来获取更详细的API列表和使用方法
1.jQeury选择器和筛选方法
原生 JS 获取元素方式很多很杂而且兼容性情况不一致因此 jQuery 给我们做了封装使获取元素统一标准。我们可以通过jquery选择器或者使用jquery方法更方便的获取到元素。
1.1 jQeury基础选择器:
名称语法描述标签选择器document.getElementsByTagName通过元素的标签名选择元素。例如使用document.getElementsByTagName函数可以选择所有的 p 元素。类选择器document.getElementsByClassName通过元素的类名选择元素。在JavaScript中可以使用document.getElementsByClassName函数选择指定类名的元素在jQuery中可以使用.class或.class-name选择器选择指定类名的元素。ID选择器document.getElementById通过元素的ID选择元素。在JavaScript中可以使用document.getElementById函数选择指定ID的元素在jQuery中可以使用#id选择器选择指定ID的元素。属性选择器document.querySelector(‘[attribute“value”]’)过元素的属性选择元素。在JavaScript中可以使用document.querySelector(‘[attribute“value”]’)函数选择具有指定属性值的元素在jQuery中可以使用[attribute“value”]选择器选择具有指定属性值的元素。
1.标签选择器代码演示:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscriptwindow.onloadfunction () {// JavaScriptvar p document.getElementsByTagName(p);//选中所有的p标签for (var i 0; i p.length; i) {p[i].style.background lawngreen;}// jQueryvar div $(div);//选中所有的div标签for (var i 0; i div.length; i) {div[i].style.background red;}}/script
/head
body
p stylewidth: 100px;height: 15px/p
p stylewidth: 100px;height: 15px/pdiv stylewidth: 100px;height: 15px/div
br
div stylewidth: 100px;height: 15px/div
/body
/html运行结果: 2.类选择器代码演示:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscriptwindow.onloadfunction () {// JavaScriptvar p1 document.getElementsByClassName(p1)[0];p1.style.background aqua// jQueryvar p2 $(.p2)[0];p2.style.background lawngreen}/script
/head
body
p classp1 stylewidth: 200px;height: 15px;/p
p classp2 stylewidth: 200px;height: 15px;/p
/body
/html输出结果: 3. ID选择器代码演示:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscriptwindow.onloadfunction () {// JavaScriptvar p1 document.getElementById(p1);p1.style.background red// jQuery$(#p2).css(background, orange);}/script
/head
body
p idp1 stylewidth: 200px;height: 15px;/p
p idp2 stylewidth: 200px;height: 15px;/p
/body
/html运行结果: 4.属性选择器代码演示:
//1.选择具有指定属性的元素
$([name]).操作();
//例如选择具有name属性的所有元素
$([name]).addClass(highlight);//2.选择具有指定属性和属性值的元素
$([namevalue]).操作();
//例如选择具有name属性且属性值为value的元素
$([namevalue]).addClass(highlight);//3.选择具有以指定字符串开头的属性值的元素
$([attribute^value]).操作();
//例如选择具有以img开头的src属性值的所有元素
$([src^img]).addClass(highlight);//4.选择具有以指定字符串结尾的属性值的元素
$([attribute$value]).操作();
//例如选择具有以.jpg结尾的src属性值的所有元素
$([src$.jpg]).addClass(highlight);
此外jQuery还提供了一些筛选方法可以根据元素的位置、内容和其他条件进行进一步的筛选。
属性说明:eq(index)选择具有指定索引的元素。索引从0开始计数。:first选择第一个元素。:last选择最后一个元素。:odd选择奇数位置的元素。:even选择偶数位置的元素。
以下属性代码演示: 1.:eq(index):
// jQuery
$(li:eq(2)) // 选择第三个li元素2.:first:
// jQuery
$(li:first) // 选择第一个li元素
3.:last:
// jQuery
$(li:last) // 选择最后一个li元素4.:odd:
$([href^http]) // 选择所有 href 属性值以 http 开头的元素
// jQuery
$(li:odd) // 选择奇数位置的li元素5.:even:
// jQuery
$(li:even) // 选择偶数位置的li元素
2.jquery操作样式
属性使用css()可以通过css()方法修改元素的样式addClass()可以通过addClass()方法为元素添加一个或多个CSS类removeClass()可以通过removeClass()方法移除元素的一个或多个CSS类toggleClass()可以通过toggleClass()方法切换元素的CSS类如果元素已经具有该CSS类则移除如果元素没有该CSS类则添加.width()和.height()可以设置或获取一个元素的宽度和高度
代码演示如下: 1.css()代码演示:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscriptwindow.onloadfunction () {// 修改元素的背景颜色$(#p1).css(background-color, red);// 修改元素的宽度和高度$(#p2).css({width: 200px,height: 100px});}/script
/head
body
p idp1 stylewidth: 200px;height: 15px;/p
p idp2 stylewidth: 200px;height: 15px;background-color: aqua/p
/body
/html运行结果: 2.addClass()代码演示:
$(selector).addClass(active);3.removeClass()代码演示:
$(selector).removeClass(active);
4.toggleClass()代码演示:
$(selector).toggleClass(active);
5…width()和.height()代码演示:
$(selector).width(200);
$(selector).width(200);注意使用上述方法修改元素的样式需要将选择器$(‘element’)替换为实际的元素选择器。
3.jqeury修改效果
jQuery是一个功能强大的JavaScript库可以简化JavaScript编程并提供了一些方便的方法来修改和操作HTML元素。
属性语法及使用隐藏元素$(“#elementId”).hide();显示元素$(“#elementId”).show();添加CSS类$(“#elementId”).addClass(“className”);移除CSS类$(“#elementId”).removeClass(“className”);切换CSS类$(“#elementId”).toggleClass(“className”);修改文本内容$(“#elementId”).text(“newText”);修改HTML内容$(“#elementId”).html(“newHTML”);修改元素属性$(“#elementId”).attr(“attributeName”, “newValue”);修改元素样式$(“#elementId”).css(“propertyName”, “newValue”);添加事件处理程序$(“#elementId”).css(“propertyName”, “newValue”);
以上是一些常见的jQuery修改效果的示例你可以根据具体需求来选择适合的方法。在使用jQuery之前记得先引入jQuery库文件。
4.jquery操作属性
在JavaScript中可以使用jQuery来操作元素的属性。以下是一些常见的jQuery属性操作方法
属性描述即使用方法.attr()获取或设置元素的属性值。获取属性值$(selector).attr(“attribute-name”)设置属性值$(selector).attr(“attribute-name”, “new-value”).prop()获取或设置元素的属性值。获取属性值$(selector).prop(“property-name”)设置属性值$(selector).prop(“property-name”, “new-value”).removeAttr()移除元素的属性。移除元素$(selector).hasClass(“class-name”).addClass()为元素添加一个class。元素添加$(selector).addClass(“class-name”).removeClass()从元素中移除一个class。元素中移除$(selector).removeClass(“class-name”).toggleClass()切换元素的class如果已经存在则移除否则添加。切换元素$(selector).toggleClass(“class-name”)
这些方法可以用来操作元素的属性和class从而改变元素的外观和行为。
5.jquery修改内容
要使用JavaScript和jQuery来修改内容你可以使用以下方法: 1.使用JavaScript的innerHTML属性来修改元素的内容:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscriptwindow.onloadfunction () {document.getElementById(div1).innerHTML 使用JavaScript的innerHTML属性来修改元素的内容;//innerHTML里面放你要修改的内容}/script
/head
body
div iddiv1 stylewidth: 200px;height: 80px;background-color: aqua/div
/body
/html运行结果:
2.使用jQuery的text()方法来修改元素的文本内容:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscriptwindow.onloadfunction () {$(#div1).text(使用jQuery的text()方法来修改元素的文本内容);//text里面放你要修改的内容}/script
/head
body
div iddiv1 stylewidth: 200px;height: 80px;background-color: lawngreen/div
/body
/html运行结果: 3.使用jQuery的html()方法来修改元素的HTML内容:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src../JQ/jquery-1.12.4.js/scriptscriptwindow.onloadfunction () {$(#div1).html(使用jQuery的html()方法来修改元素的HTML内容);//html里面放你要修改的内容}/script
/head
body
div iddiv1 stylewidth: 200px;height: 80px;background-color: orange/div
/body
/html运行结果: 注意上述代码中的div1应该替换为你需要修改内容的元素的ID。
6.jquery操作元素
在使用jQuery操作元素之前需要先在HTML文件中引入jQuery库可以通过以下方式引入
script srchttps://code.jquery.com/jquery-3.5.1.min.js/script然后就可以使用jQuery提供的方法来操作元素了。 1.选择元素使用jQuery选择器来选择元素。例如通过id选择元素
$(#div);
2.操作元素属性可以使用jQuery提供的attr()方法来获取或设置元素的属性值:
// 获取元素属性值
var value $(#div).attr(attributeName);// 设置元素属性值
$(#div).attr(attributeName, newValue);3.操作元素内容可以使用jQuery提供的text()方法来获取或设置元素的文本内容:
// 获取元素文本内容
var text $(#div).text();// 设置元素文本内容
$(#div).text(newText);
4.操作元素样式可以使用jQuery提供的css()方法来获取或设置元素的样式:
// 获取元素样式
var style $(#div).css(propertyName);// 设置元素样式
$(#div).css(propertyName, newValue);
5.添加/删除元素类名可以使用jQuery提供的addClass()和removeClass()方法来添加或删除元素的类名:
// 添加元素类名
$(#div).addClass(className);// 删除元素类名
$(#div).removeClass(className);
6.绑定事件可以使用jQuery提供的on()方法来绑定元素的事件:
// 绑定点击事件
$(#div).on(click, function() {// 事件处理逻辑
});
注意上述代码中的div应该替换为你需要的元素的ID。 除了上述方法之外jQuery还提供了很多其他操作元素的方法如操作元素尺寸、操作元素位置等。详细的方法可以参考jQuery官方文档。
三.jQuery事件
avaScript和jQuery都有各种各样的事件可以用来触发和处理交互操作。以下是一些常见的jQuery以及JavaScript事件 jQuery事件:
属性描述及说明click鼠标点击事件dblclick鼠标双击事件hover鼠标悬停事件mouseover鼠标移入事件mouseout鼠标移出事件mousedown鼠标按下事件mouseup鼠标释放事件keydown键盘按下事件keyup键盘释放事件submit表单提交事件change表单元素值变化事件focus元素获得焦点事件blur元素失去焦点事件load页面加载完成事件readyDOM准备就绪事件resize窗口大小变化事件scroll滚动事件
JavaScript事件:
属性描述说明click鼠标点击事件mouseover鼠标移入事件mouseout鼠标移出事件keydown按键按下事件keyup按键松开事件load加载完成事件scroll滚动事件resize窗口大小变化事件submit表单提交事件change表单元素值改变事件focus元素获取焦点事件blur元素失去焦点事件
1.jQuery其他方法
以下是一些其他常用的 jQuery 方法
属性说明使用addClass(className)向选中的元素添加指定的类名。removeClass(className)从选中的元素中移除指定的类名。toggleClass(className)切换选中元素的类名。如果元素已经有指定类名将被移除如果元素没有指定的类名将被添加。attr(attributeName)获取选中元素的指定属性的值。css(propertyName)获取选中元素的指定 CSS 属性的值。val()获取选中元素的值。通常用于表单元素如 或 。html()获取或设置选中元素的 HTML 内容。text()获取或设置选中元素的纯文本内容。on(eventName, handler)为选中元素绑定指定的事件处理函数。fadeIn()渐变显示选中元素。
以下是上面属性的代码演示: 1.addClass(className)代码演示:
$(p).addClass(highlight);2. removeClass(className)代码演示:
$(p).removeClass(highlight);3.toggleClass(className)代码演示:
$(p).toggleClass(highlight);4.attr(attributeName)代码演示:
var value $(img).attr(src);5.css(propertyName)代码演示:
var color $(p).css(color);6.val()代码演示:
var value $(input).val();7.html()代码演示:
var content $(div).html();
$(div).html(pNew content/p);8.text()代码演示:
var content $(div).text();
$(div).text(New content);9.on(eventName, handler)代码演示:
$(button).on(click, function() {console.log(Button clicked);
});10.fadeIn()代码演示:
$(div).fadeIn();这只是一小部分 jQuery 的方法jQuery 还提供了很多其他强大的功能详细的文档可以在 jQuery 官方网站上找到。
四.总结
JavaScript是一种脚本语言用于为网页添加交互功能。它可以在网页上动态地修改和更新内容从而提供更好的用户体验。而jQuery是一种基于JavaScript的快速、简洁的JavaScript库。
jQuery的主要特点和优势包括 1.简洁的语法使用jQuery可以通过简洁的语法来完成常见的DOM操作、事件处理、动画效果等大大简化了JavaScript代码的编写。
2.跨浏览器兼容性jQuery对不同的浏览器进行了兼容性处理确保在不同浏览器上的一致性和稳定性。
3.强大的选择器jQuery提供了强大的选择器功能可以通过使用CSS选择器来选择和操作HTML元素。
4.5.ajax支持jQuery提供了简单易用的ajax功能可以实现异步加载数据、动态更新网页内容等功能。
6.大量的插件jQuery拥有一个庞大的插件生态系统可以轻松地集成各种功能丰富的插件来扩展自己的开发能力。
综上所述JavaScript和jQuery是Web开发中必不可少的工具它们使得开发者可以更加高效地编写交互性强的网页。
