什么是jQuery?
        就是一个JavaScript函数库,开源的。
jQuery能做什么
        JavaScript是做什么的,jQuery就是做什么的,Jquery是对javascript的封装。
JQuery的特点
          1、     写少做多——Write Less,Do More
          2、     很好的解决了不同浏览器的兼容问题(css还是有问题的)
          3、     对于不同控件具有统一的操作方式
          4、     体积小,使用简单方便
          5、     链式编程、隐式迭代、插件丰富、开源、免费
          6、     让编写JavaScript程序更简单,更强大)
         优点:
          1、     轻量级
          2、     强大的选择器
          3、     出色的DOM操作的封装
          4、     可靠的事件处理机制
          5、     完善的Ajax
          6、     不污染顶级变量
          7、     出色的浏览器兼容性
          8、     链式操作方式
          9、     隐式迭代
          10、   行为层与结构层的分离
          11、   丰富的插件支持
          12、   完善的文档
          13、   开源
jQuery中的顶级对象$
       $是jQuery的简写,可以用jQuery代替$

window.onload(fn)和$(document).ready(fn)的区别:

 window.onload(fn) $(document).ready(fn)
页面完全加载完毕后才会触发   只要Dom元素加载完毕就触发,提高相应速度
每次注册新的事件都会将前面的覆盖掉    可以多次注册事件,最终都会执行

使用jQuery实现window.onload的效果:$(window).load(fn);
jQuery中提供的两个循环函数

 $.map(array,callback(element,index));对于数组array中的每个元素,调用回调函数,返回一个新的数组,原数组不变
element:当前循环的数组元素
Index:当前下标
$.each(array,fn)
遍历数组,return false退出循环
使用this表示当前元素的值

$.trim(字符串)  去掉两端的空格
 jQuery对象和Dom对象的转换
          Dom对象转换为jQuery对象:$(Dom对象)
          jQuery对象转换为Dom对象:$(Dom对象).get(0);$(Dom对象)[0];
 jQuery选择器
          Id选择器:$('#id');
          标签选择器:$('input');          $('*')获取页面上的所有元素
          属性过滤选择器:$('input[name=gender]')
          类样式选择器:$('.cls');
          标签+类选择器:$('div.cls');
          多条件选择器:$('p,div,span.menuitem')//同时选择p标签、div标签和拥有menuitem样式的span标签元素
          层次选择器:$('div li')//div下的所有li元素(所有)
                             $('div>li')//div下直接li子元素
                             $('.menuitem+div')//样式为menuitem之后的相邻的第一个div元素    =   $('.menuitem').next('div')
                             $('.menuitem~div')//样式为menuitem之后的所有的兄弟div元素       =   $('.menuitem').nextAll('div')
          基本过滤选择器::first选取第一个元素     $('div:first')
                                    :last选取最后一个元素     $('div:last')
                                    :not选取不满足选择器条件的元素     $('input:not(.cls)')
                                    :even选取索引是偶数
                                    :odd选取索引是奇数
                                    $(':header')选取所有的h1——h6元素
                                    $('div:animated')选取正在执行动画的<div>元素
          属性过滤选择器:$('div[id]')//选取有id属性的div
                                    $('div[title=test]')//title属性等于test
                                    $('div[title!=test]')//title属性不等于test或没有title属性
                                    $('input[name^=n]')//name属性以n开头
                                    $('input[name$=n]')//name属性以n结尾
                                    $('input[name*=n]')//name属性包括n
          表单对象属性过滤器:$('#form1:enabled')//选取id为form1的表单内所有启用的元素
                                          $("#form1 :disabled")//选取id为form1的表单内所有禁用的元素
                                          $("input:checked”)//选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
                                         $("select :selected")选取所有选中的选项元素
          表单选择器:$(':input')//选取所有的input、textarea、select、button
                             $(':text')//与$('input[type=text]')差不多,但有一定的区别
                            $('textarea')//错误
          可见性过滤器::hidden
          内容过滤器::contains(text)//包含指定文本的元素
                             :empty//不包含元素或者文本的元素
                             :has(input)//包含指定元素的元素
                             :parent//作为父元素的元素
          子元素过滤器:     $('ul li:first');//只返回一个li元素
                                     $('ul li:first-child’);//为每个父元素ul都返回一个li
                                     :only-child,匹配当前父元素中只有一个子元素的元素
                                     :nth-child(3n),选取3的倍数的元素
                                     :nth-child(3n+1),满足3的倍数+1的元素
                                     .children()方法,只考虑子元素,不考虑后代元素
链式编程
          注意:$('div').html('值').val('值')可以
                    $('div').html().val('值')不可以
                    括号中没有值的时候是获取值,获取值返回的是获取的字符串而不是对象,所以不能链式编程
          end()方法可以恢复链被破坏前的情况
          toggleClass('cls')切换样式的显示
          hasClass('cls')判断是否应用了某样式
          $('p:eq(0)')代表的是第一个元素
          $('p:lt(2)')前两个,索引为2之前的
          $('p:gt(2)')表示的是后两个
获得兄弟元素的几个方法
          next();//当前元素之后的紧邻着的第一个兄弟元素
          nextAll();//当前元素之后的所有兄弟元素
          prev();//当前元素之前的紧邻着的兄弟元素
          prevAll();//当前元素之前的所有兄弟元素
          siblings();//当前元素的所有兄弟元素
jQuery的迭代(包装集)
          if($('#btn').length<=0)
          {
               alert("id为btn的元素不存在!");
          }
jQuery的Dom操作
          $('a:first').html('hello');
          $('a:first').text('hello');
          $('a:first').attr('href','http://www.baidu.com');
          $('a:first').removeAttr('class');删除属性
          $('a:first').attr('class','');属性还有
动态创建Dom节点
          $("<a href='http://www.baidu.com'>百度</a>").appendTo('body');
          $('body').append("<a href='http://www.baidu.com'>百度</a>");
          prepend,在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)
          after:在元素之后添加元素(添加兄弟)增加元素后面(兄弟)
          before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)
          (*)A.insertBefore(B);将A加到到B的前面,等同于B.before(A);
          (*)X.insertAfter(Y);将X加到到Y的后面,等同于Y.after(X);
          empty()清空某元素下的所有子节点
          remove()删除当前元素,返回值为被删除的元素
          clone()克隆节点
          $('br').replaceWith('<hr/>');用<hr/>替换br
          $('<br/>').replaceAll('hr');用<br/>元素替换所有的hr

