JAVAScript——JQuery—$ ( )

最新推荐文章于 2024-04-26 15:56:24 发布
最新推荐文章于 2024-04-26 15:56:24 发布
阅读量540 收藏 3
点赞数
分类专栏： Java前端 文章标签： jquery js javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45673367/article/details/109186289
版权

什么是JQuery？

  • JQuery是一个JavaScipt库，它通过封装原生的JavaScript函数得到一整套定义好的方法。

优点 ———— 便捷

  1. 像CSS一样访问和操作DOM
  2. 修改CSS控制页面外观
  3. 简化JavaScript代码
  4. 事件处理更加容易
  5. 让AJAX技术更加完美——异步加载

第一个JQuery代码

  • $ 选中 id
<script src="./jquery-3.5.1.js"></script>
<script type="text/javascript">
	$('button').click(function(){
		alert("你点了我一下哦");
	});
	alert($==jQuery); —————————— 返回true
</script>

JQuery

  • 在JQuery中，$ ——— 就是JQuery中最重要且独有的对象
  • $（function() { }）———— 执行一个匿名函数
  • $（‘# box’）———— 执行的id选择器
  • $（’# box’).css(‘color’，‘red’)———— 执行功能函数
    JQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数
<script src="./jquery-3.5.1.js"></script>
<script type="text/javascript">
	var obj01 = $('#button'); // JQuery选择的元素
	var obj02 = jQuery('#button'); // JQuery选择的元素
	var obj03 = document.getElementById("button"); // 原生选择的元素
	// alert($==jQuery);
	$('#button').css('background','red').css('font-size','20px')
</script>

JQuery加载模式

  • JQuery使用 $ ( function ( ) { } ) 这段代码进项首位包裹
  • ————因为我们JQuery库文件是在body元素之前加载的，必须等待所有的DOM元素加载后，延迟DOM操作，否则就无法获取到。

JQuery与DOM对象转化

<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// jquery对象
	var j = $('#button01');
	j.css('background','red').css('font-size','20px')
	// DOM原生对象
	var obj = document.getElementById("button02");
	obj.style.background = 'lawngreen';
	
	// jquery对象转化为DOM对象 调用原生函数
	var obj01 = j.get(0);
	obj01.style.color = "white"
	// DOM对象转化为jquery对象调用jquery函数
	$(obj).css('font-size','45px')
</script>

JQuery元素选择器

选择器CSSJQuery模式描述
标签选择器div{ }$(‘div’)获取所有div元素的DOM对象
id选择器#box{ }$(’#box’)获取一个id为box元素的DOM对象
类选择器.box{ }$(’.box’)获取所有class为box元素的DOM对象
群组选择器span em box$(‘span em box’)获取多个选择器的DOM对象
后代选择器ul li a { }$('ul li a ')获取追溯到的多个DOM对象
通配选择器* { }$(’*’)获取所有元素标签的DOM对象
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// DOM原生代码
	var obj = document.getElementById('button01')
	obj.style.background = 'black'
	obj.style.color = 'white'
	// DOM原生代码遍历
	var btnarr = document.getElementsByTagName('button')
	for (var i = 0; i < btnarr.length; i++) {
		btnarr[i].style.fontSize = '20px'
	}
	// jquery代码
	var obj02 = $('#button02')
	obj02.css('background','red')
	// jquery代码遍历 —————— 使用JQuery自带的函数进行遍历
	var btnarr02 = $('.button00')
	btnarr02.each(function(index,ele){ // index:索引 ele：元素
		if(index %3 == 0){
			$(ele).css('font-size','35px')
		}else{
			$(ele).css('font-size','15px')
		}
	})
</script>

属性选择器

选择器JQuery模式描述
a [ tittle ]$(’ a [ tittle ]’)获取具有这个属性的DOM对象
a [ tittle = t1 ]$(’ a [ tittle = t1 ]’)获取具有这个属性等于这个属性值的DOM对象

过滤选择器

