码迷,mamicode.com
首页 > Web开发 > 详细

jQuery

时间:2019-12-16 13:13:45      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:动画   参数   document   效率   pos   sel   body   查看   语法规则   

1,基础

1.为什么要用jquery?
    写起来简单,省事,开发效率高,兼容性好
2、什么是jQuery?
    jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)
3、如何使用jQuery?
    1、导入 <script src="jquery-3.2.1.js"></script>
           或者<script src="jquery-3.2.1.min.js"></script>
    2、语法规则:$("")
4、JS和jQuery的区别?
    jQuery就是用JS写的
    js是基础,jQuery是工具
5、jQuery介绍
    - 版本
      - 1.x
         兼容IE8。。。
      - 3.x
         最新
   - .min.xx
      压缩的:生产环境用
   -  没有压缩的(没有.min.xx):开发用
6、 jQuery知识点
      html:裸体的人
      css:穿了衣服的人
      JS:让人动起来
7、选择器:
   1、基本选择器
        - ID选择器                  $("#id的值")
        - 类选择器(class)          $(".class的值")
        - 标签选择器(html标签)       $("标签的名字")
        - 所有标签                  $("*")

        - 组合选择器                $("xx,xxx")
   2、层级选择器
        - 从一个标签的子子孙孙去找    $("父亲 子子孙孙")
        - 从一个标签的儿子里面找      $("父亲>儿子标签")
        - 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
        - 找后面所有同级的           $("标签~兄弟")

8、jQuery对象:
        - 用jQuery选择器查出来的就是jQuery对象
        - jQuery对象,他就可以使用jQuery方法,不能使用DOM的方法

        - DOM对象和jQuery对象转换:
            - $(".c1")[0] --> DOM对象
            - $(DOM对象)

2,筛选器

1,写在引号里面的

  • 基本筛选器
                  $(" :first")   找第一个
                  $(" :not('')")  不是/非
                  $("#i1>input":not('.c1,.c2'))
                  $(" :even")     偶数
                  $(" :odd")      奇数
                  $(" :eq(index)")       找等于index的
                  $(" :gt(index)")       找大于index的
                  $(" :lt(index)")       找小于index的
                  $(" :last")     最后一个
                  $(" :focus")    焦点
                  
                  
    内容==========
                  $(" .c1:contains('我是第一个')")   包含文档的内容的标签
                  $(" :empty")     标签内容为空的
                  $(" :has('')")   包含标签的标签
                  $(" :parent")    找有孩子的父亲
                  $("#i7").parent()   找i7的父亲
                  
                  
    可见性========
                  $(" :hidden")   找到隐藏的
                  $(" :visible")  找不隐藏的,也就是显示的
    
    
    属性==========
                  input[name]  --> 找有name属性的input
                  input[type='password']  -->类型是password的input标签
    
    
    表单==========
                  :input
                  :password
                  :checkbox
                  :radio
                  :submit
                  :button
                  :image
                  :file
    
    表单对象属性=========
                    :enable   可选的
                    :disable  不可选
                    :checked  选中的
                    :selected 下拉框选中

2,写在信号外面当方法用的

  • 过滤===========
                $("").first()   找第一个
                $("").parent()  找父亲
                $("").eq(index) 找等于index的
                .hasClass()  判断有没有某个类的
    
    查找==========
                .children() 找孩子
                .find()  查找
                .next()  下面的
                .nextAll()  下面所有的
                .nextUntil() 找下面的直到找到某个标签为止
    
                .parent() 找父亲
                .parents() 找所有的父亲
                .parentsUntil()  直到找到你要找的那个父亲为止
    
                .prev()  上面的
                .prevAll()  上面的所有
                .prevUntil()  上面的直到找到某个标签为止
    
                .siblings()  所有的兄弟
    
    三个方法=======
    
              .toggleClass()   #切换|开关:有就移除,没有就添加
              .addClass()     #添加类
              .removeClass()  #删除类

3,需要注意的几个筛选器

  • $('.c1').first()
    $('.c1:first')
    这两个是一样的,
    
    $('.c1').parent()     #找父亲
    $('.c1:parent')           #找有孩子的父亲
    
    
    $('.c2').html()           #获取HTML代码

3,属性

  • 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性)、
    
            attr(属性名|属性值)
                - 一个参数是获取属性的值,两个参数是设置属性值
                - 点击加载图片示例
            removeAttr(属性名)
                -删除属性的值
            prop(属性名|属性值)
                - 属性的返回值的是布尔类型
                - 单选,反选,取消的例子
            removeProp(属性名)
    
    
    
    prop和attr方法的区别:
    总结一下:
      1.对于标签上有的能看到的属性和自定义属性都用attr
      2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
      具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
      checked示例:
          attr():
                查看值,checked 选中--'checked'  没选中--undefined
                    $('#nv').attr({'checked':'checked'}); 
                设置值,attr无法完成取消选中
                    $('#nv').attr({'checked':'undefined'});
                    $('#nv').attr({'checked':undefined});
    
             prop():
              查看值,checked 选中--true  没选中--false
                  $(':checkbox').prop('checked');
              设置值:
                  $(':checkbox').prop('checked',true);
                  $(':checkbox').prop('checked',false);

