余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

JQuery知识点总结(jQuery总结)

xiyangw 2022-11-25 11:41 121 浏览 0 评论

jQuery概述

js与jQuery

获取的对象

jQuery获取的是jquery对象,js获取的是js对象(dom对象),dom对象不能调用jquery的方法,jquery对象也不能调用dom对象的方法

dom对象转换为jQuery对象:$(dom对象)

层级选择器

子代选择器 $("ul>li") 使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素后代选择器 $("ul li") 使用空格,代表后代选择器,获取ul下的所有的li元素,包括孙子辈

jQuery解决的问题

将原生的单个化操作,批量操作

将原生的复杂的查询方式,简单化

将原生逐步操作的方式,链式操作

将原生操作复杂的逻辑,提供简单的接口

队列控制:

为了解决原生的js的不足,队列也可以解决回调地狱

控制异步代码的执行顺序

把要执行的每一步放在数组[1,2,3,4,5],一步一步执行

入队..出队

三种队列

  • animate(最高级别)
$("div").animate({width:400},1000)
  • fx
queue dequeue
  • 自定义队列
  • finish 直接结束,来到最后一个状态
  • stop 结束当前队列的状态,进行下一个状态

插件机制:

插件:能够让功能进行扩展的一个术语,让一个对象的功能进行扩展

  • jQuery.fn.extend(object)

多库共存:

项目的开发方式

本质:

JavaScript框架

宗旨:

write Less do More

作用:

优化js操作、dom操作、页面交互、事件、ajax、动效

特性:

隐式循环,链式调用

jQuery核心函数:

jQuery ( )=$ ( )

  • undefinde
  • 返回空的jquery对象
  • 选择器,返回jQuery对象
jQuery(".box")
  • 函数,给document 添加 ready事件
  • 这个函数在 页面加载完成后执行
jQuery(function(){
 
})
?
jQuery("document").reaady(function(){
?
})
?
jQuery().ready(function(){
 
}) //作用一样
  • 传入dom对象,返回jQuery对象
jQuery(function(){
 let box=document.querySelector(".box");
 jQuery(box);
})
  • 传入字符串 ,创建新节点 "<div></div>"
$(function(){
 $("<div><span>this is span</span></div>").appendTo($(".box"))
})

jQuery对象常用方法:

  • 选择器
  • .css ("样式属性","样式值") .css ( { } )

$(function(){
 $(".box").css({
 backgroundColor:"blue",
 borderRadius:50%
 })
})
  • ?
  • 筛选器 :first :not(selector) :even
  • :header=>匹配如 h1, h2, h3之类的标题元素
  • :eq(index)=>匹配一个给定索引值的元素
  • :gt(index)=>匹配所有大于给定索引值的元素
  • :animated=>选择正在运动的元素
$(function(){
 $(".box:first").css("background-color","red")
})
  • ?
  • 筛选的方法:
  • .eq (index) 返回对应下标的jQuery对象
  • .get (index) 返回对应下标的原生对象
  • .first( )
  • .last( )
  • .hasClass("类名") 判断jQuery数组中是否有一个类名为***对象 返回true、false
$(function(){
 $(".son").hasClass("son2")
})
  • .filter([选择器],[元素],[,function]) 筛选出符合条件的对象
$(function(){
 $(".son").filter("son2")
})
?
$(function(){
 $(".son").filter(function(item){
 $(this).attr("class")=="box2"
 })
})
  • .is("选择器") 判断是否为某个标签
  • .map (fn) 遍历对象 生成一个新的数组
  • .has ("选择器") 返回一个选中的jQuery对象
$(function(){
 $(".box").has("span").css("background","red")
})
  • .not ("选择器") 从jQuery数组中删除选中的元素
$(function(){
 $(".box").not(".box2")
})
  • .slice (start,[end]) 截取指定位置的jQuery的对象 传入的是下标
$(function(){
 $(".box").slice(5);
})
  • .each (fn) 遍历jQuery数组,index在前、item在后
$(function(){
 $(".box").each(function(index,item){
 console.log(item)
 });
})
  • .index ( ) 返回jQuery对象在数组中的下标
  • 操作属性的方法:
  • attr ( )
  • removeAttr ( )
  • prop ( )
  • removeProp ( )
  • 操作类名的方法
  • addClass ( )
  • removeClass ( )
  • toggleClass ( )
