一、名词释义

1 、js的入口函数:要等待文档树的加载完成,并且等待所有图片、文件都加载完成之后才开始执行。

2  、jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载

3 、js的入口函数:

  window.onload = function () {

           console.log("我是js的入口函数");

        };

4 、DOM对象:使用js的方法获取到的页面中的元素返回的就是DOM对象

5 、jquery对象:使用jquery的方法获取到页面中的元素,返回的就是jquery对象

6 、DOM对象只能调用DOM对象的属性和方法,不能调用jquery对象的属性和方法

7 、jquery对象不能调用dom对象的方法和属性

基本选择器:设置样式:.css(“”,””);   css(name, value);

过滤选择器:$(“li:odd”).css(“name”,”value”);

$(“li:even”).css

$(“li:eq(index)”).css    index是变量的话要冒冒加加     或者 .eq(index)

查找的是所有后代元素,一般来说find这个参数是有必要

二、操作部分1

1、class操作: 添加类.addClass(“basic”);

移除类.removeClass(“basic”);

判断类.hasClass(“name”);

切换类.toggleClass(“name”);

2、jQuery动画显示与隐藏:.show(10000,function(){alert(“动画执行完了”);});    .hide()

callback:回调,动画执行完了,才开始执行

(改变的样式:width,height,opacity)

滑入滑出:使用方法和显示隐藏使用方法基本一样

slideDown  slideUp  slideToggle

(改变的样式:height)

淡入淡出:用法与滑入滑出用法一模一样

.fadeIn   .fadeOut  fadeToggle  .fadeTo(1000,0.5)

(淡入淡出修改的是opacity)

3、jQuery动画版下拉菜单:   $(this).children("ul").stop().slideDown();

$(this).children("ul").stop().slideUp();

4、jQuery自定义动画:.animate({“left”:”600px”,””:””},1000)

自定义动画 :    animate(obj, speed, [easing], [callback])

easing参数:控制动画的执行速度

swing:摇摆(秋千)(默认)(先慢,再快,后慢)

linear:匀速效果

360开机动画:animate(obj,speed,function(){})

动画队列:每一个元素都有动画动画队列

5、 停止动画

stop():停止当前动画

clearQueue:是否清除动画队列(true/false)

jumpToEnd:是否跳转到当前动画最终效果(true/false)

6、添加节点

append:添加到子级的最后面

prepend:添加到子级的最前面

after:添加到调用者的后面,作为兄弟元素

before:添加到调用者的前面,作为兄弟元素

城市选择案例: var $option = $("#src-city>option:selected");

$("#tar-city").append($option);

Html方法:$("div").html("<h1>我是标题</h1>");//设置内容

console.log($("div").html());//什么都不传,就是获取

7、表格生成案例:,用对象数组获取数据。再通过字符串的拼接,最后.html(str);

html():  html(htmlStr) :设置内容

html():获取内容

清空元素(清理门户):empty()推荐

html("")

删除元素(自杀):remove()

8、克隆元素:

var $p = $("p").clone();
$p.html("我改变了内容");
$("div").append($p);

clone() :深度复制  放在事件上面则可以触发事件

放在事件下面不可以触发事件,要触发必须加 clone(true)

clone(true):事件也会复制上

9、 属性操作(jquery操作DOM:属性操作用attr()方法      用法跟css方法一样

设置单个属性:attr(name, value)

设置多个属性:attr(obj)

获取属性:attr(“name”) :注意:

移除属性:removeAttr(name):移除属性

三、操作部分2与事件部分

1、prop(“ ”,true/false)方法:disabled/selected/checked 布尔类型的值用prop放法

2、表格全选案例:1获取头prop(“checked")是否选中,设置身的是否选中

2通过比较 allLength 与checkedLength( $("#j_tb input:checked").length)        是否相等,来设置头是否选中

3、操作value值: val(value):设置值          (文本框text)

val():获取值

4、操作内容: html(value):设置内容,能识别html标签

html():获取内荣,能获取到标签

text(value):设置内容,会转义html标签(带标签)

text():获取内容,丢弃html标签

5、操作宽度和高度(number):width(value):设置宽度 .css("height")):获取的会有单位px

width():获取宽度

height(value):设置高度

height():获取高度

6、操作位置

  offset():相对文档

offset({top:20,left:0}):设置位置,注意如果没有定位,会加上position:relative

offset():获取{top:20,left:0}    css({“”:”” ,””:””})相对有定位的设置:子绝父相

  position():相对有定位的父元素

只能获取,不能设置

7、 操作滚动: $(window).scroll(function () {};

scrollTop(value):设置

scrollTop():获取卷去的垂直距离              number

scrollLeft(value):设置卷去的水平距离

scrollLeft():获取卷去的水平距离

8、on方式注册事件(★★★★★)

给自己绑定事件:$("div").on("click", function(){})

注册代理事件:$("div").on("click", "p", function(){}) (添加的标签也可以有事件)

如果一个元素上有多个事件,首先会处理委托事件,然后处理本身的事件

9、解绑事件

off():解绑所有的事件,包括代理事件

off("click"):解绑指定的事件

off("click", "**");解绑代理事件

10、触发

click():会

trigger("click"):会

triggerHandler("click"):不会触发默认行为

11、按键变色案例:$(document).keydown事件 然后 var keyCode = e.keyCode; 然后通过.css()               设置背景色

12、事件对象

Event.data           data参数不能传字符串,应该传对象

$("div").on("click", {"name":"zs", age:18}, function (e) {

                 alert("哈哈,我有" + e.data.name);  })

});