选择器JQuery模式描述
li:first$(’ li:first’)获取第一个元素
li:last$(’ li:last’)获取最后一个元素
li:eq(index)$(’ li:eq(index)’)获取索引为index的DOM元素
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<a href="" id="aa">子1标签</a>
			<a href="">子2标签</a>
			<a href="" id="aa">子3标签</a>
			<a href="" id="aa">子4标签</a>
			<a href="" id="aa">子5标签</a>
			<a href="" id="aa">子6标签</a>
			<a href="" id="aa">子7标签</a>
			<a href="" id="aa">子8标签</a>
		</div>
		<div id="d1">JQuery</div>
		<ul>
			<li>选项一</li>
			<li>选项二</li>
			<li>选项三</li>
		</ul>
	</body>
</html>
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('a[href]').css('color','red')
	$('a[id=aa]').css('font-size','30px')
	$('li').eq(2).css('font-size','40px')
	$('li').first().css('color','blue')
	$('a').css('color',function(index,value){
		// index 为索引 value 是原属性
		if (index%2==0) {
			return "red"
		}else{
			return "pink"
		}
	})
	$('#d1').css({
			'width': '100px',
			'height': '100px',
			'background': 'pink',
			'border': '1px black  solid'
		})
</script>

HTML( ) 和TEXT ( )

方法名描述
HTML()获取元素中HTML内容
HTML(value)设置元素中HTML内容
TEXT()获取元素中文本内容
TEXT(value)设置元素中文本内容
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var h = document.getElementById("hhh")
	// 原生代码设置文本内容
	h.innerText="Hello World";
	// 原生代码追加文本内容——方法一
	h.innerText+=",欢迎来到我的世界！"
	// 原生代码追加文本内容——方法二
	var ddd = document.createTextNode("Mary")
	h.appendChild(ddd)
	// 原生代码添加标签————覆盖原文本内容
	h.innerHTML="<span style='color:palevioletred'>WELCOME!</span>"
</script>

高级选择器

选择器CSS模式JQuery模式JQuery等价方法描述
后代选择器ul li a { }$('ul li a ')fin(‘p’)获取追溯到的多个DOM对象
子选择器div > p{ }$(‘div > p’)children( )只获取子类节点的多个DOM对象
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('div ul li').css('font-size','20px')
	// 使用JQuery提供的方法
	$('div').find('ul').find('li').css('color','red')
	
	$('#dd02>h1').css('color',"pink")
	// 使用JQuery提供的方法
	$('#dd02').children('h2').css('background','yellow')
</script>

attr ( ) 和 romoveattr ( )

方法名描述
attr()获取元素key属性的属性值
attr(key,value)设置元素key属性的属性值
attr({key1:value1,key2:value2,…})设置元素多个key属性的属性值
attr(key,function(index,value){})元素key的属性值通过方法来设置
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 原生代码
	// document.getElementsByTagName()——返回带有指定标签名的对象的集合 所以要选定第一个元素
	var h = document.getElementsByTagName("h1")[0]
	h.setAttribute("align","right")
	//getAttributeNode()——从当前元素中通过名称获取属性节点
	var k = h.getAttributeNode("align")
	k.value = "left"
	h.removeAttributeNode(k);
	JQuery代码
	$('h1').attr('align','right')
</script>

css操作方法

方法名描述
addClass（class）给元素添加一个类
removeClass（class）移除元素的一个类
toggleClass（class1，class2，…）来回切换默认样式和指定样式
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.d1 {
				width: 200px;
				height: 200px;
				background: red;
				}
			
			.d2 {
				width: 200px;
				height: 200px;
				background: yellow;
				}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<button type="button">点我切换颜色</button>
	</body>
</html>
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 添加class属性
	$('div').attr('class','d2');
	// button添加点击事件切换颜色
	$('button').click(function(){
		// 添加class属性 toggleClass()——对设置或移除被选元素的一个或多个类进行切换
		$('div').toggleClass('d2')
	})
</script>

节点操作

内部插入结点
方法名描述
append（content）向元素后插入结点
appendTo（content）将指定元素移入到content元素内部的后面
prepend（content）向元素前插入结点
prependTo（content）将指定元素移入到content元素内部的前面
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#ddd{
				background-color: aquamarine;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<h1 id="h">我是h1</h1>
		<h2 id="hh">我是h2</h2>
		<h3 id="hhh">我是h3</h3>
		<div id="ddd">
				<span id="s">我是span文本</span>
		</div>
	</body>