$(function(){
 $(".box").addClass("box2")
})
  • 操作内容的方法:
  • .text ( )
  • .html ( ) 可以识别<>
  • .val ( )
  • jQuery对象元素的位置信息
  • .offset ( ) 返回一个位置信息的对象 相对于浏览器的位置
 {top:**,left:**}
  • .position ( ) 返回一个位置信息的对象 相对于定位的祖先元素的位置
 {top:**,left:**}
  • .scrollTop ( )
  • .scrollLeft ( )
  • 常用方法
  • .toArray ( ) 将jQuery对象转换为原生对象
  • 事件对象:
  • e.offsetX
  • e.offsetY
  • e.pageX
  • e.pageY
  • e.Target
  • e.currentTarget ==this
  • e.stopPropagation 阻止事件流
  • e.preventDefault 阻止默认事件
  • 事件
$("div").click(function () {
 $("div").css("color","red")
 })

one()

on()

trigger() 自动触发事件

triggerHandler 自动触发事件,并且清除浏览器默认行为

hover(fn,fn)

ajax:

ajax要解决的问题

  1. 页面无刷新操作数据
  2. 按需获取数据的问题
  3. 让b/s架构的软件,能像c/s架构的软件操作流畅

ajax(async javascript and xml)

? 利用javascript异步操作数据

new XMLHttpRequest()

function ajax(params){
 if (typeof params!=='object'){
 console.error('参数类型不对');
 return
 }
 if (!params.url){
 console.error('请输入url');
 return
 }
 //参数初始化
 var url=url
 var type=params.type||"get"
 var datatype=params.dataType||"text"
 //处理数据
 var data=params.data||""
 if (typeof data=='object'){
 var str=""
 for(var i in data){
 str+=i+"="+data[i]+"&"
 }
 data=str.slice(0,-1)
 }
 //判断获取方式
 var ajax=new XMLHttpRequest()
 ajax.onload=function(){
 
 }
 if (type=='get'){
 ajax.open("get","/ajax?name=zhang")
 ajax.send()
 }
 else if (type=="post"){
 ajax.open("post","/ajax")
 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
 ajax.send("name=zhangsan")
 }
}
ajax({
 url:'/', 必须有
 type:'get', 可有可无
 dataType:'text', 可有可无
 data:{name:"zhangsan"}, 可有可无
 success:function(data){ 可有可无
 upDate(data)
 },
})
#天气页面获取数据
$(".btn").click(function(){
 $.ajax({
 url:"https://www.toutiao.com/stream/widget/local_weather/data/?city=太原",
 dataType:"json",
 success:function(data){
 upDate(data)
 },
 error:function(){
 console.log("no")
 }
 })
 }).trigger("click")
?
 function upDate(data){
 $(".box").text(data.data.weather.aqi)
 console.dir(data.data.weather)
 $(".box2").text(data.data.weather.city_name)
 $(".box3").text(data.data.weather.dat_condition
)
 }

xml

html、svg是xml衍生出来的

html也叫模板,数据也叫模型

svg=>矢量图

ajax获取数据

建立:1.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <stu>
 <name>zhangsan</name>
 <age>20</age>
 <sex>man</sex>
 </stu>
</root> //xml没有标签,可以自己定义

建立:2.html

//表格
<script>
 window.onload=function(){
 var ajax=new XMLHttpRequest()
 var tbody=document.querySelector("tbody")
 ajax.onload=function(){
 console.log(ajax.response)
 con=ajax.responseXML
 stu=con.getElementsByTagName("stu")
 var str=''
 for (i=0;i<stu.length;i++){
 var name=con.getElementsByTagName("name")[i].innerHTML
 var age=con.getElementsByTagName("age")[i].innerHTML
 var se $("ul>li") x=con.getElementsByTagName("sex")[i].innerHTML
 str=str+'<tr><td>'+name+'</td><td>'+age+'</td><td>'+sex+'</td></tr>'
 }
 tbody.innerHTML=str
 }
 ajax.open("get","aa.xml")
 ajax.send()
 }
<script>
 
ajax.response 返回文本,默认为文本格式
ajax.responseXML 返回文档,document格式
ajax.responseType 指定返回格式 可以加:"Text" "bold" "document" "json"

