美文网首页
JQuery知识点总结

JQuery知识点总结

作者: 文艺的程序狗 | 来源:发表于2020-03-24 10:25 被阅读0次

概述

轻量级的JavaScript库

功能

  • html元素元素选取/操作
  • css操作
  • html事件函数
  • JavaScript特效动画
  • DOM遍历与修改
  • ajax网络请求
  • utilities 工具集
    引入
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
建议使用国内的 百度 新浪等CDN地址

或者下载在网页同一目录
<script src='jquery-1.10.2.min.js'>
</script>
ps:小程序不支持jquery:没有DOM api
React一般不用jquery:jquery的几个功能,修改DOM,监听事件,网络请求,工具函数;react 网络请求axios 工具集lodash等 有自己的生态圈

选择器

$(selector).action()

$(this).hide()隐藏当前元素
$("p") p标签
$("p.test") p标签 class=‘test’
$("#test") id='test'
$("*") 全部元素
$("p:first") 第一个p元素
$("ul li:first")第一个ul的第一个li元素
$("ul li:first-child") 选取每个ul的第一个li元素
$("['href']")属性有href元素
$("a[target='_blank']")
$(":button") 所有type等于button的元素
$("tr:even")tr偶数
$("tr:odd")tr奇数
jquery选择器是xpath和css的结合

效果

淡入淡出&滑动

toggle()切换隐藏显示
fadeIn() 慢慢显示 fadeIn("slow/fast") fadeIn(3000)
fadeOut() 与fadeIn相反
fadeToggle() 切换
fadeTo("slow",0.5) 渐变到指定透明度

slideUp(speed,callback)
slideUp() 向上滑动
slideDown() 向下滑动
slideToggle 切换

动画

animate
$(selector).animate({params},speed,callback)
params是css属性
$('div').animate({left:'25px'})

扩展:
相对值写法 width:'+=250px'
使用预定义值 height:'toggle'
使用队列 编写多个animate
jquery链写法(相同元素) $("#nice").css("color","red").slideUp(2000)

stop(stopEnd,goToStop)停止动画
stopEnd:停止该元素所有动画 包括队列还未执行的
goToStop 立即完成动画
ps:默认情况,所有元素都有静态位置,不能移动,要移动需要设置relative absoule fixed
属性写法使用驼峰,eg:paddingLeft

HTML

捕获

html() 标签内容 包含标签
text() 标签内容 不包含标签 
val() input的value值
attr('href') 获取属性值
attr('href','http://www.baidu.com') 设置属性值
attr('href',function(i,originValue){})回调函数

添加元素

append 结尾添加
preappend 开头添加
after 之后添加
before 之前添加

删除元素

remove 删除元素
empty 情况元素
remove('.nice') 过滤元素

操作css

addClass("blue important") 增加元素
removeClass("blue") 移除元素
toggleClass() 添加和删除切换
css() 设置/返回
$("p").css('background-color') 返回
css('background','yellow') 一个
css('background':'yellow','font-size':'200%')多个

尺寸

width 元素宽度(包括padding)
innerWidth 元素实际宽度
outterWidth 元素宽度(包括margin)

DOM遍历

父级
parent 父元素
parents 所有祖先
parentsUntil 两个给定元素的所有父元素
$('p').parentsUntil('div')

子级
children('p.a')返回class=a 直接子元素p
find('span') 寻找所有标签为span的后代元素

同胞
sliblings 所有同胞元素

过滤
firt 第一个
last 最后一个
eq(0) 第一个
filter 过滤条件
not 与filter想法

next nextAll nextUntil pre preAll preUntil

AJAX

load(url,data,callback)
从服务器加载数据,并把返回数据插入被选元素
post
get

相关文章

  • js中的oop(二)

    (二)理解jquery的$.extend()和$.fn.extend() (三)Java面向对象知识点总结

  • 第八周第四天笔记之jQuery知识点

    jQuery知识点 1 基础知识 jQuery API网站:jQuery库网站 知识点解读原生JS与jQuery代...

  • Jquery知识点总结

    一:认识jquery jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Aj...

  • Jquery 知识点总结

    一 简介 jquery 是一个js类库,其实就是对js常用的方法进行封装,方便我们使用。 二 jquery和htm...

  • Jquery知识点总结

    了解JQuery JQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的J...

  • JQuery知识点总结

    概述 轻量级的JavaScript库 功能 html元素元素选取/操作 css操作 html事件函数 JavaSc...

  • JQuery学习:第一篇

    相关知识点: jquery的介绍 jquery控制css jquery控制html jquery控制标签属性 jq...

  • 前端知识温习

    js知识点 温习js css知识点 温习css jquery温习 自己实现一个jquery vue框架温习 温习v...

  • jQuery知识点记录

    关于jQuery的知识点记录 1.jQuery基础 core functionality: getting som...

  • jQuery自学经历--jQuery知识点笔记总结

    最近看黑马程序员教程自学jQuery基础时,做了一些笔记,欢迎大家一起交流。 附上自学的视频资料:Ajax、jQu...

网友评论

      本文标题:JQuery知识点总结

      本文链接:https://www.haomeiwen.com/subject/lganyhtx.html