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

最新推荐文章于 2019-05-14 16:58:56 发布

赵俸堃是我的名字

最新推荐文章于 2019-05-14 16:58:56 发布

阅读量169

点赞数

分类专栏： jQuery 前端基础袁磊老师的课文章标签： jQuery 磊磊老师的课

本文链接：https://blog.csdn.net/qq_43511842/article/details/88025550

版权

前端基础同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

袁磊老师的课

19 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

一、写法

$("#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

注意：

$是jQuery的选择器符号，里面的内容就是要查找的HTML元素的描述，内容必须写在单引号或者双引号之内
上面的代码中所有的缩写（odd/even/eq等等）都是从0开始的
jQuery文件需要和html文件放在同一个文件夹下
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>

运行效果：
在这里插入图片描述
点击“确定”后：

练习二：（袁磊老师最爱的盒子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>

在这里插入图片描述

后续截图不放了，自己玩去吧,代码都给你们玩耍，拿去拿去

赵俸堃是我的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
袁磊老师的课，小方的jQuery笔记（一），老周在边上陪着，真好！

一、写法$(&quot;#id&quot;)//替换 document.getElementById(&quot;#id&quot;)$(&quot;.class&quot;)//替换 document.getElementByClassName(&quot;.class&quot;)$(&quot;div&quot;)//替换 document.getElementByTagName(&
复制链接

扫一扫

专栏目录