jQuery插件(day30)

最新推荐文章于 2024-08-30 10:14:48 发布

YPX_早起的鸟儿

最新推荐文章于 2024-08-30 10:14:48 发布

阅读量65

点赞数

文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/YPX_YGWW/article/details/120786320

版权

jQuery插件

插件使用的步骤

1.用户编写插孔

2.设计者提供插件

3.根据插件提供的文档连接插孔和插件

选择器插件

如果一个类的某个方法,不需要使用到this,则该方法建议设置为静态方法

通过static关键字修饰,被static修饰的方法,只能通过类名来调用,不能通过对象调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="box">
       123456
   </div>
    <div class="box">
        666666
    </div>
    <p>99999</p>
</body>
</html>
<script src="2.选择器插件.js"></script>
<script>

    
    // 静态方法的调用
    // console.log(Select.$("#box").innerHtMl);
    // console.log(Select.$(".box").innerHtMl);
    // console.log(Select.$("p").innerHtMl);


</script>

class Select{
    static $(str){
        if(str.charAt(0)=="#"){
            // 得到box,字符串截取
            return document.getElementById(str.slice(1,str.length));
        }else if(str.charAt(0)=="."){
            return document.getElementsByClassName(str.slice(1,str.length))[0]; //返回的是数组
        }else{
            return document.getElementsByTagName(str)[0];
        }
    }
}

jQuery的引入

1.本地引入

<script src="jQuery.js"></script>

2.在线cdn引入

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

jQuery的延迟加载

1.原生的延迟加载

 window.onload=function(){
  
  }

jQuery的延迟加载

$是jQuery核心对象的简写

$==jQuery

1.简写形式

 $(function(){

  console.log("hello word");

 })

完全体

 jQuery(document).ready(function(){
 
    console.log("hello jQuery");

  });

jQuery和原生代码之间到相互转换

jQueryDom和原生Dom有不同的API,所以经常需要进行转换

包装集:所有的jQueryDom都存在包装集中(包装集类似于数组).也就是无论单个还是多个元素,都放在包装集中
原生Dom转jQueryDom

$(原生dom):返回jQueryDom

let oBox=document.getElementById("box");
    console.log(oBox.innerHTML);
    //$(原生dom):返回jQueryDom
    console.log($(oBox).html());

4.jQueryDom转原生Dom

let oBox=$("#box").get(0); 
        //将下标为0的jQueryDom的原生dom返回
   console.log(oBox.innerHTML);
   
let oBox1=$("div")[1]; //等价于$("div").get(1);
    console.log(oBox1.innerHTML);

jQuery选择器

基础选择器

1.id选择器

 $("#box1").css("backgroundColor","red");

  $("#box1").css({

  backgroundColor:"red",

  color:"yellow"

  });

2.类选择器

$(".box").css("backgroundColor","red");

3.标签选择器

$("p").css("backgroundColor","pink");

4.群组选择器

$("span,strong").css("backgroundColor","blue");

5.通用选择器

$("*").css("backgroundColor","green");

//整个页面变绿,包括根节点

层次选择器

1.子代选择器

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

2.后代

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

3.相邻

$("#box2+div").css({backgroundColor:"red"});

4.兄弟选择器

$("#box2~div").css({backgroundColor:"blue"});

属性选择器

1.通过属性名来选择

$("div[class]").css({backgroundColor:"red"});

2.通过属性值来选择

$("div[id=box1]").css({backgroundColor:"red"});

3.通过组合属性名来获取元素

$("div[class] [id]").css({backgroundColor:"red"});

内容选择器

1.contains(内容):根据元素的内容查找来查找

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

2.empty:找内容为空的元素

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

3.根据子元素来查找has(子元素)

$("div:has(#s)").css({backgroundColor:"red"});

伪类选择器

1.even:获取偶数元素

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

2.odd:获取奇数

$("div:odd").css({backgroundColor:"yellow"});

3.first:获取第一个元素

$("div:first").css({backgroundColor:"blue"});

4.last:获取最后一个元素

$("div:last").css({backgroundColor:"pink"});

5.eq(n):获取下表对应的元素

$("div:eq(3)").css({backgroundColor:"green"});

//下标从零开始

$("div").eq(3).css({backgroundColor:"green"});

//eq可以写外面

遍历

for(let i=0;i<$("div").length;i++){

// $("div:eq("+i+")").css({backgroundColor:"green"});

// 等价于下面这一句

$("div").eq(i).css({ backgroundColor:"orange" });

}

6.not:除了某个元素都选

$("div:not(#box1)").css({backgroundColor:"green"});

$("div").not("#box1").css({backgroundColor:"pink"});

7.lt(n):选中小于n的元素,但是不包含n

$("div:lt(3)").css({backgroundColor:"green"});

8.gt(n):选中大于n的元素

$("div:gt(2)").css({backgroundColor:"hotpink"});

YPX_早起的鸟儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件(day30)

jQuery插件插件使用的步骤1.用户编写插孔2.设计者提供插件3.根据插件提供的文档连接插孔和插件选择器插件如果一个类的某个方法,不需要使用到this,则该方法建议设置为静态方法通过static关键字修饰,被static修饰的方法,只能通过类名来调用,不能通过对象调用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met..
复制链接

扫一扫