4,文档操作

1,文档操作

  • 文档操作

    姿势1:添加到指定元素内部的后面
        $(A).append(B)// 把B追加到A
        $(A).appendTo(B)// 把A追加到B
    
      append示例:
            方式1: 
                创建标签
                    var a = document.createElement('a');
                    $(a).text('百度');
                    $(a).attr('href','http://www.baidu.com');
                    $('#d1').append(a);
            方式2:(重点)
                $('#d1').append('<a href="xx">京东</a>');
      appendto示例
          $(a).appendTo('#d1');
    
    姿势2:添加到指定元素内部的前面
      $(A).prepend(B)// 把B前置到A
      $(A).prependTo(B)// 把A前置到B
    姿势3:添加到指定元素外部的后面
      $(A).after(B)// 把B放到A的后面
      $(A).insertAfter(B)// 把A放到B的后面
    姿势4:
      $(A).before(B)// 把B放到A的前面
      $(A).insertBefore(B)// 把A放到B的前面
    
    移除和清空元素
      remove()// 从DOM中删除所有匹配的元素。
      empty()// 删除匹配的元素集合中所有的子节点,包括文本被全部删除,但是匹配的元素还在
      示例:
          $('#d1').remove();
          $('#d1').empty();
    
    替换:
      replaceWith()
      replaceAll()
         示例:
          $('#d1').replaceWith(a);  用a替换前面的标签
          $(a).replaceAll('#d1'); 

2,CSS

  • .css()
          - .css("color")  -> 获取color css值
          - .css("color", "#ff0000") -> 设置值
          - .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 设置多个值
          - .css(["color", "border"])  -> 获取多个值
       .offset
           - 获取相对位置
           - 比较的对象是html (窗口)
       .position
            - 获取相对已经定位的父标签的位置
            - 比较的是最近的那个做过定位的祖先标签
       .scrollTop([val])
          - 返回顶部的例子
       .scrollLeft([val])
       尺寸:
        height([val|fn])
          - 元素的高度
       width([val|fn])
           - 元素的宽度
       innerHeight()
          - 带padding的高度
       innerWidth()
           - 带padding的宽度
       outerHeight([soptions])
          - 在innerHeight的基础上再加border的高度
       outerWidth([options])
           - 在innerHeight的基础上再加border的高度

3,动画

  • 基本
       show([s,[e],[fn]])
       hide([s,[e],[fn]])
       toggle([s],[e],[fn])
    滑动
       slideDown([s],[e],[fn])
       slideUp([s,[e],[fn]])
       slideToggle([s],[e],[fn])
    淡入淡出
       fadeIn([s],[e],[fn])
       fadeOut([s],[e],[fn])
    
       fadeTo([[s],o,[e],[fn]])
          - 淡出到0.66透明度
       fadeToggle([s,[e],[fn]])
          - .fadeToggle(3000, function () {
                alert("真没用3");
            });
    自定义
    animate(p,[s],[e],[fn])1.8*
       - css属性值都可以设置
        - 图片变小(漏气)

5,事件处理

1,绑定事件的方式

  • 之前绑定事件的方式:
         1. onclick=clickMe();  function clickMe() {}
         2. ele.onclick = function(){}
         3. ele.addEventListener("click", function(){})  js事件委派
    
      jQuery绑定事件的方式:
         1. $(ele).on("click", function(){})
         2. $("tbody").delegate(".btn-warning", "click", function(){})  这个3.几的版本没有这个方法了,这是3.几以前版本有的方法
         3. $("tbody").on("click",".btn-warning",function(){})  jQuery的事件委派

2,常用事件

  • blur([[data],fn])   失去焦点
       focus([[data],fn])  获取焦点( 搜索框例子)
       change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
       click([[data],fn])  点击
       dblclick([[data],fn]) 双击
       scroll([[data],fn])   滚动
       submit([[data],fn])   提交
    
    

3,不常用事件

  • error([[data],fn])
    focusin([data],fn)
    focusout([data],fn)
    keydown([[data],fn])   按下
    keypress([[data],fn])  按键
    keyup([[data],fn])     键松开
    mousedown([[data],fn]) 鼠标按下
    mouseenter([[data],fn])  鼠标移进去
    mouseleave([[data],fn])  鼠标离开:只有鼠标离开被选元素的时候,才会触发mouseleave事件
    mousemove([[data],fn])   鼠标移动
    mouseout([[data],fn])    鼠标离开:无论鼠标离开被选元素还是任何子元素,都会触发mouseout事件
    mouseover([[data],fn]    鼠标悬停
    mouseup([[data],fn])     鼠标弹起
    resize([[data],fn])  元素窗口发生变化
    select([[data],fn])
    unload([[data],fn])

jQuery

标签:动画   参数   document   效率   pos   sel   body   查看   语法规则   

原文地址:https://www.cnblogs.com/daviddd/p/12048371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!