前端jQuery部分简单整理

jQuery的介绍为什么要使用jQuery    在用js写代码时，会遇到一些问题：    window.onload 事件有事件覆盖的问题，因此只能写一个事件。    代码容错性差。    浏览器兼容性问题。    书写很繁琐，代码量多。    代码很乱，各个页面到处都是。    动画效果很难实现。jQuery的出现，可以解决以上问题。

什么是 jQueryjQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

jQuery 的两大特点链式编程：比如.show()和.html()可以连写成.show().html()。隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

使用 jQuery 的基本步骤    （1）引包    （2）入口函数    （3）功能实现代码（事件处理）

jQuery 的入口函数和 $ 符号写法一：    //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。           $(document).ready(function () {               alert(1);           })写法二：// 2.文档加载完毕，图片不加载的时候，就可以执行这个函数。        $(function() {            alert(1);        });写法三：        // 3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。        $(window).ready(function(){            alert(1);        })

jQuery入口函数与js入口函数的区别：区别一：书写个数不同：    Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。    jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。区别二：执行时机不同：    Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。    jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。文档加载的顺序：从上往下，边解析边执行。

jQuery的$符号jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

js中的DOM对象 和 jQuery对象 比较其本质jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

二者的相互转换

jQuery的选择器jQuery 的基本选择器

层级选择器

基本过滤选择器

属性选择器

筛选选择器

jQuery动画效果显示动画方式一：    $("div").show();方式二：    $(‘div‘).show(3000);方式三：    $("div").show("slow");方式四：//show(毫秒值，回调函数;    $("div").show(5000,function () {        alert("动画执行完毕！");    });

隐藏动画$(selector).hide();$(selector).hide(1000);$(selector).hide("slow");$(selector).hide(1000, function(){});

开关式显示隐藏动画$(‘#box‘).toggle(3000,function(){});显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

滑入和滑出1、滑入动画效果：（类似于生活中的卷帘门）$(selector).slideDown(speed, 回调函数);2、滑出动画效果：$(selector).slideUp(speed, 回调函数);3、滑入滑出切换动画效果：$(selector).slideToggle(speed, 回调函数);

淡入淡出动画1、淡入动画效果：$(selector).fadeIn(speed, callback);2、淡出动画效果：$(selector).fadeOut(1000);3、淡入淡出切换动画效果：$(selector).fadeToggle(‘fast‘, callback);

自定义动画$(selector).animate({params}, speed, callback);作用：执行一组CSS属性的自定义动画。    第一个参数表示：要执行动画的CSS属性（必选）    第二个参数表示：执行动画时长（可选）    第三个参数表示：动画执行完后，立即执行的回调函数（可选）

停止动画$(selector).stop(true, false);第一个参数：    true：后续动画不执行。    false：后续动画会执行。第二个参数：    true：立即执行完成当前动画。    false：立即停止当前动画。PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

jQuery的属性操作jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作    html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()    DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()    类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()    值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

设置属性值或者 返回被选元素的属性值attr()

移除属性removeAttr()prop()

关于attr()和prop()的区别

什么时候使用attr()，什么时候使用prop()？1.是有true,false两个属性使用prop();2.其他则使用attr();

addClass（添加多个类名）removeClass从所有匹配的元素中删除全部或者指定的类。（可以通过添加删除类名，来实现元素的显示隐藏）

toggleClass如果存在（不存在）就删除（添加）一个类。//toggleClass(‘box‘)

htmlhtml() 是获取选中标签元素中所有的内容

texttext() 获取匹配元素包含的文本内容

valval()用于表单控件中获取值，比如input textarea select等等

使用jQuery操作input的value值

jQuery的文档操作插入操作父元素.append(子元素)解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

子元素.appendTo(父元素)解释：追加到某元素 子元素添加到父元素

父元素.prepend(子元素)；解释：前置添加， 添加到父元素的第一个位置

父元素.prependTo(子元素)；解释：后置添加， 添加到父元素的最后一个位置

父元素.after(子元素)；子元素.inserAfter(父元素)；解释：在匹配的元素之后插入内容

父元素.before(子元素)；子元素.inserBefore(父元素)；解释：在匹配的元素之后插入内容

克隆操作$(选择器).clone();解释：克隆匹配的DOM元素

修改操作$(selector).replaceWith(content);将所有匹配的元素替换成指定的string、js对象、jquery对象。

$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);解释：替换所有。将所有的h2标签替换成p标签。

删除操作$(selector).remove();解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$(selector).detach();解释：删除节点后，事件会保留

$(selector).empty();解释：清空选中元素中的所有后代节点

