JQuery学习笔记（一）

一、JQuery 的引入

<script type="text/javascript" src="/lib/jquery-3.5.1.js" charset="utf-8"></script>

 注：我这里使用的是SSM+Springboot框架

路径不需要写static，springboot自动访问static静态资源

如何检查路径正确，按住ctrl键鼠标移至路径若有提示则路径正确。

去官网下载会有两个jQuery的包，我这里是使用jquery-3.5.1.js，可以使用jquery-3.5.1.min.js。

二、jQuery的基本使用

        1.$.(function(){})    

       这是基本的jQuery的入口函数，写的一些比如说按钮点击函数放在入口函数里面

例如：

<script>
$(function(){
    $("#btn").click(function(){
    
        alert("hello jQuery !");
    });

});
</script>



html代码:
<input type="button" id="btn" value="点击">

显示：

二、修改css样式

    <script>
        $(function (){
           //修改按钮为绿色
           $("#bt1").css("backgroundColor","green");
        });

    </script>



html代码：<input type="button" id="bt1" value="颜色">

显示：

如果需要修改多个样式则可以这样修改：

 <script>
        $(function (){
           //修改按钮为绿色
           $("#bt1").css({
               width:"50px",
               height:"100px",
               backgroundColor:"black"
           });
        });

    </script>

html代码：<input type="button" id="bt1" value="颜色">

显示：（黑色已经把按钮文字“颜色”覆盖掉了）

三、控制标签属性（不是css属性）

  $(function (){
           //修改按钮为绿色
           $("#bt1").attr("value","修改value");
        });


html代码：<input type="button" id="bt1" value="颜色">

显示：

四、也可以对整体事件进行绑定

整体事件（大家效果都一样）

 </script>
    <script>
        $(function (){
           //修改按钮为绿色
           $("input").click(function (){
              $("#lb1").attr("大家都改变颜色");
           });
        });
    </script>


html代码:
<input type="button" value="按钮1">
<input type="button" value="按钮2">

整体对单体进行操作，相当于一个数组

 <script>
        $(function (){
           //修改按钮为绿色
           $("input").eq(0).click(function (){
               alert("我是按钮1");
           });
            $("input").eq(1).click(function (){
                alert("我是按钮2");
            });
        });
    </script>

</head>


html代码： 
<input type="button" value="按钮1">
<input type="button" value="按钮2">

五、 基本的一些方法

.addClass()	添加样式
.attr({” “：” “，” “：” “});	给某个元素添加多个属性
.attr(” “：” “);	给某个元素添加单个属性
.html()	获得该元素内的内容（元素，文本等）
.html(”<b>new stuff</b>”)	给某元素设置内容
.removeAttr(”属性名称”)	给某元素删除指定的属性以及该属性的值
.removeClass(”class”)	给某元素删除指定的样式
.text()	获得该元素的文本
.text(value);	设置该元素的文本值为value
.toggleClass(class)	当元素存在参数中的样式的时候取消,如果不存在就设置此样式
.val()	获取input元素的值
.val(value)	设置input元素的值为value
.after(content)	在匹配元素后面添加内容
.append(content)	将content作为元素的内容插入到该元素的后面
.appendTo(content)	在content后接元素
.before(content)	在匹配元素前面添加内容
.clone(布尔表达式)	当布尔表达式为真时，克隆元素（无参时，当作true处理）
.empty()	将该元素的内容设置为空
.insertAfter(content);	将该元素插入到content之后
.insertBefore(content)	将该元素插入到content之前
.prepend(content)	将content作为该元素的一部分，放到该元素的最前面
prependTo(content)	将该元素作为content的一部分，放content的最前面
.remove()	删除所有的指定元素
remove(”exp”);	删除所有含有exp的元素
.wrap(”html”)	用html来包围该元素
wrap(element)	用element来包围该元素

注：这里参考了这篇博文:Jquery对象常用方法 - java12306的个人空间 - OSCHINA - 中文开源技术交流社区

六、选择元素

学会选择元素也十分重要这是我在w3school看到的元素选择比较全，就复制过来了。

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素
:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

转自于：jQuery 参考手册 - 选择器 (w3school.com.cn)