您的位置: 首页  >  文章  >  袁磊老师的课，小方的jQuery笔记（一），老周在边上陪着，真好！

袁磊老师的课，小方的jQuery笔记（一），老周在边上陪着，真好！

分类: 文章 • 2025-05-07 11:47:34

一、写法

$("#id")
//替换   document.getElementById("#id")
$(".class")
//替换   document.getElementByClassName(".class")
$("div")
//替换 document.getElementByTagName("div")
$("li:odd")  
//odd：奇数    even：偶数
//不管是兄弟姐妹还是父亲儿子
$("li:eq(1)")
//eq:   equal 的缩写，写的是找到下标为1的li    下标从0开始 
//eq：只能改一个！！！！！！！！！！！
$("li":lt(2)") 
//lt： less than  小于；    gt： greater than  大于；
$("li:first")
//first  找到第一个li

注意：

  1. $是jQuery的选择器符号，里面的内容就是要查找的HTML元素的描述，内容必须写在单引号或者双引号之内
  2. 上面的代码中所有的缩写（odd/even/eq等等）都是从0开始的
  3. jQuery文件需要和html文件放在同一个文件夹下
  4. jQuery文件的名字你不要给我瞎改啊
.html()  //内容
.css()	//样式    一次只能改一个属性
.attr()	//属性  attribute，记住这个单词，属性

jQuery的开始函数：

//最常用方式：
	$(function(){
		//你喜欢的代码
	})
//有点麻烦但是看着很多的代码：
	$(document).ready(function(){
	 	//真好
	 	//ready是在文件加载完成后
	});

复习一些简单的css例子：

//①    
$("li:nth-child(odd)")   
 //nth-child是从1开始数的   
//同一个父元素下的奇数个li， 每个元素下面的li子元素都单独计算。
//②
$("ul li a")    //ul 里的 li 里的 a
//③
$("ul li")     //找到ul中所有的li（包含儿子孙子，子子孙孙，世世代代无穷尽也，人真多）
$("ul>li")    //找到ul下面的儿子li（>只是儿子，不能找到孙子）
//④
$("li:has(a)")'    //找到含有a的li标签
//⑤
$(ul.listUL)    //找到ul，并且这个ul的类名叫做listUL
//⑥
$(span, #one)   //找到span标签和id叫做one的标签
//⑦
$("a[title]")     //找到有title属性的a

练习一

<!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>Document</title>
</head>
<body>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            alert("hello,jQuery!");
            //在js中修改css效果
            $("body").css("background","blue");
            //$("body")先选择body
            //.css()中修改css效果  用逗号连接要修改的样式名称和赋予的值
        });
    </script>
</body>
</html>

运行效果：
袁磊老师的课，小方的jQuery笔记（一），老周在边上陪着，真好！
点击“确定”后：
袁磊老师的课，小方的jQuery笔记（一），老周在边上陪着，真好！
练习二：（袁磊老师最爱的盒子box变换，希望老师在我们毕业之后能学一下b-box，带b的box会比较炫酷一些，效果请在自己的编译器上运行，功能多）

<!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>Document</title>
    <style>
    .box,span{
        width:250px;
        height: 250px;
        border:1px solid #ccc;
        margin:10px;
        float:left;
    }
    .son{
        width:40%;
        margin:4%;
        height:100px;
        border:1px solid #ccc;
        background:#bfa;
        float:left;
    }
    .cur{
        border-style:dotted;
        border-radius: 50%;
    }
    </style>
</head>
<body>
    <button>改變所有的box</button>
    <button>改變所有的小盒子</button>
    <button>改变第二个大盒子里的所有小盒子</button>
    <button>改变所有小盒子里的文字的内容</button>
    <button>改变所有的大盒子里的第二个小盒子</button>
    <button>改变第三个大盒子里的第二个小盒子的内容</button>
    <button>改变所有大盒子里的第一和第三个小盒子</button>
    <button>改变span</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <div id="jq">
      <div class="box">
          <div class="son"></div>
          <div class="son"></div>
          <div class="son"></div>
          <div class="son"></div>
      </div>
      <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <span>span</span>

    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
      $(function(){
       
        $("button:first").click(function(){
        //看见了么，上面的click就是点击事件了，并且在function中放入你要进行的操作和改变
            $(".box").css("background","#ff0")
           //将所有的box变换颜色
        });

        $("button:eq(1)").click(function(){
        //选择器这里还有问题的就会去看选择器的知识点吧，button：eq（1）是第二个button，不算是第一个，再说一遍不是第一个，是从0开始的！！！还要人说多少遍呐！
            $(".son").addClass("cur");
            //给这个玩应添加一个新的类名，叫做cur
        });

        $("button:nth-child(3)").click(function(){
            $(".box:eq(1) .son").addClass("cur");
            //第二个大盒子里的所有的类名叫做son的小盒子，给他们都添加一个新的类名，叫做cur
        })

        $("button:nth-child(4)").click(function(){
            $(".son").html("袁磊");
           //当点击这些.son的时候，将里面的文字改为“袁磊”
        })

		//后面的几个功能不放了，自己做去


      });
    </script>
</body>
</html>

袁磊老师的课，小方的jQuery笔记（一），老周在边上陪着，真好！
袁磊老师的课，小方的jQuery笔记（一），老周在边上陪着，真好！
后续截图不放了，自己玩去吧,代码都给你们玩耍，拿去拿去

相关推荐