ajax传递数据

uri 统一资源标示符(Uniform Resource Identifier)

url 统一资源标示符(Uniform Resource Locator)

url(一个资源在互联网中的唯一标示)是uri的一种

/add?id={{item.id}} ?后面是数据获取 false 同步 true 异步(默认为异步)

  • get方式
ajax.open("get","/ajax?name=zhang")
ajax.send()
  • post方式
  • ajax.open('post','/',true,user,passwd)
  • 第一个参数指定获取格式,第二个制定路径(从哪获取),第三个制定同步或异步(true=>异步、默认为异步false=>同步),第四个是用户名,最后一个是密码

相关推荐

高效删除文件名中的指定内容,祛除烦恼

如何快速批量删除文件名中的指定字符?在电脑整理文件时,我们常常需要进行批量重命名操作。如果文件名中含有不必要或重复的字符,这将影响文件的识别和查找。因此,删除这些文字或字符是非常必要且有效的。本文将分...

你的手机是不是经常提示存储空间不足?Python帮你清理重复文件

  最近我的手机经常提示存储空间不足,主要是微信和QQ群里接收的文件太多了,平时也没怎么整理。我把这些文件从手机里拷出来,打算整理一下,把该删的文件都删掉,把要备份的文件分门别类存到电脑或网盘上。我突...

从零开始打造云端AI管理调度平台(四)如何设计主页_1

最近闲来无事,想着把自己工作正在做的一个项目做一个简单的分享与实战教程,该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容...

「万能Python」-17-标准库OS_python2.7标准库

Python的库是指预先编写好的代码集合,可以用来处理特定的任务或实现特定的功能。Python的标准库提供了许多常用的标准库,无需安装引入使用。Python3的标准库提供了许多常用的功能,包括...

十多行代码生成原帖和临写对照图_几十行代码可以申请软著吗

介绍这个小工具把原帖和临写分解成多列对照的形式。输入原帖图片,和输入临写图片,生成对照图片。使用说明运行compare.py文件,输入参数为:原帖图片文件名,临写图片文件名,列数。python3co...

Python合集之目录操作(四)_python之文件操作大全

1.删除目录删除目录可以通过os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。os.rmdir(path)path为要删除的目录,可以使用绝对路...

excel办公自动化,自动合并excel表格

平时时收到不同人反馈的excel表格,需要将其合并在一个excel中,每个excel打开复制粘贴会很慢,如下脚本可一键合并所有的exceldefauto_merge():try:print('...

批量打开一个文件夹下面所有的excel表格

如果现在有一个文件夹,名称叫做“练习表格”,路径名是'C:\Users\123\Desktop\练习表格',现在的要求是打开这个文件下面所有的excel表格,后缀名字为“xlsx”,我...

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手/右手...

python 日志写入_python日志文件写入

1.第一步,新建日志文件路径,如下图:2.日志模块封装,代码如下:importlogging,oslogs_path=os.path.join(os.path.dirname(__file...

Python os.path模块使用指南:轻松处理文件路径

前言在Python编程中,文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作,Python标准库提供了os模块。其中,os.path子模块提供了一些处理文件路径的函数和方法。本文主要...

Python中获取当前路径之pathilb和os的区别

20230114星期六:1,直接在py脚本中,执行,没有区别;2,打包成exe文件以后,在本机执行,有区别,这时,不能使用os.path.dirname(__file__),只能使用pathlib.P...

Python(办公自动化编程系列)学习笔记1

1、获得当前程序工作目录importos#os.getcwd()函数可以取得当前工作路径的字符串print(os.getcwd())运行结果2、获得程序文件夹相对路径#相对路径都用/表示#../...

文件路径名Pathnames的操作_路径和文件名是什么意思

1.现象问题使用路径名来获取文件名,目录名,绝对路径等等2.原因分析无3.问题解决使用os.path模块中的函数来操作路径名importos.path#查看标准化的绝对路径print...

关于《Python入门:os常用函数》中复制文件(夹)函数从简到繁

基本考虑练习os模块及file读写操作:将给定的源路径的文件(夹)复制到目标路径简单实现#文件到文件的复制path_src='E:\src.txt'path_tar='D...

取消回复欢迎 发表评论: