jquery学习笔记

最新推荐文章于 2023-04-12 09:18:36 发布

码云骑士

最新推荐文章于 2023-04-12 09:18:36 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44081096/article/details/117439283

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jquery初始化函数

jquery的初始化方式：
$(document).ready(function(){})：初始化函数， 当网页中的dom元素（不包含图片、视频、资源）全部加载完毕后 立刻执行。

javascript的初始化方式：
onload :  javascript，初始化函数，当网页中的dom元素（关联图片、视频、资源）全部加载完毕后 立刻执行。


<!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>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <div id="mydiv">你好呀</div>
    <!-- jquery的初始化函数,使用jquery对象对dom进行操作，得到的时jqery对象；
        在图片、视频等还没加载出来时就先把基本的dom树渲染出来
    -->
    <script>
        $(document).ready(x=>{
            console.log($("#mydiv").html());
        })
        let $mydiv=$("#mydiv"); //jquery对象的变量前面要加上$符号来表示
        console.log($mydiv.innerHeight());
    </script>

    <!-- window.onload进行的初始化函数是需要全部内容加载完毕之后再进行的 -->
    <script>
        window.onload=function(){
            console.log("window.onload函数--",document.querySelector("#mydiv").innerHTML)
        }
    </script>
</body>
</html>

dom节点有三种类型：

1.元素节点    <html>   <ul>... <p>
2.属性节点  ：title  src  alt ...
3.文本节点： 文本节点

注：每一个节点都代表一个对象

把jquery对象转为dom对象

 /* 通过get()方法来实现 */
console.log($(".mydiv").get(0).innerHTML);
 /* 通过数组下边来实现 */
console.log($(".mydiv")[0].innerHTML);

把dom对象转为jquery对象

let mydiv=document.getElementsByClassName("mydiv")[0];
console.log($(mydiv).html());

基本选择器

1.标签选择器：
	$("p").length
2.类选择器：
	$(".class值")
3.id选择器：
	$("#id值")
4.并集(或)选择器，中间加逗号
	$(".class值,#id值")
5.交集选择器（同时存在）
	$("p.myDiv").html()
6.全局选择器：选中全部的元素
	$("*").html();

层次选择器（只取当前原生后面的那些元素）

1.相邻选择器 +
	$("li+p")
2.同辈选择器(同一层次的标签)	 ~	
	$("li~p")
3.后代选择器(该元素内的包含的所有标签都可以被找到) 空格
		$("div li")
4.子代选择器(只有直接子代才能被找到) >
		$("ul>li")

属性选择器 [ … ]

$("[属性名=属性值]"),如：$("[class=mydiv]")  

1.$("[class!=a]")  为不等于，包含两种：有class但值不是a,没有class
2.$("[class^=a]")  class以a开头的元素
3.$("[class$=a]")  class以a结尾的元素
4.$("[class*=a]")  class有a的元素

基本过滤选择器

:first ->最开头那一个
	console.log($("ol>li:first").text());
    console.log($("ol>li").first().text());
:last ->最后那一个
	console.log($("ol>li:last").text());
    console.log($("ol>li").last().text());
:even ->偶数
	console.log($("ol>li:even")[0].innerHTML);
:odd ->奇数
	console.log($("ol>li:odd")[0].innerHTML);
	
2.用于比较

:eq(index)：第index个
	console.log($("ol>li:eq(3)").html());
:gt(index) => 大于index的全部元素
	console.log($("ol>li:gt(3)").length );
:lt(index) =>  小于index的全部元素
	console.log($("ol>li:lt(3)").length );
:not(选择器) => 除了...以外
	 console.log($("ol>li:not(ol>li:eq(3))").length );
:header =>  选中所有的标题元素 h1 h2 <h1>
	 console.log($(":header").length );
:focus =>  获取当前焦点的元素
	 console.log($(":header").length );

可见性选择器
	:visible ：选中所有可见的元素
	:hidden：选中所有隐藏的元素

jquery事件
鼠标事件

	click()：单击事件
	mouseover():鼠标悬浮
	mouseout():鼠标离开

键盘事件

	keydown():按键 从上往下的 过程
	keypress() ： 按键被压到 最底部
	keyup()：松开按键

表单事件

focus()：获取焦点
blur()：失去焦点

绑定事件

单条绑定：
	$(...).bind("事件名",[数据],函数);
	$(...).bind("click",function(){ ... });
	$(...).bind("mouseover",function(){ ... });
	$(...).bind("focus",function(){ ... });

批量绑定，里面放入对象
	$(...).bind({ "事件名":函数   ,  "事件名":函数 ,...,"事件名":函数 }) ;
	如：$("input").bind({
                     "mousedown":x=>{
                         console.log("mousedown")
                     },
                     "mouseover":x=>{
                         console.log("mouseover")
                     }
                 })

移除事件

$(...).unbind("事件名");

复合事件

1.hover(fn1,fn2) =>等同于 mouseover()和mouseout()
	例如：$("#mydiv").hover(function(){
                $(this).css("background","red");
                console.log("1")
            },x=>{
                $(this).css("background","gray");
                console.log(2)
            })
2.toggle(fn1,fn2...fn)  => 切换隐藏与显示  
	如： $("button").click(x=>{
            $("#mydiv").toggle(x=>{
              console.log(1)
              },x=>{
                  console.log(2)
              })
          })

显示效果

显示：show()、fadeIn() 、slideDown();
隐藏：hide()、fadeOut()、slideUp();

1. show和hide  =>显示和隐藏
	例如： $("#btn2").click(x=>{
                $("#mydiv").show(100,x=>{
                    alert("放入回调函数")
                })
            })
            $("#btn3").click(x=>{
                $("#mydiv").hide(200,x=>{
                    console.log("隐藏")
                })
            })
2. fadeInt和fadeOut	=>淡入和淡出（透明度）
	例如：$("#btn2").click(x=>{
                $("#mydiv").fadeIn(500,x=>{
                    console.log("放入回调函数")
                })
            })
            $("#btn3").click(x=>{
                $("#mydiv").fadeOut(600,x=>{
                    console.log("隐藏")
                })
            })
3. fadeInt和fadeOut	=>控制高度
	例如： $("#btn2").click(x=>{
                $("#mydiv").slideDown(500,x=>{
                    console.log("放入回调函数")
                })
            })
            $("#btn3").click(x=>{
                $("#mydiv").slideUp(600,x=>{
                    console.log("隐藏")
                })
            })

操作class方法

总共有以下几种方式
		addClass("x");
		addClass("x x x");
		removeClass(x);
		removeClass(x x );
		removeClass():移除全部样式
		toggleClass("x x x"):切换追加与移除

例如： $("#btn4").click(x=>{
           $("#mydiv").addClass("apply border")
         })
         /* 移除class */
         $("#btn5").click(x=>{
             $("#mydiv").removeClass("apply")
         })
         /* toggleclass */
        $("#btn6").click(x=>{
            $("#mydiv").toggleClass("apply border")
        })

对内容操作

1.html()：获取的是元素的内容 ，包含了元素内部的各种标签
2.text()：值获取文本值
3.val()：获取value值

删除节点

remove()：彻底删除
detach()：将结点删除，但关联的事件、数据不会删除（不推荐使用）
empty()	：只删除内容

属性操作

attr("属性名") ：获取属性值
attr("属性名","属性值") ：设置属性值
attr({ "属性名":"属性值",    "属性名":"属性值" ,  "属性名":"属性值" } );更换属性值
removeAttr("属性名");

例如：
 /* 设置一个属性值 */
$("#mydiv").children().attr("class","style1")
/* 获取属性值 */
console.log($("#mydiv").children().attr("class"))
 /* 设置多个属性值 */
$("#mydiv").children().attr({"class":"style1","id":"style2"})

同辈集合

next()：后一个  +
prev(): 前一个
siblings()：同辈，左、右

前辈

parent():父代
parents("ul"):祖先

过滤集合：

i.很多方法的()就是一个过滤选择器
ii.filter("选择器...");  如：filter(":odd")

遍历集合：

$(...).each(function(index,element){
});

例如：
	 /* 获取子元素 */
     console.log($("#mydiv").children())
     /* 获取子元素 */
      console.log($("#myLi").prev().text())
      console.log($("#myLi").next().text())
      console.log($("#myLi").siblings().each((index,item)=>{
          //console.log(index)
          console.log("----"+$(item).text())
      }))

码云骑士

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery学习笔记

jquery初始化函数jquery的初始化方式：$(document).ready(function(){})：初始化函数，当网页中的dom元素（不包含图片、视频、资源）全部加载完毕后立刻执行。javascript的初始化方式：onload : javascript，初始化函数，当网页中的dom元素（关联图片、视频、资源）全部加载完毕后立刻执行。<!DOCTYPE html><html lang="en"><head> <me.
复制链接

扫一扫

专栏目录