jQuery的位置信息宽度和高度获取宽度   .width()设置宽度   .width( value )

高度获取高度    .height()设置高度    .height( value )

innerHeight()和innerWidth()获取内部宽    .innerWidth()设置内部宽    .innerWidth(value);

获取内部高    .innerHeight()设置内部宽    .innerHeight(value);

outWidth和outHeight()获取外部宽     .outerWidth( [includeMargin ] )设置外部宽     .outerWidth( value )

获取外部高     .outerHeight( [includeMargin ] )设置外部高     .outerHeight( value )

偏移获取    .offset()设置     .offset( coordinates )

元素坐标    .position()滚动距离获取：    水平方向   .scrollLeft()描述：获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）

设置：    .scrollLeft( value )描述：设置每个匹配元素的水平方向滚动条位置。

垂直方向获取：    .scrollTop()描述：获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）设置：    .scrollLeft( value )描述：设置每个匹配元素的垂直方向滚动条位置。

JS的事件流的概念什么是事件流事件流描述的是从页面中接收事件的顺序1、DOM事件流“DOM2级事件”规定的事件流包括三个阶段：    ① 事件捕获阶段；    ② 处于目标阶段；    ③ 事件冒泡阶段

document、documentElement和document.body三者之间的关系：    document代表的是整个html页面；    document.documentElement代表的是<html>标签；    document.body代表的是<body>标签；

三阶段示意图：

jquery的常用事件

事件对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件流的由来微软和网景乱搞

关于event对象

jQuery的事件绑定和解绑绑定事件语法    bind(type,data,fn)    描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

参数解释：    type (String) : 事件类型    data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象    fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

解绑事件语法    unbind(type,fn);描述：    bind()的反向操作，从每一个匹配的元素中删除绑定的事件。    如果没有参数，则删除所有绑定的事件。    如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数解释：    type (String) : (可选) 事件类型    fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

把所有段落的所有事件取消绑定    $("p").unbind()

自定义事件语法    trigger(type,data);    描述：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。

参数解释：    type (String) : 要触发的事件类型    data (Array) : (可选)传递给事件处理函数的附加参数

一次性事件语法    one(type,data,fn)描述：    为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同

参数解释：    type (String) : 事件类型    data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象    fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

事件委托（事件代理）什么是事件委托通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

原理：　　利用冒泡的原理，把事件加到父级上，触发执行效果。作用：    1.性能要好    2.针对新创建的元素，直接可以拥有事件

事件源:　　跟this作用一样(他不用看指向问题，谁操作的就是谁), event对象下的使用情景：　　为DOM中的很多元素绑定相同事件；　　为DOM中尚不存在的元素绑定事件；

语法：on(type,selector,data,fn);描述：在选定的元素上绑定一个或多个事件处理函数

参数解释    events( String) : 一个或多个空格分隔的事件类型    selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素    data: 当一个事件被触发时，要传递给事件处理函数的event.data。    fn:回调函数

轮播图实现  网上到处都有，改改就行了

jQuery的ajax什么是ajax    AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）    简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。    通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery的load()方法load()方法从服务器加载数据，并把返回的数据放入被选元素中。语法    $("selector").load(url,data,callback);

jquery的getJSON方法jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中语法:    $.getJSON(url,[data],[callback])

参数解释：    url参数：为请求加载json格式文件的服务器地址    可选项data参数：为请求时发送的数据    callback参数：为数据请求成功后执行的函数

jquery的$.get()方法    $.get() 方法通过 HTTP GET 请求从服务器上请求数据语法：    $.get(URL,callback);

url参数：规定你请求的路径，是必需参数callback参数：为数据请求成功后执行的函数

jquery的post()方法post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面语法：    $.post(URL,data,callback);

url参数：规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据可选的callback参数：为数据请求成功后执行的函数

基本格式//get()方式  $.ajax({     url:‘./data/index.txt‘,     type:‘get‘,     dataType:‘text‘,     success:function(data){        $(‘p‘).html(data);

},     error:function(error){        console.log(error)     }

//post()方式$.ajax({   url:‘/index‘,   type:‘post‘,   data:{name:‘张三‘,age:12},   success:function(data){      $(‘p‘).html(data);   },   error:function(error){      console.log(error)}

XMLHttpRequest自己学去吧

jquery还包含：    jquery 插件    https://www.oschina.net/project/tag/273/jquery    jqueryUI       https://jqueryui.com/      http://www.jqueryui.org.cn/

原文地址：https://www.cnblogs.com/ngz311616/p/9483560.html