JS-JQuery

最新推荐文章于 2024-10-02 05:39:15 发布

Hello World️

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量240

点赞数

分类专栏：前端学习文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/m0_51318597/article/details/126347422

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

JQuery

JQuery

    jQuery是一个JavaScript库(框架),它通过封装原生的JavaScript函数得到一整套定义好的方法
    JQuery作为JavaScript封装的库,他的目的就是为了简化开发者使用JavaScript

入门

<html>
	<head>
		<!-- 引入JQuery的库文件 -->
		<script  src="js/jquery.js"></script>
	</head>
	<body>
		<button id="btn">按钮</button>
	</body>
	<script>
        //通过id修改button按钮的css样式
		$('#btn').css('background', 'yellowgreen').css("border","0");
	</script>
</html>

语法

$这个美元符号 就是JQuery对象 他是JQuery对象的一个简写
返回的还是JQuery对象

var obj = $('button');
obj.css('color', 'yellow');

jQuery('button').css('background', 'red');
alert($ == jQuery);//true

值得一提的是 执行了.css()这个功能函数后 最终返回的还是jQuery对象
那么也就是说 jQuery的代码模式是采用的连缀也就是链式编程的方式 可以不停的连续调用功能函数

加载模式

	jQuery库文件是在body元素之前加载的 我们必须等待所有的DOM元素加载后 延迟支持DOM操作 否则就无法获取到 在延迟等待加载 JavaScript提供了一个事件为load

方法如下:
JavaScript等待加载
	window.onload = function(){}; 
jQuery等待加载
    $(document).ready(function(){});
    $(function(){}); //简写jQuery等待加载

DOM对象和JQuery对象互换

<button id="btn">按钮</button>

原生DOM对象-->JQuery对象
    DOM对象
    	var btn = document.getElementById("btn");
    JQuery对象
    	$(btn);

JQuery对象-->原生DOM对象
	转换后可能有多个 需要使用下标
	$('#btn').get(0);

JQuery选择DOM元素

◆eq()
	类选择器 标签选择器 选了多个元素 
	只想取某一个 用eq()方法
	
◆find()	
	通过find()方法 一层一层往里面选
	<ul>
        <li>
        	<a href=""></a>
        </li>
	</ul>
	$("ul").find("li").find("a");
	
◆children()
    <ol>
    	<li></li>
    </ol>
    $("ol").children();
    
◆prev() prevAll()
	prev()查找上面一个
	prevAll()查找上面全部
◆next() nextAll()
	next()查找下面一个
	nextAll()查找下面全部
	
    <h3>上面的</h3>
    <div id="d1">当前标签</div>
    <h2>下面的</h2>
    $("#d1").prev("h3");
    $("#d1").next("h2");

html()和text()

html()
	方法可以获取或设置html内容
text()
	可以获取或设置文本内容	

<h1></h1>
$("h1").html("<div>hehehe</div>");
$("h1").text("hehehe");

属性的操作

<div>asdasd</div>
◆attr()设置属性
    设置一个属性
        $("div").attr("id", "d1");
    设置多个属性
        $("div").attr({
            "class": "myclass",
            "style": "color:red;font-size:20px"
        });

◆removeAttr()删除属性
	$("div").removeAttr("id");

CSS样式设置

◆一个一个设置
	$("div").css("hight", "50px");
	
◆设置多个 传入JSON对象
    $("div").css({
        "background-color": "red",
        "color": "yellow"
    });
    
◆函数设置
	index--元素索引
    oldCSSValue--该样式的旧值
    $("h1").css("color", function(index, oldCSSValue) {
        //选择元素的索引
        if (index == 0) {
            //返回你要设置的样式的新值
            return "red";
        } else {
            return "yellow";
        }
    });
    
◆自己设置开关 改变样式
    .a {color: deeppink;}
    .b {color: yellowgreen;}
    ---------------
    var flag = true;
    $("h2").click(function() {
    	//清除之前样式
        $(this).removeClass("a");
        $(this).removeClass("b");
        if (flag) {
        	//添加class 改变样式
            $(this).addClass("b");
        } else {
            $(this).addClass("a");
        }
        flag = !flag;
    });
    
◆toggleClass(class)
	默认样式 与 设置样式 来回切换
	$("h3").click(function() {
		$(this).toggleClass("a");
	});
	
◆toggleClass(class, switch)
	switch-->boolean
	默认样式 与 设置样式 控制频率来回切换
	var i = 0;
		$("h4").click(function() {
			// i++ % 3 == 0 点击两次变色
			$(this).toggleClass("a", i++ % 3 == 0);
		});

元素的设置或获取

不设置height() width()时就是获取
给值就是设置
$("div").height(400);
$("div").width(500);
var h = $("div").height();
var w = $("div").width();

节点操作

◆创建节点
var node = $("<h1>123</h1>");

◆添加子节点
$("body").append(node);

◆将h2移动到div中 并且位置在div中所有子元素之后
$("h2").appendTo($("div"));
◆prependTo()与appendTo()相反

◆将h4移动到body的最前面
$("body").prepend($("<h4>4444444</h4>"));

◆并列关系标签的移动after() before()
    并列关系 将h1放到div后面
    $("div").after(node);

    并列关系 将h2放到div前面
    $("div").before("h2");

◆将id为d1的子元素 移动出来出来 放到其前面
$("h1").insertBefore("#d1");
◆insertAfter()与insertBefore()相反

◆给每一个h4标签外嵌套一个父元素div
$("h4").wrap("div");

◆给所有的h5标签外之嵌套一个div
$("h5").wrapAll("div");

◆去除父元素
$("h5").unwrap();

◆给#d2元素的子元素嵌套一个父元素
$("#d2").wrapInner("div");

◆删除自身元素
获取多个元素时 remove(要删除的元素) 只删除一个 不写全删除
$("#d2").remove();

◆清空子元素
$("ul").empty();
var ul = $("ul").detach();//会返回自身元素

事件绑定

◆JQuery3.0版本之后就废弃了
    绑定事件
    $("button").bind("click",function(){
        alert("hehe");
    });
    解绑事件 解绑指定事件
    $("button").unbind("click");
    解绑事件 解绑所有事件
    $("button").unbind();
   
◆JQuery3.0版本以后的事件绑定
	连缀方式绑定多个事件
    $("button").on("click", function(){})
        .on("mouseover", function() {});

	解绑事件 解绑指定事件
	$("button").off("click");
	解绑事件 解绑所有事件
	$("button").off(); 

◆事件简写
$("button").
	鼠标点击事件
	click(function(){}).
	鼠标移上事件
	mousemove(function(){}).
	鼠标移出事件
	mouseout(function(){}).
	鼠标移上移出事件
	hover(function(){},function(){})

    只执行一次
    $("button").one("click",function(){});	
 
◆事件自动触发
	trigger("click") 浏览器帮忙点击触发
    $("button").click(function(){
    	alert("abc");
    }).trigger("click");

动画

显示
	$("div").show();
隐藏
	$("div").hide();
显示隐藏切换
	$("div").toggle(1000);
-----------------	
上卷
	$("div").slideUp(1000);
下拉
	$("div").slideDown(1000);
上卷下拉切换
	$("div").slideToggle(1000);
-----------------
淡入
	$("div").fadeIn(1000);
淡出
	$("div").fadeOut(1000);
淡入淡出切换
	$("div").fadeToggle(1000);