jquery框架：jquery学习大纲+jquery核心函数+参考手册

最新推荐文章于 2022-02-02 11:23:01 发布

hahahafree

最新推荐文章于 2022-02-02 11:23:01 发布

阅读量139

点赞数

分类专栏： jQuery Web

本文链接：https://blog.csdn.net/weixin_43731793/article/details/96769594

版权

Web 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

jQuery

17 篇文章 0 订阅

订阅专栏

官网

https://jquery.com/

jQuery API 中文文档
https://www.jquery123.com/

jQuery API 3.3.1 速查表
http://jquery.cuishifeng.cn/index.html

1.jquery产品介绍
2.jquery软件下载
3.jquery安装使用
4.jquery产品演示
5.jquery学习大纲

jquery学习大纲:
1.核心函数
2.选择器
3.筛选
4.属性
5.文档处理
6.css
7.事件
8.效果
9.ajax
10.工具

jquery对象如何转成js对象:
$(‘h1’)[0].οnclick=function(){
//js代码
};

js对象如何转成jquery对象:
$(obj).click(function(){
//js代码
});

jquery中的 $(t h i s) 和 j s 中的 t h i s 的关系 : 其中是同一个东西，无非$ ()把this转成了jquery对象.

jquery核心函数:
1.each();
2.size();
3.length;
4.get();
5.get(index);
6.index();
7.data();

测试是否载入jquery

<script type="text/javascript">
	alert($);
</script>

点击标题切换内容

<script type="text/javascript">
	$('h1').click(function () {
		$(this).next().toggle();
	});
</script>

点击图片，切换图片

<body>
	<img src="/img/dai.png">
</body>
<script type="text/javascript">
	i=0;
	$('img').click(function () {
		if (i%2==0) {
			this.src='/img/cai.png';

		}else{
			this.src='/img/dai.png';
		}
		i++;

	})
</script>

单击改变文字背景颜色

<body>
	<h1>11111111111111111</h1>
	<h1>2222222222222222222</h1>
	<h1>3333333333333333333333333</h1>

</body>
<script type="text/javascript">
	$('h1').click(function () {
		$(this).css({'background':'#aff'});
	});
</script>

jquery写法和 js写法对比：单击改变H1背景颜色*

<script type="text/javascript">
	// jquery写法
	// $('h1').click(function () {
	// 	$(this).css({'background':'#aff'});
	// });
	// js写法
	hobj=document.getElementsByTagName('h1');
	hobj[0].onclick=function(){
		this.style.background='#aff';
	}
</script>

jquery对象如何转成js对象:

<script type="text/javascript">
	$('h1')[0].onclick=function () {
		this.style.background='#aff';
	};
</script>

js对象转成jquery对象

<body>
	<h1 id="hid">11111111111111111</h1>
</body>
<script >
hobj=document.getElementById('hid');
$(hobj).click(function(){
	$(this).css({'background':'#aff'});
});
</script>

jquery中操作方法都进行了隐式遍历

<script>
$('h1').click(function(){
	this.innerHTML='abc';
});

// 原理:
objs=document.getElementsByTagName('h1');
for(i=0;i<objs.length;i++){
	objs[i].onclick=function(){
		this.innerHTML='abc';
	};
}
</script>

点击换行号-each

<script >
$('h1').each(function(i){
	$(this).attr({s:i+1});
});
$('h1').click(function(){
	s=$(this).attr('s');
	$(this).html(s);
})
</script>

size方法和length属性

<script >
// n=$('h1').size();
n=$('h1').length;
alert(n);
</script>

get(0)获取jquery体内的dom对象

<script>
$('h1')[0].onclick=function(){
	this.style.background='#aaf';
};

$('h1').get(0).onclick=function(){
	this.style.background='#aaf';
};
</script>

get()把jquery对象转成对象数组

<script >
arr=$('h1').get();

for(i=0;i<arr.length;i++){
	arr[i].onclick=function(){
		this.style.background='#ccc';
	};
}
</script>

jquery简单实例

<script>
$('h1').click(function(){
	str=$(this).html();
	alert(str);
});
</script>

index();
#当前元素在该类元素中排第几?
标签页

<style>
	*{
		font-family: 微软雅黑;
	}

	button{
		background: #699;
	}

	.pcls{
		border:5px solid #888;
		border-radius:5px;
		display: none;
	}
</style>
<script src="/js/jquery.min1.js">
	
</script>
<body>
	<p>
		<button>linux技术</button>
		<button>php技术</button>
		<button>javascript技术</button>
	</p>
	<p class='pcls'>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
	<p class='pcls'>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>
	<p class='pcls'>javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!</p>
</body>
<script>
$('.pcls').first().show();

$('button').click(function(){
	idx=$(this).index('button');

	$('.pcls').eq(idx).show();
	$('.pcls').not($('.pcls').eq(idx)).hide();
});
</script>

用data来代替标签属性

<body>
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
	<h1>aaaaaaaaaaaaaaaaaaa</h1>	
</body>
<script>
$('h1').each(function(i){
	$(this).data({'s':i+1});
});

$('h1').click(function(){
	s=$(this).data('s');
	$(this).html(s);
});
</script>

hahahafree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery框架：jquery学习大纲+jquery核心函数+参考手册

官网https://jquery.com/1.jquery产品介绍2.jquery软件下载3.jquery安装使用4.jquery产品演示5.jquery学习大纲jquery学习大纲:1.核心函数2.选择器3.筛选4.属性5.文档处理6.css7.事件8.效果9.ajax10.工具jquery对象如何转成js对象:$(‘h1’)[0].οnclick=fun...
复制链接

扫一扫