2018-10-11 jquery 第一天思维导图笔记

jQuery 第一天

jQuery使用，jQuery选择器

jQuery整体框架设计

回顾js课程

jQuery 解决问题

 1.window.onload 事件有事件覆盖的问题，只能写一个

 2.代码容错性差

 3.浏览器兼容性差

 4.书写繁琐,代码量大

 5.代码很乱，各个页面导出都是

 6.动画效果，我们很难实现

jQuery的基本使用

 开发中用-未压缩的版本，上线用压缩过的

 版本问题 1.11.3 or 2.1.4

  1.xxx 版本

  2.xxx 版本

   不支持ie 678

 第一步:引包

  用jQuery之前，先引入jQuery,再去写我们的jquery代码

   浏览器遇到js 把所有其它事情都停了 ，先去加载文件，然后解析js js文件

 第二步:入口函数

  1.$(document).ready(function(){});

  2.$(function(){});

 第三步:事件处理程序

  1.事件源

   a) jQuery: JS:Document.getElementById('id');

   b) $("#id")

  2.事件

   a) JS:Document.getElementById('id').onclick;

   b) jQuery: $("#id").click

  3.事件处理程序

   a) JS:Document.getElementById('id').onclick = function(){ //语句}

   b) jQuery: $("#id").click(function(){ //语句 });

jQuery的详细介绍

 1.$

  a) Js命名归纳:下划线,字母,$,数字

  b)但是不能以数字作为开头

  jQuery的两个变量:$ 和 jQuery

  jQuery 占用了我们两个变量 $ 和 jQuery

   专业名词叫污染

 jQuery入口函数的实现

   var iQuery = function () { var obj = { ready : function (func) { func(); } }; return obj; }; iQuery().ready(function () { console.log("我是ready") });

 jS如何函数和jQuery如何函数的区别

  js的window.onload 事件 是等到所有的内容以及我们的外部图图片之类的文件 加载完之后才会去执行---早

  jQuery的入口函数 是在 html所有标签都加载之后,就会去执行---晚

 js中 对象和json的区别

  js对象:var obj = { ready: function(){ }};

  json:{"":""} 一定要加双引号

 js创建对象

  面试题:三种方式

    var obj = { ready:function () { } };

   var obj1 = new Object(); obj1.ready = function () { };

   var obj2 = Object.create();

  1跟2的区别

   推荐第一种方式,第二种方式存在效率的问题 因为要new对象，会涉及到原型查找的问题

 jquery选择器

  CSS选择器回顾

   #id

    Id选择器

     #id{ color:red; }

   .class

    类选择器

     .class{ //}

   Element

    标签选择器

     P { //}

   *

    通配符选择器

     配合其他选择器来使用

   ,

    并集选择器

     div,p{}

    空格

    后代选择器

     选择div下面所有后代的span

   >

    子代选择器

     div > span{}

   +

    紧邻选择器

     div+p 选择div紧挨着的下一个p元素

 ul>li{兄弟很多$}*8

   {表示内容} $表示序号

 jQuery特点隐式迭代

  内部循环

 jquery选择器

  jquery基本选择器

   $(“#demo”)

    选择id为demo的第一个元素

     $(“#demo”).css(“background”,”red”)

   $(“.liItem”)

    选择所有类名（样式名）为liItem的元素

     $(“.liItem”). css(“background”,”red”);

   $(“div”)

    选择所有标签名字为div的元素

     $(“div”). css(“background”,”red”);

   $(“*”)

    选择所有元素 少用或配合其他选择器来使用

     $(“*”). css(“background”,”red”)

   $(“.liItem,div”)

    选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素

     $(“.liItem,div”). css(“background”,”red”)

   交集选择器

   规律:$(selector).css("background","red");

  jquery层级选择器

    空格

    后代选择器 选择所有的后代元素

     $(“div span”). css(“background”,”red”);

   >

    子代选择器 选择所有的子代元素

     $(“div > span”). css(“background”,”red”)

   +

    紧邻选择器 选择紧挨着的下一个元素

     $(“div + p”). css(“background”,”red”)

   ~

    兄弟选择器 选择后面的所有的兄弟元素

     $(“div ~ p”). css(“background”,”red”)

  jquery 基本过滤选择器

   :eq(index)

    index是从0开始的一个数字，选择序号为index的元素。 选择第一个匹配的元素。

     $(“li:eq(1)”). css(“background”,”red”)

   :gt(index)

    Index 是从0开始的一个数字，选择序号大于index的元素

     $(“li:gt(2)”). css(“background”,”red”)

   :lt(index)

    Index是从0开始的一个数字，选择小于index 的元素

     $(“li:lt(2)”). css(“background”,”red”)

   :odd

    Index是从0开始的一个数字，选择小于index 的元素

     $(“li:odd”). css(“background”,”red”)

   :even

    选择所有序号为偶数的元素

     $(“li:even”). css(“background”,”red”)

   :first

    选择匹配第一个元素

     $(“li:first”). css(“background”,”red”)

   :last

    选择匹配的最后一个元素

     $(“li:last”). css(“background”,”red”)

 其它

  谷歌浏览器最小字体大小12px

  设置多个样式

    $(document).ready(function () { // 设置单个样式 // $("li").css("background-color","red"); // 设置多个样式 $("li").css({ "background-color":"red", "font-size":"20px" }); });

  根据自己的意愿来设置样式

    $(document).ready(function(){ $("li").css("font-size",function (index,value) { // index: 指定当前元素的索引号 // value: 表示当前元素要设置的样式,此处指:background-color // console.log(index); // console.log(value); return (index + 1)*10 + "px"; }); });

常见库: Prototype,YUI,Dojo,ExtJS,jQuery