web学习笔记(二十九)jQuery

简介: web学习笔记(二十九)jQuery

1. jQuery

1.1 什么是jQuery

jquery就是JavaScript的一个库,由JavaScript封装而来。jquery简化了js的编程。我们可以在线引用jQuery文件或者将文件下载到本地再引用,推荐将jQuery文件引用在页面头部,引用文件在上,自己编写的js文件在下。一个页面应用一次jquery文件即可。

//在线引用
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
//下载后引用
 <script src="./js/jquery.js"></script>

1.2 原生js的缺点

  1. 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖
  2. 原生js的api名字太长,难记
  3. 原生js中有的时候,代码冗余
  4. 原生js中有些属性或者方法,有浏览器兼容问题
  1. 原生js容错率比较低,前面的代码出了问题,后面的代码执行不了。

1.3 原生jQuery的优势

  1. 是可以写多个入口函数
  2. jQuery的api名字都容易记忆
  1. jQuery代码简洁(隐式迭代)
  2. jQuery帮我们解决了浏览器兼容问题
  3. 容错率高,前面的代码出了问题,后面的代码不受影响  

1.4 jQuery中的入口函数

在 jQuery 中,写入口函数(document ready function)的主要目的是确保代码在文档加载完成后再执行,以避免操作尚未准备好的 DOM 元素。当在头部编写jQuery代码时,一定要写入口函数,当在 HTML 文件中将脚本放在 </body> 标签之前时,通常可以省略入口函数,因为此时文档内容已经加载完成。

入口函数的格式:

$(document).ready(function() {
    // 操作 DOM 的代码或使用 jQuery 选择器的代码
});

简写:

$(function() {
    // 在文档加载完成后执行的代码
});

1.5 jQuery入口函数和window.onload入口函数的区别

  1.  window.onload入口函数不能写多个的,jQuery入口函数是可以写多个的
  2.  执行时机不同,jQuey入口函数要快于window.onload ( 高版本js 比jq还要快)
  3.  jQuery入口函数要等待页面上dom树加载完成后执行。window.onload要等待页面上所有资源(dom树,外部css/js链接,图片等)都加载完成后执行。

1.6 $(参数)中参数的含义

  1. 参数是一个匿名函数,入口函数。
  2. 参数是一个选择器,相当于查汇总节点对象。
  3. 参数是dom对象(原生),能把dom对象之间转jQuery。
  4. 参数是一些html标签,相当于创建一个节点对象。

1.7DOM和jQuery相互转换 、

1.7.1 jQuery转DOM

    (1)$('#box'[索引号])

2)$('#box').get(索引号)

console.log($('#box')[0], $('#box').get(0));

1.7.2 DOM转 jQuery

(1)$(box) ---里面放的是节点的名字

console.log($('#btn1'));

1.8设置、获取文本内容

text不能解析标签,html可以解析标签。

1.8.1设置文本内容

(1)text(参数)

(2)html(参数)

$('#box').text( ' <span>我是新内容11112去</span>');

1.8.2获取文本内容

(1)text()

(2)html()

1. console.log( $('#box').text());
2. console.log( $('#box').html());

1.9设置、获取样式css()

1.9.1设置样式

(1)设置单个样式

         $(".box").css("样式属性名", "样式值");


(2)设置多个样式

              $(".box").css({

                   "样式属性名": "样式值",

                   "样式属性名": "样式值"

    });

或者 $(".box").css("样式属性名", "样式值").css("样式属性名", "样式值").css("样式属性名", "样式值");

1.9.2获取样式

(1) 获取单个样式

                var value = $(".box").css("样式属性名");

(2)获取多个样式

               var values = $(".box").css(["样式属性名", "样式属性名"]);

相关文章
|
2月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
115 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:简化Web开发的强大工具
【10月更文挑战第11天】深入了解jQuery:简化Web开发的强大工具
21 0
|
3月前
|
JSON 安全 JavaScript
Web安全-JQuery框架XSS漏洞浅析
Web安全-JQuery框架XSS漏洞浅析
539 2
|
2月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
31 0
|
4月前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
38 1
|
4月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
62 13
|
4月前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
53 0
|
4月前
|
前端开发 JavaScript UED
JSF 携手 jQuery 上演奇幻大戏,颠覆 Web 开发世界,你敢错过吗?
【8月更文挑战第31天】在Web开发领域,JavaServer Faces(JSF)与jQuery均是不可或缺的强大工具。JSF以组件为基础进行开发,而jQuery则以高效简洁的DOM操作及丰富的插件库著称。结合两者,能为Web应用注入新活力,实现复杂交互与动态效果。通过引入jQuery库并集成至JSF应用中,可轻松实现如动画、表单验证等功能,提升用户体验。本文通过具体示例展示了如何利用jQuery增强JSF应用,包括页面元素的动态显示与隐藏等效果,使开发过程更为便捷高效,激发更多创意可能。
19 0
|
5月前
|
自然语言处理 运维 JavaScript
web-flash 学习笔记
web-flash 学习笔记
|
6月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
38 0