event.keyCode

event.stopPropagation()  阻止事件冒泡

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

return false:既能阻止事件冒泡,还能阻止浏览器的默认行为。

13、五角评分案例:①li注册mouseenter事件:当前元素实心,前面为实心、后面为空心

②ul注册mouseleave事件:所有li为空心

找到添加active类的li,设置实心,前面也为实心

③li注册click事件:当前li添加active类,其它兄弟元素移除该类

14、显示迭代:

for()手动迭代

each(function(index,element){})

15、 多库共存:

$.noConflict()

四、链式编程

1、链式编程:1. 只有设置性的操作才能链式下去。(return this)

2. 获取性操作不能链式下去(因为要返回具体指) width() number     css("backgroundColr") string

3. 使用筛选选择器的时候要慎用,会修改jquery对象里面的DOM对象。

如何解决:

重新写

end()

2、jQuery.Color插件的使用:颜色渐变

3、jQuery.lazyload插件的使用:页面,滑到才加载图片等出来

4、如何制作插件:

$.fn.changeGreen=function(){this.css("backgroundColor", "green");}

5、jquery-ui.js的使用:新闻模块

JQUERY 知识点的自我总结的更多相关文章

  1. jQuery知识点总结(第六天)

    今天工作繁忙,晚上又和所谓的'朋友',吃了自助烧烤. 但我内心是很抗拒的,不知为了什么,竟然稀奇古怪的答应了下来,竟要去吃饭.我向来不喜欢去凑热闹,特别是和志趣不投的人在一起吃,对方所说的话,自己根本 ...

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

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

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

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

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

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

  5. JQuery知识点总结

    一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...

  6. Jquery知识点

    Jquery $代表选择器 JS 选取元素 操作内容 操作属性 操作样式 <div id="aa" style="width:100px; height:100px ...

  7. Jquery知识点梳理

    Jquery $代表选择器 JS 选取元素 操作内容 操作属性 操作样式 <div id="aa" style="width:100px; height:100px ...

  8. jQuery知识点一 each()和toggleClass()

    jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element))         inde ...

  9. jQuery知识点总结(第五天)

    节点的操作和数据库操作一样,无非是增.删.改.查. 今天总结删除节点.复制节点.替换节点.与包裹节点 删除节点: 如果文档中一个元素多余,那么就需要删除掉.jQuery提供了三种删除节点的方法.分别是 ...

随机推荐

  1. 2015 MVP OpenDay 及 Community Camp 演讲PPT分享

    这两天来到首都北京参加一年一度的MVP OpenDay 和 MVP Community Camp.其中,31号下午有我的课程:What Will You Make: Windows IoT应用开发入门 ...

  2. iOS分析UI利器——Reveal及简单破解方法

    Reveal作为分析APP UI的利器确实非常好用,用来查看任意UI布局也很方便 一.模拟器进行分析 1.打开Reveal(http://revealapp.com下载) 2.打开Xcode 3.Re ...

  3. dubbo源码分析4-基于netty的dubbo协议的server

    dubbo源码分析1-reference bean创建 dubbo源码分析2-reference bean发起服务方法调用 dubbo源码分析3-service bean的创建与发布 dubbo源码分 ...

  4. python实现删除文件与目录的方法

    os.remove(path) 删除文件 path. 如果path是一个目录, 抛出 OSError错误.如果要删除目录,请使用rmdir().os.rmdir()只能删除空目录 remove() 同 ...

  5. MySQL 视图知识点小结

    视图本身是一个虚拟表,不存放任何数据.在使用SQL语句访问视图的时候,它返回的数据是MySQL从其他表中生成的.视图和表在同一个命名空间, MySQL在很多地方对于视图和表是同样对待的.不过视图和表也 ...

  6. 【HTML】Intermediate4:Tables:rowspan and colspan

    1.</th> header cell As with td elements,these must be enclosed inside tr elements 2.</tr co ...

  7. FineUI开发实践-目录

    点我订阅 目前所有博客的截图,方便离线观看,点图片 FineUI初学手册 下载,实例项目搭建 FineUI初学手册-部分JS整理 部分JS整理 ASP.NET-FineUI开发实践-1 实际开发环境是 ...

  8. Python +selenium自动化环境的搭建

    Python +selenium+googledriver 小白的血泪安装使,不停的总结写心得是理解透彻的毕竟之路 一,python的安装: 首先去Python的官网下载安装包:https://www ...

  9. poj 2253 Frogger (最小最大路段)【dijkstra】

    <题目链接> 题目大意: 给出青蛙A,B和若干石头的坐标,现青蛙A想到青蛙B那,A可通过任意石头到达B,问从A到B多条路径中最小的最长边. 解题分析: 这是最短路的一类典型题目,与普通的最 ...

  10. jq 智能搜索

    案例:http://www.runoob.com/jqueryui/example-autocomplete.html <input  type="text" style=& ...