• jQuery的简单实用的25个知识点


    1.$符号

    $符号是jQuery的简称

    $符号是jQuery中的顶级对象 相当于原生js中的window

    通过$可以将元素封装成对象从而调用jQuery中的方法

    jQuery对象是以伪数组的形式存储的

    $("div").hide();  //将div包装成jQuery对象 调用hide方法

    2.Dom对象 jQuery对象

    Dom对象是通过原生js获取的元素对象

    jQuery是通过jQuery获取的元素对象 是一个数组的形式

    注意: Dom对象不能使用jQuery中的方法 jQuery不能使用原生js中的方法

    3.Dom对象 jQuery对象的转换

    将Dom转化为jQuery对象 使用$直接获取就行了

    将jQuery转化为Dom对象是通过索引就可以了

    $("div")[0] // 通过中括号索引值的方法
    $("div").get(0) // 通过get方法

    4.jQuery的选择器

    1.选择器的写法
    $("选择器") //选择器的写法和原生js的一样
    2.修改css的样式
    $("选择器").css("属性","属性值")

    5.jQuery中的隐式迭代

    隐式迭代: 通过$("选择器)获取的对象 在绑定事件或者修改css样式的时候 都会在内部进行了循环 给所有的元素进行绑定事件或者修改样式

    <script type="text/javascript">
        // 绑定事件
            $("li").click(function(){  
                console.log($(this).index())
            })
        //给每一个li修改样式
            $("li").css("background","red")
    </script>

    6.jQuery中的入口函数

    入口函数的作用就是等dom结构渲染结束即可执行内部代码 不用等待所有的外部资源加载完成

    $(function(){
        
    })
    $(document).ready(function(){
    ​
    })

    7.jQuery中的筛选器

    注意:这都是在选择器中进行筛选的

    $('li:first'):第一个元素
    $('li:last'):最后一个元素
    $('li:eq(2)')==》索引为2【查找指定索引的元素】
    $('li:odd')==》索引为奇数
    $('li:even')==》索引为偶数

    注意:索引是从0开始的

    8.jQuery中筛选的方法

    $("li").parent()  //指的父级
    //找的是下一级  
    $("li").children(选择器) //指的是子级的集合  如果说有参数的话就按照指定的找  如果没有的话 就是字迹的集合
    //找的是内部所有 
    $("li").find()
    
    $("li").siblings()//找的是所有的兄弟
    $("li").nextAll() //后面的
    $("li").prevAll()  //前面的
    
    $('div').hasClass('aaa') //判断师傅有这个类名  如果存在就返回true
     

    9.jQuery中的操作css方法

    //如果css中的参数是属性名和属性值用逗号分隔 属性名必须加上引号 如果数字可以不用单位和引号的话 
    $("li").css("width",200)
    //如果css中的参数是一个对象的话 必须要有中括号 每个属性里面要有中括号
    $('div').css({
    // 属性名 :属性值,
            width : 200,
            height : 200,
            background : 'yellow',
            'font-size' : '60px',
                });

    10.jQuery中设置类的方法

    $("li").addClass(类名) // 添加类
    $("li").removeClass(类名)  //删除类
    $("li").toggleClass(类名)  // 切换类

    11.jQuery中动画效果

    事件一旦没触发 就会执行 可能会出现排队的现象 所有使用stop()放在动画的前面可以阻止事件排队

    slideDown()   //显示
    slideUp()        // 隐藏
    slideToggle()    //切换
    //里面的 参数可以设置 speed速度或者时间 也可以设置回调函数 
    //回调函数是在动画执行结束之后 在执行的
    fadeIn()   //淡入
    fadeOut()    //淡出
    fadeToggle()    //切换
    fadeTo()        //调整透明度  必须要设置持续时间以及透明度的参数
    show()  // 显示
    hide()    //隐藏
    toggle()    //切换
    animate({
        100
    })  //必须要有要修改的样式属性  是一个对象

    12.jQuery的属性操作

    设置固有属性和自定义属性
    $("div").prop("属性名")  // 可以获取固有属性属性值
    $("div").prop("属性名","新的属性值")  //可以更改或者设置固有属性的属性值 
    $("div").attr("属性名")  // 可以获取自定义属性属性值
    $("div").attr("属性名","新的属性值")  //可以更改或者设置自定义属性的属性值 

    了解:$(元素).data(name,value) 想被选中的元素附加数据

    获取的时候 直接是$(元素).data(name)

    13.jQuery内容文本值

    $(元素).html()  // 获取元素内容
    $(元素).text()    //获取元素的文本信息
    $(元素).val()    
    	//获取表单内的信息

    14.jQuery中循环

     

    //主要是遍历每一个元素  用于dom处理
    $(元素).each(function(index,elm){
        //index指的每次循环的索引值   elm指的每次循环出来的dom对象  
    })
    //可以遍历任何对象  主要是用于数据处理方面
    $.each(object,function(index,elm){
        
    })

    15.创建/删除/添加元素

    //创建元素
    $("li") = "<li>内容</li>"
    //添加元素
        //内部添加  添加到元素内部
        父.append(子)
        子.appendTo(父)
        //外部添加    添加到元素内部 同级
        $("li").before() 添加到元素的前面
        $("li:).after()  添加到元素的后面
    //删除元素
          $("div").remove()  //删除这个div
          $("div").empty()   //清空元素的内部
          $("div").html("")  //清空元素的内部

    16.jQuery中尺寸

    //获取内容区的宽度或者高度
    $("div").width()
    $("div").height()
    //获取内容区以及padding的总和
    $("div").innerWidth()
    $("div").innerWidth()
    //获取内容区以及padding还有border的总和
    $("div").outerWidth()
    $("div").outerWidth()
    //获取内容区以及padding还有border 以及margin的总和
    $("div").outerWidth(true)
    $("div").outerWidth(true)

    17.jQuery中的位置操作

    //offset  获取盒子里文档之间距离 返回的是一个对象通过.top或者.left获取对应的值  可以通过赋值进行改变
    $("div).offset().top  //获取div到文档顶部的距离 
    //positon  获取的是到还有定位的父盒子的距离  可以通过赋值进行改变
    $("div").position().top //获取div顶部到含有定位的父盒子的之间的距离

    18.偏移操作

    $(div).scrollTop() 获取元素滚动的距离
    
    补充:结合着offset().top使用

    19.事件注册的两种方式

    //第一种
    $("li").click(function(){
        //元素对象后面直接绑定事件
    })
    //第二种
    $("li").on("事件","子元素的选择器",function(){
        //$(this)指的是子元素
    })
    $("li).on(
      {click:function(){
        console.log("点击")
    }},
      {,mouseenter:function(){
          console.log("进入")
      }}
    )
    优势:
    	1.使用on绑定事件可以给元素同时绑定多个事件类型
    	2.可以实现事件委托
        3.使用on绑定的事件 即使是动态创建的元素也是有事件

    20.解除事件(一次性事件)

    $("li").off("click")
    //如果off括号里面什么都不写的话  就是解除li的所有事件   
    $("ul").off("click","li")
    //解除事件委派
    $("li").one("click",function(){
        //一次性事件
    })

    21.自动触发事件的三种方式

    $("li").click()
    $("li").trigger("click")
    $("li").triggerHandler("click")
    //区别在于triggerHandle() 不会触发元素默认的效果

    22.事件对象

    e = window.event || e
    //获取事件对象的兼容性写法
    e.preventDefault()  
    //阻止默认行为
    e.stopPropagetion()
    //阻止冒泡
     

    23.释放$符号

    //使用$.noconflict(); 可以将$符号解绑 换成别的
    let jq = $.noconflict();
    //案例
    <script>
    let jq = $.conflict();
    </script>

    24.jquery中的插件

    自己看

    补充点:

    $(元素).index()  //可以获取元素的索引值

     

     

     

     

     

     

     

     

  • 相关阅读:
    vi删除前n个字符
    ubuntu自定义登录session和桌面环境
    linux出错处理
    获取用户id
    c关键字控制语句运算符小结
    红帽Linux启动流程详解
    C语言中的文本流与二进制流的区别
    c简单排序字符串
    linux挂载磁盘优盘
    strcpy之段错误
  • 原文地址:https://www.cnblogs.com/shicongcong0910/p/12735654.html
Copyright © 2020-2023  润新知