</html>
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 创建节点
	var sp = $("<span>我是新建节点span</span>")
	// 给body添加新建节点————法一：父添加子
	$('body').append(sp)
	// sp移到div内部后面————法二：子移到父中
	sp.appendTo('body')
	// h1移到div内部前面
	$('div').prepend($('#h'))
	//把h2放进div中前
	$('#hh').prependTo('#ddd')
	//把h3放在div后
	$('#hhh').appendTo($('#ddd'))
</script>
外部插入结点
方法名描述
after（content）向元素外部后插入结点
before（content）向元素外部前插入结点
insertAfter（content）将指定元素移入到content元素外部的后面
insertBefore（content）将指定元素移入到content元素外部的前面
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 每一个h1后都有一个h2
	$('h1').after($('h2'))
	// 每一个h3前都有一个h1
	$('h3').before($('h1'))
	// 把span放在div外部的后面
	$('span').insertAfter('div');
	// 把span放在div外部的前面
	$('span').insertBefore('div');
</script>
包裹节点
方法名描述
wrap（html）向元素包裹一层html代码
wrapAll（html）用html将所有代码包裹在一起
unwrap（html）移除一层元素包裹的内容
wrapInner（element）向元素的子内容包裹一层DOM对象节点
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d{
				background-color: aquamarine;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="ddd">
			<h1>我是h1</h1>
			<h1>我是h1</h1>
		</div>
	</body>
</html>
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 给每一个h1包裹一个div
	$('h1').wrap('<div id="d"></div>')
	// 给所有h1包裹一个div
	$('h1').wrapAll('<div id="d"></div>')
	// 移除包裹
	$('h1').unwrap();
	// 给每个h1包裹一个父标签
	$('h1').wrapInner('<div id="nei"></div>')
	// 给div包裹一个子标签
	$('div').wrapInner('<div id="nei"></div>')
</script>
基础事件
方法名描述
.bind(‘click’,function ( ) { }）为元素绑定事件
.unbind()解绑所有事件
.unbind(‘click’)解绑指定事件
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 给button元素添加点击事件
	$('#b1').bind('click',function(){
		$('#b1').css('background','red')
	})
	// 可以连缀
	$('#b2').bind('mouseover',function(){
		$('#b2').css('background','blue')
	}).bind('mouseout',function(){
		$('#b2').css('background','black')
		$('#b2').css('font-size','20px')
		$('#b2').css('color','yellow')
	}).bind('click',function(){
		$('#b2').css('background','pink')
	})
	// 解绑所有事件
	$('#b2').unbind()
	$('#b2').unbind('click')
	// 移除指定事件
	var a = function(){
		alert('aaa')
	}
	var b = function(){
		alert('bbb')
	}
	var c = function(){
		alert('ccc')
	}
	$('#b3').bind('click',a).bind('click',b).bind('click',c)
	$('#b3').unbind('click',a)
</script>
事件简写
方法名描述
.hover( function( ){ } ）为元素添加鼠标移入移出事件
.click( function( ){ } ）为元素添加点击事件
.mousedown( function( ){ } ）为元素添加鼠标摁下事件
.mouseup( function( ){ } ）为元素添加鼠标松开事件
.mouseout( function( ){ } ）为元素添加鼠标移出事件
.keydown( function( ){ } ）为元素添加键盘摁下事件
.keyup( function( ){ } ）为元素添加键盘松开事件
.keypress( function( ){ } ）为元素添加键盘摁下不松开事件
.on( ‘click’,function(){ } ）绑定某个事件
.off( ‘click’ )解绑某个事件
.one( ‘click’,function(){ } )使事件只触发一次
e.currentTarget获取的是绑定了该事件的那个元素
e.target获取的是触发了该事件的元素
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d{
				width: 200px;
				height: 200px;
				background-color: black;
			}
			#dd{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="d"></div>
		<div id="dd">
			<button type="button">点击事件</button>
		</div>
		<button type="button" id="b1">自动触发事件</button>
		<button type="button" id="b2">绑定事件</button>
	</body>
</html>
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('#d').mouseover(function(){
		$('#d').css('background','blue')
	}).mouseout(function(){
		$('#d').css('background','red')
	}).mousedown(function(){
		$('#d').css('background','gray')
	})
	// 以上可以简写为
	$('#d').hover(function(){
		$('#d').css('background','blue')
	},function(){
		$('#d').css('background','red')
	})
	//target和currentTarget区别
	$('#dd').mousedown(function(e){
		// $('div').css('background','blue')
		// target: 获取的是触发了该事件的元素————点哪个  哪个变
		// var obj = e.target
		// currentTarget:获取的是绑定了该事件的那个元素————点任何一个都是绑定事件的div变
		var obj = e.currentTarget
		$(obj).css('background','yellow')
	})
	
	// 自动触发事件
	$('#b1').click(function(){
			$('#b1').css('background','green')
			alert("自动触发事件触发了")
	}).trigger('click')
	
	// 绑定事件
	$('#b2').on('click',function(){
		$('#b2').css('background','black')
		$('#b2').css('color','yellow')
	})
	// 解绑事件
	$('#b2').off('click')
	
	// 让事件只触发一次
	$('#b2').one('click',function(){
		alert("事件只能触发一次")
	})
</script>
冒泡行为
方法名描述
e.stopPropagation()阻止事件冒泡
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one {
				width: 300px;
				height: 300px;
				background: #FFC0CB;
			}

			#two {
				width: 200px;
				height: 200px;
				background: yellow;
			}

			#three {
				width: 100px;
				height: 100px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="one" onclick="show01(event)">
			1
			<div id="two" onclick="show02(event)">
				2
				<div id="three" onclick="show03(event)">
					3
				</div>
			</div>
		</div>
	</body>
</html>
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	function show01(e){
		e.stopPropagation()
		alert("点击了01")
	}
	function show02(e){
		e.stopPropagation()
		alert("点击了02")
	}
	function show03(e){
		e.stopPropagation()
		alert("点击了03")
	}
</script>
冒泡行为
方法名描述
.show( 1000)显示元素 （毫秒）
.hide(1000 )隐藏元素（毫秒）
.toggle(1000 )显示隐藏切换（毫秒）
.slideUp(1000)上拉元素隐藏
.slideDown(1000)下拉元素显示
.slideToggle(1000)上拉下拉切换
.fadeIn(1000)淡入元素显示
.fadeOut(1000)淡出元素隐藏
.fadeToggle(1000)淡入淡出切换
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<button type="button" class="b1"> 显示</button>
		<button type="button" class="b1"> 隐藏</button>
		<button type="button" class="b1"> 切换01</button>
		<div id="d2"></div>
		<button type="button" class="b2"> 上拉</button>
		<button type="button" class="b2"> 下拉</button>
		<button type="button" class="b2"> 切换02</button>
		<div id="d3"></div>
		<button type="button" class="b3"> 淡入</button>
		<button type="button" class="b3"> 淡出</button>
		<button type="button" class="b3"> 切换03</button>
	</body>
</html>
<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 显示隐藏切换
	$('.b1').eq(0).click(function(){
		$('#d1').show(1500)
	})
	$('.b1').eq(1).click(function(){
		$('#d1').hide(1500)
	})
	$('.b1').eq(2).click(function(){
		$('#d1').toggle(1500)
	})
	// 上拉下拉切换
	$('.b2').eq(0).click(function(){
		$('#d2').slideUp(1000)
	})
	$('.b2').eq(1).click(function(){
		$('#d2').slideDown(1000)
	})
	$('.b2').eq(2).click(function(){
		$('#d2').slideToggle(1000)
	})
	// 淡入淡出切换
	$('.b3').eq(0).click(function(){
		$('#d3').fadeIn(1000)
	})
	$('.b3').eq(1).click(function(){
		$('#d3').fadeOut(1000)
	})
	$('.b3').eq(2).click(function(){
		$('#d3').fadeToggle(1000)
	})
</script>
追JAVA的小菜鸟
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 js中的$()
weixin_43862596的博客
03-24 1万+
js中的$()的用法 通俗易懂 $("#id")=document.getElementById("id")； 标签选择器$('p')，$('tr') 类选择器$('.myClass') id选择器$('#myId') 绑定id前要加一个"#"，如果不加的话绑定的是标签，而不是一个id， 比如: $("li").click(function(){ alert($(this).html(); ); 这个就是绑定li标签，点击所有的li标签都会触发这个点击事件。 如果你要用$(“#id”)，你得引
javascript中$含义及用法
galaxy的博客
01-21 4825
$在JS中本身只是一个符号而异，在JS里什么也不是。 但在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数，使用非常之频繁，所以好多新手不知道，还以为$是JS的什么特殊语法。 后来，可能有些程序员JQUERY用得多了，发现$这个函数很好用，很方便，所以，在不用JQUERY的情况，一般自己也会自定义一个$函数。 即： function $(Nid){ ...
02-$符号-jquery与js相互转换_jquery中的$()函数中$在js中可以替换成什么
最新发布
2401_84572413的博客
04-26 335
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
jQuery的三种“$()”
fenghao289的专栏
12-29 1332
$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数（个人观点，呵呵！）。 1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。    比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的这个标签。如：
8.jstl之SQL:query
08-13 413
测试JSTL create table mytable ( nameid int primary key, name varchar(80) ) INSERT INTO mytable VALUES (1,'Paul Oakenfold')
JavaScript中的$号
YCreator的专栏
10-11 582
Javascript中$号的意思 $是指prot
浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf
01-02
"浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf" 本文简要介绍了目前流行的JavaScript库，并对其中较为流行的两个库jQuery和ExtJs进行了较详细的介绍和对比研究。本文首先简要介绍了JavaScript库的概念和特点，...
jquery引用文件——jquery.js
11-25
jQuery，作为一个广泛使用的JavaScript库，自2006年发布以来，就以其简洁的API和强大的功能深受开发者喜爱。本文将深入探讨jQuery的核心原理，以及如何在实际项目中有效地引用和使用jQuery.js文件。 一、jQuery简介...
XMPP高级编程——使用JavaScript和jQuery
07-01
在《XMPP高级编程——使用JavaScript和jQuery》一书中，作者深入探讨了如何利用这两种强大的Web技术来实现XMPP功能。JavaScript作为浏览器端的主要编程语言，为网页添加动态交互性，而jQuery则简化了DOM操作，提供了...
动态调用css文件——jquery的应用
10-31
标题中的“动态调用css文件——jquery的应用”指的是利用JavaScript库jQuery来实现在网页中动态加载或切换CSS样式表的功能。这种技术对于增强用户体验、实现主题切换或个性化定制有着重要作用。下面将详细介绍这个...
Web编程基础——CSS、JavaScript、jQuery
07-22
资源名称：Web编程基础——CSS、JavaScript、jQuery 资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
JavaScript之$符号
热门推荐
JackDan9
09-26 2万+
JavaScript之$符号 前些天不小心用到了$符号,所以这里就来解释一下。 定义： $$()这个方法是在DOM中使用过于频繁的document.getElementById()方法的一个便利的简写,就像这个DOM方法一样,这个方法返回参数传入的id的那个参数。But比起DOM中的方法,青出于蓝而胜于蓝.你可以传入多个id作为参数然后$()返回一个带有所有要求的元素的一个Arra
script脚本写不写$(function(){})的区别
qq_43654065的博客
06-24 646
$(function(){})里的代码是在页面内容都加载完成后才执行的，如果把代码直接写在script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那就会报错，当然如果你把script标签放到页面最后面的那么就没问题了，此时和$(function(){})的效果一样。 转载：https://blog.csdn.net/moqiang02/article/details/38093037?utm_source=tuicool
javascript中$符号的意思
weixin_30924239的博客
09-24 328
Javascript中$符号的意思 $,是指prototype定义的一类方法 $("id") 得到的是页面id为"id"的元素 $F("id") 得到的是页面id为"id"的元素的值,这是只读的,不可写 参考文章 [url]http://www.bjcan.com/hengxing/readlou.asp?id=1346[/url] [url]https:/...
jquery中的$符号、#符号的详谈
m0_48930261的博客
08-23 2337
就这些么 $定义jQuery #表示标签的id jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作 基础语法是：$(selector).action() 美元符号 $ 定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $(“p”).hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class=“
JavaScript 中"$"的含义？
weixin_33725239的博客
01-21 1361
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript中(function(){})($)与$(function)的区别
Wenco的博客
09-26 1万+
目录1. (function(){}())与(function(){})()2. 第二类是$(function(){}); 之前一直没弄清楚这两者的区别，只是发现多个(function(){})($)之间定义的方法是可以互通的，以为这个会比较好，实际运用中发现并不是这么简单的。 1. (function(){}())与(function(){})() 这两种写法，都是一种立即执行函数的写法，即...
JavaScript中的$符号的含义
龙在天涯的专栏
10-21 4495
 $( a )  相当于   document.getElementById( a )这是用了某些组件后那些组件支持的符号，比如DWR$其实是一个函数名，就是用来获取部件里面的值  $()=   document.getElementById()
Javascript里面的$符号的作用
andymeory的专栏
04-09 1431
document.getElementById的意思，在其他地方定义成了“$”符号 $其实是一个函数 用户经过自定义了的 function $(obj) { return document.getElementById(obj); }
jQuery插件之——简单日历
05-23
jQuery是一种流行的JavaScript库，它可以简化编写JavaScript代码的过程。在这里，我将向你介绍如何使用jQuery创建一个简单的日历插件。 首先，我们需要在HTML文件中引入jQuery库和我们自己的脚本文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="calendar.js"></script> ``` 接下来，我们需要在HTML文件中创建一个空的`<div>`元素，用于容纳我们的日历： ```html <div id="calendar"></div> ``` 现在，我们已经准备好开始编写JavaScript代码了。在我们的脚本文件中，我们将定义一个名为`Calendar`的对象，该对象将具有以下属性和方法： ```javascript var Calendar = { // 初始化日历 init: function(selector) { // ... }, // 绘制日历 draw: function(year, month) { // ... }, // 获取指定月份的天数 getDaysInMonth: function(year, month) { // ... }, // 获取指定月份的第一天是星期几 getFirstDayOfWeek: function(year, month) { // ... } }; ``` 现在，我们来看看这个对象的实现细节。首先是初始化方法： ```javascript init: function(selector) { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; $(selector).data('year', year); $(selector).data('month', month); this.draw(year, month); } ``` 在这里，我们获取当前的年份和月份，然后将它们存储在`<div>`元素的数据属性中。然后，我们调用`draw`方法来绘制日历。 接下来是绘制方法： ```javascript draw: function(year, month) { var daysInMonth = this.getDaysInMonth(year, month); var firstDayOfWeek = this.getFirstDayOfWeek(year, month); var html = '<table>'; html += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>'; var day = 1; for (var i = 0; i < 6; i++) { html += '<tr>'; for (var j = 0; j < 7; j++) { if (i === 0 && j < firstDayOfWeek) { html += '<td></td>'; } else if (day > daysInMonth) { html += '<td></td>'; } else { html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var selector = '#calendar'; $(selector).html(html); } ``` 在这里，我们首先获取指定月份的天数和该月份的第一天是星期几。然后，我们使用一个表格来绘制日历。我们遍历6行和7列，并根据当前日期填充单元格。如果日期超出了该月份的天数，我们就停止绘制。 最后，我们将HTML代码插入到`<div>`元素中。 最后是获取指定月份的天数和第一天是星期几的方法： ```javascript getDaysInMonth: function(year, month) { return new Date(year, month, 0).getDate(); }, getFirstDayOfWeek: function(year, month) { return new Date(year, month - 1, 1).getDay(); } ``` 这些方法分别使用JavaScript的`Date`对象来计算指定月份的天数和第一天是星期几。 现在，我们已经完成了一个简单的日历插件的开发。你可以在HTML文件中使用以下代码来初始化日历： ```javascript $(document).ready(function() { Calendar.init('#calendar'); }); ``` 当然，你还可以根据自己的需要对插件进行扩展和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值