JQuery笔记

最新推荐文章于 2024-06-14 15:02:13 发布

-irony-

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量50

点赞数 1

分类专栏：前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_51532232/article/details/120962929

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概述

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

JQuery的下载:JQuery官网

引入JQuery

首先创建js文件夹,里面放入jQuery.js
在html中引入外部jQuery框架文件<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
jQuery所有的代码都要写在JQuery的页面加载事件即写在$(function(){ })中否则不会执行.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部的jquery框架文件 -->
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		
		<script>
			//jquery的页面加载事件,jquery所有的代码都得写在页面加载事件中
			$(function(){    //开发中推荐使用这个简版
				 alert(123)
			})
			
			//完整版
			$(document).ready(function(){
				alert("完整版")
			})
		</script>
	</head>
	<body>
		<h3>第一个jquery</h3>
	</body>
</html>

修改标签中的文字内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jq-入门</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
       
       $(function(){
           //给按钮绑定单击事件
        $("#btn").click(function(){
            alert("hello");
            //text()相当于html中的innerText()
            $("#h1").text("hello");
        })
       })
    
    </script>
</head>
<body> 
    <input type="button" value="点击" id="btn">
    <h1 id="h1"></h1>
</body>
</html>

JQuery的选择器

让我们更加精确地找到我们要操作的元素

id选择器:#id的名称 $("#li1")
以.开头.类名 :$(".li2")
元素选择器: 标签名称$("li")
分组选择器: 选择器,选择器$(".li2,.li3")
父子(层级)选择器: $("ul>li")

表单属性过滤

基本过滤器

选择器:first : 找出的是第一个元素
:last 找出最后一个元素
:even 找出索引为奇数
:odd 找出偶数索引
:eq(index) 等于（nth-child(n)）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery-1</title>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            $("ul>li").css("color","red");//控制所有的
            $("ul>li:first").css("color","blue");
            $("ul>li:last").css("color","green");
            $("ul>li:eq(1)").css("color","gold");//index从0开始,0代表第一个
            $("ul>li:even").css("font-size","30px");
            $("ul>li:odd").css("font-size","15px");
        })
    </script>
</head>
<body>
    <ul>
        <li>广西</li>
        <li>湖南</li>
        <li>江苏</li>
        <li>上海</li>
        <li>浙江</li>
    </ul>
</body>
</html>

属性选择器

选择器[属性名='值'];
找到单行文本框,将背景颜色改成绿色

$("input[type='text']").css("background-color","green")

表单过滤器:
:input 找到所有输入项
:text 找到所有的单行文本框
:password 找到所有的密码框
:selected 找出select中被选中的那一项

 $(function(){
            $(":input").css("background-color","green");
            $(":password").css("background-color","red");
            $(":text").css("background-color","blue");
            $(":selected").css("background-color","gold");
        })

动态添加属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            $("input[type='button']").click(function(){
                //给超链接a元素中添加链接
                $("a").prop("href","https://www.qq.com");//prop("属性名","属性值")
            })
        })
    </script>
</head>
<body>
    <input type="button" value="添加">
    <a>腾讯</a>
</body>
</html>

JQ中数组的遍历

 $(function(){
           let cities = ["朝阳区","西城区","东城区"];
           //item用于来接受cities中的每个元素,index是数组的下标
           $(cities).each(function(index,item){
               console.log("索引为:"+index+"的元素"+item);
           })
        })

JQ事件

 $(function(){
           $("h1").mouseover(function(){
               alert("鼠标放上去");
           })

           $("h1").mouseout(function(){
               alert("鼠标挪开了");
           })
           })

点击第一个确定全选或者全部不选

$(function(){
				
                //完成全选和全不选
                $("input:first").click(function(){
                    //获取第一个的状态
                    let status = this.checked;
                    let input = $("input");
                    $(input).each(function(index,item){
                        item.checked = status;
                    })
                })
				
			})

DOM操作元素

JS内添加节点: appendChild()
JQ内:

append:添加子元素到末尾(内)
appendTo: 给自己找一个爹,将自己添加到别人家中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
           $("#but").click(function(){
               $("#div1").append($("p"));
               $("p").appendTo($("#div1"));
           })
           })
    </script>
</head>
<body>
    <input type="button" id="but" value="添加" />
		<p>p元素的数据</p>
		<div id="div1" style="height: 300px;width: 300px;border: 1px solid red;">
		</div>
</body>
</html>

prepend : 在自己里面(内)子元素前面添加
after : 在自己的后面(外)添加一个兄弟

-irony-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery笔记

概述jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互JQuery的下载:JQuery官网引入JQuery首先创建js文件夹,里面放入jQuery.js在ht
复制链接

扫一扫