jQuery基本运用，选择器和修改样式

最新推荐文章于 2024-09-07 21:46:41 发布

嫌水摸鱼

最新推荐文章于 2024-09-07 21:46:41 发布

阅读量1.5k

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qh075/article/details/127099806

版权

一：jQuery基本运用

1.顶级符号$

<body>
    <div></div>
	<script>
    	//第一种
    	$(function(){
    		alert(11)
		});
		jQuery(function(){
            $('div').head();//$和jQuery可替换
            jQuery('div').hide();//与上方效果相同
        });
	</script>

2.DOM对象和jQuery对象

<body>
	<div></div>
	<span></span>
	<script>
		//1.DOM对象：用原生JS获取对象
		var myDiv=document.querySelector("div");
		var mySpan=document.querySelector('span');
		console.dir(myDiv);
		//jQuery对象只能用jQuery方法，DOM对象则使用原生JavaScript属性即方法
		$('div');
		$('span');
		console.dir($('div'));		
		//3.jQuery对象只能使用jQuery方法，DOM对象则使用JavaScript属性及方法
		myDiv.style.display='none';
		//$('div').myDiv.style.display='none';是jQuery对象，不能用style和display
		//myDiv.hide();myDiv是一个DOM对象，不能使用jQuery里面的hide方法
	</script>
//jQuery对象本质是：利用$对DOM对象包装后产生的新对象(伪数组形式)

3.jQuery对象和DOM对象相互转换

	<script src="jquery_3.6.0.js"></script>
</head>
<body>
    <video src='mov.mp4' muted></video>
    <script>
    	//1.直接获取视频，得到就是jQuery对象
    	$('video');
		//2.使用原生JS获取DOM对象
		var myvideo=document.querySelector('video');
		myvideo.play();
		$('video')[0].play()
        $('video').get(0).play()
	 </script>

二：jQuery选择器

1.基本选择器:

名称	用法	描述
id选择器	$("#id")	获取指定id元素
全选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class元素
标签选择器	$("div")	获取同一类标签元素
并集选择器	$("div.p.li")	获取多个元素
交集选择器	$("li.current")	交集元素

<body>
    <div>我是div</div>
	<div class='nav'>我是nav</div>
	<p>我是p</p>
	<ol>
        <li>我是li</li>
		<li>我是li</li>
		<li>我是li</li>
	</ol>
	<ul>
        <li>我是ul</li>
		<li>我是ul</li>
		<li>我是ul</li>
	</ul>
	<script>
        $(function(){
        	$(".nav");
    	})
	</script>

2.层级选择器：

名称	用法	描述
子代选择器	$("ul>li")	使用>，获取儿级元素
后代选择器	$("ul li")	使用空格，获取所有后代元素

<body>
    <div>我是div</div>
	<div class='nav'>我是nav</div>
	<p>我是p</p>
	<ol>
        <li>我是li</li>
		<li>我是li</li>
		<li>我是li</li>
	</ol>
	<ul>
        <li>我是ul</li>
		<li>我是ul</li>
		<li>我是ul</li>
	</ul>
	<script>
        $(function(){
        	console.log($(".nav"));
        	console.log($("ul li"))
    	})
	</script>

3.隐式迭代器：

<body>
    <div>哈哈哈</div>
	<div>哈哈哈</div>
	<div>哈哈哈</div>
	<ul>
    	<li>近几年</li>
		<li>近几年</li>
		<li>近几年</li>
	</ul>
	<script>
    	//1.获取四个div元素
    	console.log($("div"));
		//2.四个div设置背景颜色为粉色,类似于遍历
		$("div").css("background","pink");
//隐式迭代类似于遍历
	</script>

4.筛选选择器：

语法	用法	描述
:frist	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取li元素中，索引为2的元素,索引从0开始
:odd	$("li:odd")	获取li元素中，索引为奇数的元素
:even	$("li:even")	获取li元素中索引为偶数的元素

