从零开始的Javaweb学习Day9-jquery篇

最新推荐文章于 2024-10-30 18:24:25 发布

爱摸鱼的程序员

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量214

点赞数

分类专栏： Javaweb小白开发日志文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qingyouQAQ/article/details/108691450

版权

Javaweb小白开发日志专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jquery简介

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

版本介绍

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

jquery的使用步骤

引入
调用
$(function(){
//加载完成
});
$(“#inputId”)
若显示包打不开则引入

jquery和js的转换

（1）将js对象转为jquery对象
document.getElementById(“inputId”);
$(js对象) ----->jquery对象
（2）jquery对象的本质是一个数组
jquery对象 = [js对象,js对象,js对象]
（3）将jquery对象转为js
jquery对象[0] ----->js对象

jquery和js的事件绑定的不同

（1）juqery的按钮点击事件
js对象.onXxx=function(){

}
jquery对象.xxx(function(){
});
（2）juqery的其他事件，只修改函数名
（3）jquery的代码更像是对象名.成员方法名()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // //---------js事件绑定------------------
        // window.onload = function (ev) {
        //    var btnIdEle =  document.getElementById("btnId");
        //    btnIdEle.onclick = function () {
        //         alert();
        //     }
        // }
        //---------jquery事件绑定------------------
        $(function () {
            var btnIdEle = $("#btnId");
            btnIdEle.click(function () {
                    alert("xxx");
            });
        })

    </script>
</head>
<body>
     用户名：<input id="btnId"  type="button" value="点我，弹框">
</body>
</html>

jquery的选择器

选择器是什么？
$()
特珠的”函数”，不同的字符串参数（代表不同的规则），执行之后可以获取页面的元素
选择器分类
基本选择器***
层级选择器
属性选择器
基本过滤选择器
表单属性选择器

基本选择器***

（1）基本选择器
（2）css函数
在jquery中，修改样式的函数
参1：属性名
参2：属性值
（3）参数字符串可以为多个规则，使用，隔开，表示或者
在这里插入图片描述

<script type="text/javascript">
	
		 //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 //id选择器
		 $("#b1").click(function () {
			 $("#one").css("background-color","red");
		 });
		 //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
         //标签名选择器
		 $("#b2").click(function () {
			 $("div").css("background-color","red");
         });
		 //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
         //类选择器
         $("#b3").click(function () {
             $(".mini").css("background-color","red");
         });
		 //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		 //并列选择器
         $("#b4").click(function () {
             $("span,#two").css("background-color","red");
         });

	</script>

基本过滤选择器

（1）基本过滤选择器
（2）索引顺序，就是标签顺序
（3）header指的是h1~h6
在这里插入图片描述

<script type="text/javascript">
		
		 //<input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
		 $("#b1").click(function () {
			$("div:first").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
         $("#b2").click(function () {
             $("div:last").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
         $("#b3").click(function () {
             $("div:not(.one)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
         $("#b4").click(function () {
             $("div:even").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
         $("#b5").click(function () {
             $("div:odd").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
         $("#b6").click(function () {
             $("div:gt(3)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
         $("#b7").click(function () {
             $("div:eq(3)").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
         $("#b8").click(function () {
             $("div:lt(3):even").css("backgroundColor","red");
         });
		 //<input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
         $("#b9").click(function () {
             $(":header").css("backgroundColor","red");
         });

	</script>

jquery的dom-属性和文本

在这里插入图片描述

<script type="text/javascript">
		alert($("#myinput").val());
		//$("#myinput").val("李四");  //setAttribute("value","李四“)
		alert($("#mydiv").html());  //获取div中所有的元素体  innerHtml
		alert($("#mydiv").text());  //获取div最内部的文本

		$("#mydiv").html("<img src='a.jpg'/>");  //设置div的元素体内容

	</script>

jquery的dom-操作attr prop

（1） attr 与 prop 都是属性的意思
（2）区别
attr与prop是以1.6为界限
checked 和 selected 使用prop获取
其他使用attr获取
在这里插入图片描述

<script type="text/javascript">

		/*

		attr与prop是以1.6为界限
	    checked 和 selected 使用prop获取
	    其他使用attr获取
		 */
	
		//获取北京节点的name属性值
		alert($("#bj").attr("name"));
		// alert($("#tj").prop("name"));  //不能用
		//设置北京节点的name属性的值为dabeijing
		 $("#bj").attr("name","dabeijing");
		//新增北京节点的discription属性 属性值是didu
         $("#bj").attr("discription","didu");
		//删除北京节点的name属性并检验name属性是否存在
		$("#bj").removeAttr("name");

		//获得hobby的的选中状态
		alert($("#hobby").prop("checked"));  //true, false
        $("#hobby").prop("checked",true);
	</script>