• jQuery基础部分


    l  JQ设计思想?

    • 选择网页元素

    –    模拟CSS选择元素

    –    独有表达式选择

    –    多种筛选方法

    • JQ写法

    –    方法函数化

    –    链式操作

    –    取值赋值合体

    • JQ与JS关系

    –      可以共存,不能混用

    Jq当中基本不用等号,而是用函数来传参,jq几乎无论调用什么都要带括号

    几种混用写法

                       //alert( $(this).html() );  //jq的写法

                       //alert( this.innerHTML );  //js的写法

                       alert( $(this).innerHTML );  //错误的

                       alert( this.html() );  //错误的

    l  $()下的常用方法

    • has()  //包含  $('div').has('span').css('background','red');
    • not()  //过滤的反义词 $('div').not('.box').css('background','red');
    • filter() //过滤  $('div').filter('.box').css('background','red');
    • next()  //下一个节点  $('div').next().css('background','red');
    • prev()  //上一个节点
    • find()  //找到div下的h2  $('div').find('h2').css('background','red');
    • eq()  //一组当中的第几$('div').find('h2').eq(1).css('background','red');
    • index()  //alert( $('#h').index() );  //索引就是当前元素在所有兄弟节点中的位置
    • attr() //写属性  $('div').attr('title','456');

    l  $()下的常用方法

    • addClass()  
    • removeClass()
    • width()  //width
    • innerWidth()   //width+padding
    • outerWidth()  //width+padding+border
    • outerWidth(true)    //width+padding+border+margin
    • insertBefore()   before()  //区别 :后续操作变了
    • insertAfter()   after()  //区别 :后续操作变了
    • appendTo()   append()  //区别 :后续操作变了
    • prependTo()   prepend()  //区别 :后续操作变了
    • remove()
    • on()  off()
    • scrollTop()

    l  $()下的常用方法  事件上的方法

    • ev 
    • pageX   //相对于文档,原生中clientX相对于可视区 
    • which  //找键盘的键值
    • preventDefault //阻止默认事件
    • stopPropagation  //阻止冒泡的操作  return false;   //阻止默认事件 + 阻止冒泡的操作
    • one() //事件只执行一次
    • offset()  //获取到屏幕的左距离alert( $('#div2').offset().left );
    • position()  //到有定位的父级的left值,把当前元素转化成类似定位的形式alert( $('#div2').position().left ); 
    • offsetParent()  //parent() : 获取父级  //offsetParent() : 获取有定位的父级
    • val()  //找到value值
    • size()  //4 像length   alert( $('li').size() );
    • each()   $('li').each(function(i,elem){   //一参:下标 二参 : 每个元素                

    $(elem).html(i);       

    });

    l  $()下的常用方法

    • hover()
    • show()  hide()
    • fadeIn()   fadeOut()
    • fadeTo()
    • slideDown()   slideUp()
    剑还未备好,身已在江湖
  • 相关阅读:
    PostgreSQL 语法
    Linux 上安装 PostgreSQL
    Gitlab基础知识介绍
    Grafana 入门知识介绍
    数据卷容器
    Docker网络详解——原理篇
    Docker网络详细理解-容器网络互通
    搭建Elasitc stack集群需要注意的日志问题
    创建Elasticsearch集群并为它们配置TLS安全通信
    Elastic:为Elastic Docker部署设置安全
  • 原文地址:https://www.cnblogs.com/cjie/p/6115977.html
Copyright © 2020-2023  润新知