一、 基本概念

  1. jQuery简介

jQuery是一个基于javascript的框架。它提供了丰富的选择器和大量的函数,可以方便的实现网页中各种动态的效果。迄今为止,已经有大量的jquery插件和基于jQuery的UI框架(miniui、easyui、ligerui)。

jQuery的宗旨是:write less,do more!

  1. 文档加载完毕函数

常规形式:$(document).ready(function(){… …});

简写形式:$(function(){… …});

  1. jquery对象和js对象的相互转化

jquery对象不等同于js对象!

js对象的属性和方法,jquery对象不能调用;jquery对象的属性和方法,js对象也不能调用。

js转jquery:$(js对象)

jquery转js:$(“#box1”).get(0)  或者    $(“.box”)[0]

二、 选择器

jquery的基石就是选择,jquery提供了大量的选择器。建议在不同的业务场景下使用不同的选择器。

注意:通过任何一个选择器筛选到的结果都是一个数组,所以要判断通过选择器是否筛选到了元素,可以通过length属性进行判断。

  1. 基本选择器

n ID选择器

$(“#ID值”)    例如:$(“#txt1”)

n 类选择器

$(“.class名称”)   例如:$(“.box”)

n 标记选择器

$(“tagName”)   例如:$(“div”)

n 组合选择器

$(“selector1,selector2,selector3”)   例如:$(“.box,#txt1,div”)

n 通配符选择器

$(“*”)

  1. 层次选择器

n 父子选择器

$(“selector1 > selector2”)

n 祖先后代选择器

$(“selector1   selector2”)

n 后兄弟选择器

$(“selector1~siblings”)

n 相邻的后兄弟选择器

$(“selector1 + selector2”)

  1. 基本过滤选择器

n :first :筛选第一个元素

n :last :筛选最后一个元素

n :odd :筛选索引值为奇数的元素

n :even :筛选索引值为偶数的元素

n :eq(n) :筛选索引值等于n的元素

n :gt(n) :筛选索引值大于n的元素

n :lt(n) :筛选索引值小于n的元素

n :not(selector) :筛选排除selector以外的元素

  1. 内容过滤选择器

n :contains(text) :筛选文本内容包含text的元素

n :empty :筛选不包含任何子元素和文本内容的元素

n :parent :筛选包含子孙元素或文本内容的元素

  1. 可见性过滤选择器

n :visible :筛选可见元素

n :hidden :筛选不可见元素

  1. 属性过滤选择器

n [attr] :筛选存在attr属性的元素

n [attr=value] :筛选attr属性值等于value的元素

n [attr!=value] :筛选attr属性值不等于value的元素

n [attr^=value] :筛选attr属性值以value开头的元素

n [attr$=value] :筛选attr属性值以value结尾的元素

n [attr*=value] :筛选attr属性值包含value的元素

  1. 表单属性选择器

n :checked :筛选选中状态的单选按钮和复选框

n :selected :筛选选中的下拉列表项

n :enabled :筛选可用的表单元素

n :disabled :筛选不可用的表单元素

  1. 表单对象选择器

n :text :筛选单行文本框

n :button :筛选按钮元素

n :submit :筛选提交按钮

n :password :筛选密码框

n :radio :筛选单选按钮

n :checkbox :筛选复选框

n :file :筛选文件域

n :image :筛选图片

一、 筛选函数

n parent() :获取父元素

n children() :获取子元素

n next() :获取相邻的后兄弟元素

n nextAll() :获取所有的后兄弟元素

n prev() :获取相邻的前兄弟元素

n prevAll() :获取所有的前兄弟元素

n find() :从子孙后代元素中查找满足条件的子孙元素(过滤后的是这组元素的子孙元素)

n filter() :从一组元素中筛选满足条件的元素(过滤后的是这一组元素中的部分元素)

n first() :获取第一个元素

n last() :获取最后一个元素

n siblings() :获取所有的同辈元素

n not() :排除指定的元素

n index() :获取一个元素在一组元素中的索引值

n eq(n) :获取索引值等于n的元素

二、 样式操作

n css(“css属性”) :获取css属性的值

n css(“css属性”, “值”) :给css属性赋值

n css({“css属性1”:“值”,  “css属性2”:”值”}) :通过给多个css属性赋值

n addClass :添加class样式

n removeClass :移除class样式

n toggleClass :切换class样式

n hasClass :判断是否拥有class样式,有返回true,否则返回false

三、 属性操作

n attr(“属性名”) :获取属性的值

n attr(“属性名”, “值”) :给属性赋值

四、 DOM操作

n append() :追加子元素(最后一个子元素)

n prepend() :添加子元素(第一个子元素)

n remove() :移除元素

n empty() :清除所有的子孙元素

n after() :添加一个后兄弟元素

n before :添加一个前兄弟元素

五、 事件

  1. 事件的类型

load、click、dblclick、focus、blur、change、mouseover、mouseout、mousemove、mouseenter、mouseleave、keyup、keydown、keypress、scroll、resize

  1. 事件函数

n bind :为事件绑定函数

$(“#button1”).bind(“click”, function(){… …})

n unbind :解除绑定的事件

$(“#button1”).unbind(“click”);

n click(function(){}) :为事件绑定函数的另一种写法

$(“#button1”).click(function(){… …});

n click() :触发或模拟单击事件

  1. 事件参数

$(“#button1”).click(function(event){

event.target:获取触发当前事件的元素

event.source:

event.which:获取对应的键盘按键值和鼠标按键值

event. preventDefault():阻止浏览器默认行为

event. stopPropagation():阻止事件冒泡

});

一、 动画

n show([slow|normal|fast]|毫秒数):让元素显示

n hide([slow|normal|fast]|毫秒数):隐藏元素

n toggle([slow|normal|fast]|毫秒数):切换元素的显隐状态

n slideUp():让元素隐藏(高度逐渐变为0)

n slideDown():让元素显示(高度从0逐渐恢复到原始高度)

n slideToggle():切换元素的显隐状态(改变的是高度)

n fadeIn():让元素显示(透明度逐渐变为不透明)

n fadeOut():让元素隐藏(改变透明度逐渐变为透明)

n fadeToggle():切换元素的显隐状态(改变透明度)

n animate():自定义动画

$(“#box1”).animate({width:”+=50px”, height:”200px”}, 1000)

二、 其他函数

n height()、height(val)

n width()、width(val)

n val(value)、val()

n text(value)、text()

n html(value)、html()

上述函数有参数表示赋值,没有参数表示获取值。

jquery知识点复习的更多相关文章

  1. Spring知识点复习

    Spring知识点复习 一.专业术语 侵入式设计 引入框架,对现有的类的结构有影响,即需要实现或继承某些特定类.如:Struts框架 非侵入式设计 引入框架,对现有的类结构没有影响.如:Hiberna ...

  2. Hybrid App 应用开发中 9 个必备知识点复习(WebView / 调试 等)

    前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 <Hybrid APP 混合应用专题> 主题的第二期和第三期的合集. 这一期共整理了 10 个问题,和相应的参考答 ...

  3. python类,魔术方法等学习&&部分ssti常见操作知识点复习加深

    python类学习&&部分ssti常见操作知识点复习加深 在做ssti的模块注入的时候经常觉得自己python基础的薄弱,来学习一下,其实还是要多练习多背. 在python中所有类默认 ...

  4. C语言知识点复习梳理

    C语言知识点复习梳理 C语言的知识点讲完了,接下来就是做一下整理与总结,然后就会进入其他知识的学习. 本文目录如下: 基础知识. 顺序程序设计. 数据类型. 标准输入输出. 进制转换. 选择结构. 循 ...

  5. jQuery知识点总结(第二天)

    今天继续从我的笔记上面搬运.我们不产生知识,只是知识的搬运工. 内容过滤选择器: ○ 内容选择过滤器                                       $("div ...

  6. jQuery知识点总结(第一天)

    整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下 ...

  7. 一周一话题之四(JavaScript、Dom、jQuery全面复习总结<jQuery篇>)

    -->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...

  8. JSOI2020备考知识点复习

    我太菜了qaq,我好爱咕咕咕啊 在NOIP2018爆炸后,我只能指望着在JSOI2019JSOI2020上咸鱼翻身(flag*1) 所以,我要开始复习学习(flag*2) 此博客文会不定时更新qaq( ...

  9. Asp.Net 之Jquery知识点运用

    1.先把要用的body内的代码写好. <div id="ulBox"> <h3>下面的Ulid为"ulList1"</h3> ...

随机推荐

  1. jQuery Deferred和Promise的使用介绍:

    deferred对象是从jquery1.5.0引入的一个新对象,ES6也引入了Promise的正式规范. 抽象来说,deferreds 可以理解为表示需要长时间才能完成的耗时操作的一种方式,相比于阻塞 ...

  2. Windows 10 IoT Core环境配置中的那些坑

    我使用的设备是Raspberry Pi 3B,想来国内的嵌入式玩具应该还是树莓派最常见吧.这段时间一直在捣鼓Win10 IoT,结果发现,从安装一直到编码调试一路下来全都是坑.写这篇东西一个是为了备忘 ...

  3. webpack 学习心得(一)

    Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 因为本人也正在学习webpack ,所以此篇文章比较入门. 首先你想使用webp ...

  4. ArcGIS制图表达Representation实战篇3-控制点

    ArcGIS制图表达Representation实战篇3-控制点 by 李远祥 这一章讲述的是一个非常专业的名词,叫控制点.此控制点非测绘行业术语的控制点,而是制图表达里面的控制点,所以不能混为一谈. ...

  5. JAVA传值与传址

    要了解JAVA中的传值与传址问题,必要先要了解JVA中的栈内存和堆内存,>>>>点些查看<<<<昨天写的学习记录 栈:基本数据类型.数据的引用变量,这两 ...

  6. Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSInvocation setArgument:atIndex:]: index (3) out of bounds [-1, 2]'

    这是相机调用方法的时候参数错误

  7. 前端基本知识(二):JS的原始链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  8. mybatis入门-框架原理

    mybatis是什么 在说mybatis原理之前,我们有必要知道,mybatis到底是个什么东西.mybatis是一个持久层的框架.是一个不完全的ORM框架.因为它需要由程序员自己去写sql语句.但是 ...

  9. Vuex原来可以这样上手

    在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速.vue实现了Dom与viewModel双向绑定,使其视图的更新影响模型,模型的更新影响视图,你会不会 ...

  10. 简易封装手机浏览器touch事件

    做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...