《jQuery精品教程视频》-每天的复习笔记

第一天

//jquery:简单、粗暴
  
  //jq和js的关系
  //js是什么？ js是一门编程语言
  //jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。

  //概念
  //1. 为什么要学jquery ？ 简单，粗暴 没有兼容性问题
  //2. 什么是jquery？js库，说白了就是js文件，里面有一大堆的方法
  //3. 使用jquery的步骤：  1. 引入jquery文件 2. 入口函数 功能实现
  //4. 版本：1.x 2.x 3.x   1.x   压缩版和未压缩版
  //5. 入口函数：  $(document).ready(function)  $(function(){})
  //6. jQuery对象与DOM对象
    //区别：方法不能混用
    //联系： DOM-->jq   花钱  jq-->dom  [0]  get(0)
  
  //$的实质：function
  
//  console.log($ === jQuery); 输出true
//  $(function () { 
//  });  入口函数  也可以写成： jquery（fuction（）{}）
  
  //选择器
  
  //基本选择器  标签 类  id选择器  交集  并集
  //层级选择器： 子代 后代
  
  //过滤选择器：
  //:odd:奇数  even:偶数  :eq：指定下标
  //:first  :last  :gt  :lt

  //筛选选择器
  //children():找儿子
  //find():找后代
  //parent():找爹
  //siblings():找兄弟，不包括自己
  //next:下一个兄弟
  //prev:上一次兄弟
  //eq:指定下标
    
  //index()：返回的当前元素在所有兄弟里面的索引。

第二天

<script>
  
  //1. 操作样式 (5)
  //1.1 css操作
      //设置单个样式
      //设置多个样式
      //获取样式
  //1.2 class操作
      //addClass(name):添加类
      //removeClass(name):移除类
      //hasClass(name):判断类
      //toggleClass(name):切换
  
  //2. 操作属性(3)
    //2.1 attr
      //设置单个属性
      //设置多个属性
      //获取属性
    //2.2 prop
      //对于布尔类型的属性，disabled，selected，checked，只能用prop
  
    //2.3 removeAttr(name):移除某个属性
  
  //3. 动画  (10)
    //3.1 三组基本动画
      //show/hide   slideDown/slideUp/slideToggle  fadeIn/fadeOut/fadeToggle
    //3.2 自定义动画
      //animate(prop, [speed], [swing/linear], [callback])
    //3.3 停止动画
      //stop
  
  
  //4. 操作节点(10)
    //4.1 创建节点:  $("<span></span>")
    //4.2 添加节点   append appendTo prepend prependTo after before
    //4.3 清空内容   empty
    //4.4 删除节点   remove
    //4.5 克隆节点   clone
  
  $("div").removeAttr("title");
  
</script>

//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
  $(function () {
    $("input").eq(0).click(function () { //第一个input标签的 赋予点击事件
      $("#ck").prop("checked", true);// 给id为 ck的  <input type="checkbox" id="ck"> 打钩
    });

 width/height 写到style里 就是样式，直接写到标签里面就变成了属性了；比如我们有些标签是有这两个属性的 img，img中的width 可以用attr获取

//1. 样式操作（写到style）  width/height
    //css(name, value) :设置单个样式
    //css(obj):设置多个样式
    //css(name):获取样式
  
    //addClass(name):添加类
    //removeClass(name):移除类
    //hasClass(name):判断类
    //toggleClass(name):切换类
  
  //2. 属性操作（能写到标签里面的叫属性）  width/height
    //attr方法,用法与css一样
    //prop方法：操作布尔类型的属性，disabled checked selected
    //removeAttr:移除属性
  
  //3. 动画
    //show/hide  slideDown/slideUp/slideToggle  fadeIn/fadeOut/fadeToggle
    //animate(prop, [speed], [swing/linear], [callback])
    //stop()
  
  //4. 节点操作
    //创建节点  $()
    //添加节点：  append  appendTo  prepend prependTo  before after
    //删除节点： remove   自杀
    //清空节点：empty
    //克隆节点：clone()

第三天

<script>
  
  //1. 特殊的属性操作
  // val()
  // text() 与 html()
  // width height
  //scrollTop scrollLeft
  //offset position
  
  
  //2. 事件
  //注册事件  on
  // on("click", function(){})
  // on("click", "p", function(){})
  
  // off() off("click")
  
  //click()  trigger("click")
  
  // e.stopPropagation()
  // e.preventDefault()
  // return false;

  //3. 补充
  
  //链式编程：end()
  //each
  //$.noConflict();
  
</script>

//jQuery释放$的控制权
$.noConflict();
jQuery(function () {
});

补充：

js == 与 === 的区别[转]

1、基础类型：对于string,number等，==和===是有区别的

1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等

2）同类型比较，直接进行“值”比较，两者结果一样

 

2、高级类型：对于Array,Object等，==和===是没有区别的

进行“指针地址”比较

 

3、基础类型与高级类型比较，==和===是有区别的

1）对于==，将高级转化为基础类型，进行“值”比较

2）因为类型不同，===结果为false