<body>
    <ul>
    	<li>多个</li>
		<li>多个</li>
	</ul>
	<ol>
    	<li>不对劲</li>
		<li>不对劲</li>
	</ol>
	<script>
    	$(function(){
    		$("ul li:first").css("color","red");
    		$("ul li:eq(2)").css("color","blue");
    		$("ol li:odd").css("color","skyblue");
    		$("ol li:even").css("color","pink")
		})
	</script>

5.选取父类元素

语法	用法	说明
parent()	$("li").parent()	查找父级
children(selector)	$("ul").children("li")	相当于$("ul>li"),找最近一级
find(selector)	$("ul").find("li")	相当于$("ul li")后代选择器
siblings(selector)	$(".first").sibling('li')	查找兄弟节点，不包括自己
nextAll([expr])	$(".first").nextAll()	查找当前元素之后的所有同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$("div").hasClass('protected')	检查当前元素是否含有某个特定的类，有则返回true
eq(index)	$("li").eq(2)	相当于$("li:eq(2)") index从0开始

<body>
    <div class='yeye'></div>
	<div class="father">
        <div class="son">儿子</div>
	</div>
	<div class="nav">
        <p>屁</p>
		<div>
        	<p>我是p</p>
        </div>
	</div>
	<script>
        $(function(){
        //1.父parent()返回最近一级的父级元素
        	console.log($(".son").parent());
        //2.子
        //(1)亲儿子children
        	$(".nav").children("p").css("color","blue");
        //(2)选里面所有的孩子，包括儿子和孙子
        	$(".nav").find("p").css("color","red");
    	})
	</script>
</body>

6.找兄弟元素：

<body>
    <ol>
    	<li>我是li</li>
    	<li class="item">我是li</li>
    	<li>我是li</li>
    </ol>
    <ul>
    	<li>我是li</li>
    	<li>我是li</li>
    	<li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>暗示我</div>
    <script>
        $(function(){
            //1.兄弟元素siblings除自身外的所有兄弟元素
            $("ol .item").siblings("li").css("color","red");
            //2.第n个元素
            var index=2;
            $("ul li:eq(2)").css("color","blue");
            $("ul li").eq(3).css("color","green");
            //3.判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));
        })

7.排他思想

<body>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <script>
    	$(function(){
            //1.隐式迭代，给所有按钮都绑定事件
            $("button").click(function(){
                //2.当前元素变化的背景颜色
                $(this).css("background",'pink');
                //3.再改变其余兄弟背景颜色
           	    $(this).siblings("button").css("background","black");
                //链式编程将二者合二为一
                //$("this").css("color",'red').siblings().css("color",'')
            });
        })
    </script>

三：修改样式

	<style>
        div{
        width:200px;
        height:200px;
        background-color:pink;
    }
	</style>
</head>
<body>
    <div></div>
    <script>
        //操作css方法
        $(function(){
            console.log($("div").css("width"));
            $("div").css("width","300px");
            $("div").css({
                w<style>
        div{
            width:200px;
            height:200px;
            background-color:pink;
        }
	</style>
</head>
<body>
    <div></div>
    <script>
        //操作css方法
        $(function(){
            console.log($("div").css("width"));
            $("div").css("width","300px");
            $("div").css({
                width:400,
                height:400,
                backgroundColor:"red",
            })
        })

设置样式方法

添加类	$("DIV")ADDCLASS("CURRENT")
移除类	$("div").removeClass("current")
切换类	$("div").toggleClass("current")

    <title>document</title>
    <script src="jquery.2.2.js"></script>
	<style>
        div{
        	width:150px;
        	height:150px;
        	background-color:pink;
        	margin:100px auto;
    	}
		.current{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='current'></div>
    <script>
        $(function(){
            //1.添加类addClass()
            $("div").click(function(){
                $(this).addClass("current");
            })
            //2.删除类
            $("div").click(function(){
                $(this).removeClass("current");
            })
            //3.切换类
            $("div").click(function(){
                $(this).toggleClass("current");
            })
        })