• jQuery选择器:创建jquery对象的方法


    一、选择器定义:

    是一个字符串,用来定位dom对象的。定位了dom对象,就可以通过jquery而函数操作dom。

    二、选择器类型:

    • id选择器:$("#dom对象的id值")
      通过dom对象的id定位dom对象,从而通过jquery函数操作dom对象。
    • class选择器:$(".class样式名")
      class表示css中的样式。
    • 标签选择器:$("标签名称")
      使用标签名称定位dom对象。
    • 全部选择器:$("*")
      操作所有标签。
    • 组合选择器:$("#,.class,")
      组合前三种选择器。

    三、例子:

    DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			div{
    				background: gray;
    				width: 200px;
    				height: 100px;
    			}
    			
    			.two{
    				background: gold;
    				font-size: 20pt;
    			}
    		style>
    		<script type="text/javascript" src="js/jquery-3.4.1.js">script>
    		<script type="text/javascript">
    			function fun1(){
    				//id选择器
    				var obj = $("#one");
    				//使用jquery中改变样式的函数
    				obj.css("background","red");
    			}
    			
    			function fun2(){
    				//使用样式选择器
    				var obj = $(".two");
    				obj.css("background","yellow");
    			}
    			
    			function fun3(){
    				//标签选择器
    				var obj = $("div"); //数组有3个对象
    				//jquery的操作都是操作数组中的全部成员.
    				//所以是给所有的div都设置的背景色
    				obj.css("background","blue");
    			}
    			
    			function fun4(){
    				var obj = $("*");
    				obj.css("background","green");
    			}
    			
    			function fun5(){
    				var obj = $("#one,span");
    				//obj.css("background","red");
    				
    				 //obj是一个数组, 有两个成员, 1 是span dom对象
    				 //$(obj[1]) : jquery对象
    				// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
    				$(obj[1]).css("background","green");//就是span
    				
    			}
    			
    			document.getElementById("one"); //js的语法规则 ,value
    			$("#one"); //jquery语法
    			
    		script>
    	head>
    	<body>
    		<div id="one">我是one的divdiv><br/>
    		<div class="two">我是样式是two的divdiv>
    		<br/>
    		<div>我是没有id,class的divdiv>
    		<br/>
    		<span class="two">我是span标签span>
    		<br/>
    		<input type="button" value="获取id是one的dom对象" onclick="fun1()" />
    		<br/>
    		<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
    		<br/>
    		<input type="button" value="使用标签选择器" onclick="fun3()" /> 
    		<br/>
    		<input type="button" value="所有选择器" onclick="fun4()"/>
    		<br/>
    		<input type="button" value="组合选择器" onclick="fun5()"/>
    	body>
    html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
  • 相关阅读:
    【Spring】从面向对象再到面向切面
    声纹技术(五):声纹分割聚类技术
    BATJ和字节跳动这些大厂的内部面试解析,面试重难点超出你的想象
    Python中的接口是什么?
    【REACT-router】
    LeetCode 第8题:字符串转换整数(Python3解法)
    LocalDateTime用法
    智慧城市可视化管理系统解决方案
    到达终点数字
    Java自学-数组的基本使用、循环、continue和break
  • 原文地址:https://blog.csdn.net/m0_53881899/article/details/126670413