juqery的初步了解

一：什么是juqery

juqery是一个兼容多浏览器的js函数库，主要分为javascript和查询的，即就是辅助javascript开发的库

1·2：juqery的作用

• 程序员：简化js以及ajax的编程，将关注点转向功能需求上，从而提高项目的开发速度。
• 用户角度：改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资
• 使用页面元素更加简单（模仿css选择器）
• 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
• 控制响应事件(动态添加响应事件)
• 提供基本网页特效(提供已封装的网页特效方法)
• 快速实现通信(ajax)。

1·3jquery的引入

• 本地jquery引入

    <script type=“text/javascript” src=“”></script>
  

• cdn引入

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  

1·4juqery的初步认识

1·4·1：$(function(){})

• 在JQuery库中，$是JQuery的别名，$()等效于就jQuery()，
• 相当于页面初始化函数，当页面加载完毕，会执行$()，即jQuery()。
• 是$(document).ready(function(){})的简写

1·4·2： $(document).ready(function(){})和window.onload 的区别

• ready表示文档已加载完成（不包含图片等非文字媒体文件）
• onload是指页面包含图片在内的所有元素都加载完成
• 所以前者比后者先执行

1·5：jQuery包装集

在jQuery中，无论是一个还是一组，都会被封装成一个jQuery包装集，即就是集合，所以$()返回的也就是一个集合

1·5·1：jQuery包装集与原生DOM 对象的互转

• jQuery包装集转DOM对象(可以通过下标或者打点的方式)

  //let oP = $("#test").get(0)
  let oP = $("#test")[0];
  console.log(oP.innerHTML);
  

• DOM对象转jQuery包装集

  let oP = document.getElementById("test");
  console.log($(oP).html());
  

二：jquery选择器

“$”符号在jQuery中代表对jQuery对象的引用，返回jQuery对象

2·1：基础选择器

• id选择器

  //a.js写法
  $("#box1").css("backgroundColor","red");
  

  //b.css写法
  $("#box1").css({backgroundColor:"yellow"});
  

• 类选择器

  $(".box").css({backgroundColor:"red"});
  

• 标签选择器

  $("p").css({backgroundColor:"red"});
  

• 群组选择器

  $("strong,p,span").css({backgroundColor:"red"});  
  

• 通配符选择器

  $("*").css({backgroundColor:"red"});
  

2·2：层级选择器

• 后代选择器

  $("body div").css({backgroundColor:"red"});
  

• 子代选择器

  $("body>div").css({backgroundColor:"skyBlue"});
  

• 相邻选择器

  $("#box1+div").css({backgroundColor:"skyBlue"});
  

• 兄弟选择器

  $("#box1~div").css({background:"yellow"});
  

2·3：属性选择器

• div带有class属性的选择器

  $("div[class]").css("backgroundColor","red");
  

• div带有id属性的选择器

  $("div[id]").css("backgroundColor","green");
  

• 指定id为box1

  $("div[id='box1']").css("backgroundColor","yellow");
  

• 同时存在多个属性

  $("div[class][id]").css("backgroundColor","skyblue");
  

2·4：伪类选择器

• 偶数行

  $("div:even").css("backgroundColor","skyblue");
  

• 奇数行

  $("div:odd").css("backgroundColor","skyblue");
  

• 第一个元素

  $("div:first").css("backgroundColor","skyblue");
  

• 最后一个元素

  $("div:last").css("backgroundColor","skyblue");
  

• 除了某个元素

  $("div:not('#box2')").css("backgroundColor","skyblue");
  

  $("div").not('#box3').css("backgroundColor","skyblue");
  

• 第n个元素

  $("div:eq(1)").css("backgroundColor","skyblue");
  

  $("div").eq(1).css("backgroundColor","skyblue");
  

• 大于n的元素

  $("div:gt(1)").css("backgroundColor","skyblue");
  

• 小于n的元素

  $("div:lt(3)").css("backgroundColor","skyblue");
  

2.4:内容选择器

• 字符串中包含的元素

  $("div:contains('hello world')").css({background:"red"});
  

• 内容为空的

  $("div:empty").html("666");
  

• 根据子元素进行筛选

  $("div:has('#s')").css("background","red");
  

2·5：可见性选择器

• 改变不可见元素的样式

  $("tr:hidden").css("background","green");
  

• 改变可见元素的样式

  $("tr:visible").css("background","red");
  

三：jquery的遍历

用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素

• 下一个元素：next

  $("#box2").next().css({background:"red"});
  

• 下面所有元素：nextAll

  $("#box2").nextAll().css({background:"red"});
  

• 上一个元素：prev

  $("#box2").nextAll().css({background:"red"});
  

• 上一个所有的元素：prevAll

   $("#box2").prevAll().css({background:"red"});
  

• 找父元素：parent

  $("p").eq(3).parent().css({background:"yellow"});
  

• 找子元素

  • 必须传参数的：find

    $("body").find("div").css({background:"yellow"});
    

  • 可以不用传参数的：children

    //children 不传参时默认传递通配符
    $("body").children("div").css({background:"yellow"});
    

四：jquery的文本和事件

4·1：文本的读写： val

value == val();

• 读：

   console.log($("input").val());
  

• 写：

  $("input").val(888);
  

4·2：元素内容的读写：html

innerHTML == html();

• 读：

  console.log($("p").html());
  

• 写：

  $("div").html(456);
  

jQuery特点:关于读写的函数,通常都是一个,无参为读,有参为写.

五：jquery的事件

jQuery的事件全都去除on

• 注意this的写法：

  jQuery(document).ready(function(){
          $("div").click(function(){
              //注意:$(this)的写法
              $(this).css({background:"red"});
          });
          
          $("div").mouseover(function(){
              //注意:$(this)的写法
              $(this).css({background:"yellow"});
          });
      });
  

• jQuery的事件可以传自定义参数:

  $(function(){
     $("div").click({name:"老王",pwd:123456},function(evt){
     console.log(evt.data);
      });
  });
  

red"});
});

      $("div").mouseover(function(){
          //注意:$(this)的写法
          $(this).css({background:"yellow"});
      });
  });

- jQuery的事件可以传自定义参数:

  ```js
$(function(){
     $("div").click({name:"老王",pwd:123456},function(evt){
     console.log(evt.data);
      });
 });