Jquery的全套学习2

最新推荐文章于 2024-05-06 00:29:39 发布

快乐的代码

最新推荐文章于 2024-05-06 00:29:39 发布

阅读量198

点赞数

分类专栏： Java Web 文章标签： jquery js java

本文链接：https://blog.csdn.net/weixin_48437363/article/details/108652796

版权

Java Web 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的使用，包括隔行换色、全选全不选的功能实现，jQuery与JS的互转，以及jQuery选择器的运用。重点探讨了jQuery的事件绑定方式和版本选择策略，旨在帮助读者更好地理解和应用jQuery。

摘要由CSDN通过智能技术生成

Jqueryj简介

一个网页可以有几部分组成？
开发前端的三剑客: HTML CSS JS
jquery是什么
1:jquery是js的一个框架，jquery是对js的封装，jquery是第三方组织写的一个js文件
2:jquery和js的关系类似：JDBC和DBUtils关系
有什么特点？
jquery是为了简化js的书写
jquery的宗旨：写的更少，做的更多
如何使用jquery
你如果想要使用jquery，引入这个js文件，使用选择器查找元素，再调用函数

引入
  <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

调用   
unction(){
$(f	//加载完成
});
$(“#inputId”)

隔行换色

这个练习主要是掌握jquery的基本过滤选择器的使用，导入jquery文件，关键代码：

隔行换色关键代码：

$("tr:gt(1):even").css("background-color","red");
$("tr:gt(1):odd").css("background-color","blue");

“：gt(index)”:大于索引选择器，大于指定的索引的元素。
“：even”：偶数选择器，从0开始计数。
“：odd”：奇数选择器，从0开始计数。
Ccs函数：在jquery中，修改样式的函数：
参数1：属性名
参数2：属性值。

全选全不选

关键代码：

$(function () {
				$("#checkedAllId").click(function () {
                    var flag = $("#checkedAllId").prop("checked");
					$(".itemSelect").prop("checked",flag);
                });
            });

“:checked”:选中选择器，获得单选或则复选框中的元素。
“:selected”:选中选择器，获得下拉框选中的元素。

- juqery的按钮点击事件
js对象.onXxx=function(){
}
jquery对象.xxx(function(){
});

juqery的其他事件，只修改函数名

QQ表情

关键代码：

$("li img").click(function () {
            var newImgEle =  $(this).clone();
            $(".word").append(newImgEle);
            newImgEle.click(function () {
                $(this).remove();
            });
        });

设计点击监听事件，点击后，将原先的QQ表情复制到“输入框”，再次点击“输入框”的QQ表情，被移除。
Jquery是js的一个框架，特点是简化js的书写，写得少，做的多。

jquery的版本介绍

（1）jquery下载
jQuery的官方下载地址：http://www.jquery.com
（2）如何选择版本
1.x：兼容IE678，使用最为广泛的（一般项目来说，使用1.x版本就可以了）
2.x：不兼容IE678，很少有人使用（如果不考虑兼容低版本的浏览器可以使用2.x）
3.x：不兼容IE678，只支持最新的浏览器（除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本）
（3）什么是开发版本
jQuery-x.x.x.js为开发版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大
jQuery-x.x.x.min.js为生产版本，生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。