jquery基础总结的更多相关文章

  1. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  2. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  3. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  4. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  5. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 8、网页制作Dreamweaver(jQuery基础:安装、语法)

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  8. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  9. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  10. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. [CareerCup] 6.3 Water Jug 水罐问题

    6.3 You have a five-quart jug, a three-quart jug, and an unlimited supply of water (but no measuring ...

  2. 20135316王剑桥 linux第五周课实验笔记

    4.1.1程序员的可见的状态 ———— Y86的每条指令都会读取或修改处理器状态的某些部分,称为程序员可见状态.如图1所示. 1.程序寄存器(Program registers): %eax, %ec ...

  3. 20145204&20145212信息安全系统实验四报告

    20145204信息安全设计基础实验四报告 博客链接:信息安全设计基础实验

  4. 5332盛照宗 如何获取新技能+c语言学习调查

    如何获取新技能+c语言学习调查 你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...

  5. 关于ARP攻击的原理以及在Kali Linux环境下的实现

    关于ARP攻击的原理以及在Kali Linux环境下的实现 全文摘要 本文讲述内容分为两部分,前半部分讲述ARP协议及ARP攻击原理,后半部分讲述在Kali Linux环境下如何实现ARP攻击以及AR ...

  6. [C/C++基础] C语言常用函数memset的使用方法

    函数声明:void *memset(void *s, int ch, size_t n); 用途:为一段内存的每一个字节都赋予ch所代表的值,该值采用ASCII编码. 所属函数库:<memory ...

  7. ASP.NET MVC Controller Session问题

    发现问题 最近在项目中遇到这样一个问题,一直没办法重现,所以几天都没有解决. 测试那边给出的问题是这样的:每天早上来的时候,第一次通过单点登录到系统的时候,总会跳转回登录界面,再次登录就好了.当时给我 ...

  8. #Linux学习笔记# Linux文件的所有者、群组和其他人

    1.关于所有者.群组和其他人 在Linux系统中,每个文件都具有User.Group和Others三种身份的权限配置.那这三种身份分别表示什么意思呢?配置这三种身份的权限有啥意义呢? (1)文件所有者 ...

  9. Android学习第八弹之改变状态栏的颜色使其与APP风格一体化

    公众号:smart_android 作者:耿广龙|loonggg 点击"阅读原文",可查看更多内容和干货 导语:沉浸式状态栏,改变状态栏的颜色使之与APP风格一体化是不是感觉很漂亮 ...

  10. Object C学习笔记14-分类(category)

    在.NET中有一个非常带劲的特性,那就是扩展方法. 扩展方法使你能够向现有类型“添加”方法(包括你自定义的类型和对象噢),而无需创建新的派生类型.重新编译或以其他方式修改原始类型.扩展方法是一种特殊的 ...