一片文章叫你玩转JQuery

最新推荐文章于 2024-04-18 19:28:51 发布

良_月

最新推荐文章于 2024-04-18 19:28:51 发布

阅读量236

点赞数

分类专栏： JAVA-EE 学习笔记文章标签： java 初学 JS jquery javascript

本文链接：https://blog.csdn.net/lipeng88888888/article/details/78658157

版权

学习笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

JAVA-EE

10 篇文章 0 订阅

订阅专栏

1.为什么要学习jQuery？
    js的缺点：
        1）花费10天时间开发设计，js中有很多的漏洞；不适合于大系统的开发。
        2）获取dom元素时，是很不灵活的，主要通过4个方法。
        3）方法的长度太长，记忆难度比较大。
        4）方法还有浏览器大战遗留下的问题，开发时需要做兼容性处理。
    若像CSS一样获取DOM元素：
        [1] id选择器：#id名称
        [2] class 选择器：.className
        [3] 标签选择器：tagName

2.jQuery 的简介：
    1）jQuery 是 js 的库文件，对js做了封装。类似于jar包的概念。
    2）jQuery 可以像CSS一样获取DOM元素。
    3）jQuery 提供了很多的方法，方便对DOM元素的操作。
    4）jQuery 提供了很多的插件，方便开发者使用。（jQuerySchool）
    5）jQuery 社区网站特别的繁荣。

3.jQuery 在开发领域：占了举足轻重的作用；
    一个项目而言：一半java一半jQuery.

选择器是jQuery的核心重点，要操作dom元素，首先要通过选择器获取DOM元素
所有的选择器（除了过滤方法），其他的都是css选择器。
1.基本选择器：
    [1] id选择器：#id名称
    [2] class选择器：.className
    [3] 标签选择器：tagName
<div id="oDiv">div元素</div>
<h1 class="cls">H1 元素</h1>
<h2 class="cls">H2 元素</h2>
<h3 class="cls">H3 元素</h3>
<ul>
   <li>吃饭</li>
   <li>睡觉</li>
   <li>淘宝双11</li>
</ul>

<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   //ID选择器
   $("#oDiv").css("color","red");
   //class选择器
   $(".cls").css("color","green");
   //标签选择器
   $("li").css("color","blue");
</script>
2.层级选择器：查找某个元素下的子元素或者后代元素
[1] parent > child : 查找parent下所有的子元素
[2] parent child : 查找parent下所有的后代元素
<body>
   <div id="haha">
       <p>你好1</p>
       <p>你好2</p>
       <p>你好3</p>
   </div>
   <div>
       <p>你好4</p>
       <p>你好5</p>
       <p>你好6</p>
   </div>
   <ul id="ul">
       <li>
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
          </ul>
       </li>
       <li>
          <ul>
              <li>4</li>
              <li>5</li>
              <li>6</li>
          </ul>
       </li>
   </ul>
3.基本过滤选择器：从一堆dom元素中，过滤出需要的元素
    [1] :first , 获取第一个元素
    [2] :last , 获取最后一个元素
    [3] :eq(index) , 获取第index个元素，index下标从0开始
    [4] :gt(index) , 获取>index的元素，index下标从0开始
    [5] :lt(index) , 获取<index的元素，index下标从0开始
    [6] :even , 获取偶数行元素，以下标为准 0,2,4 ...
    [7] :odd , 获取奇数行元素，以下标为准 1,3,5 ...

<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   //:first , 过滤出第一个元素
   $("tr:first").css("background","red");
   //:last , 过滤出最后一个元素
   $("tr:last").css("background","blue");
   //:eq(index) : 将第三行设置黄色
   $("tr:eq(2)").css("background","yellow");
   //:gt(index) greater
   $("tr:gt(3)").css("background","green");
   //:lt(index) letter
   $("tr:lt(2)").css("background","gray");
   //实现隔行变色
   //:even
   $("tr:even").css("background","pink");
   //:odd
   $("tr:odd").css("background","orange");
</script>
4.过滤方法
    [1] eq(index) : 通过下标获取元素，等价于 :eq(index)
    [2] first() : 获取第一个元素，等价于 :first
    [3] last() : 获取最后一个元素，等价于 :last
    [4] next() : 获取紧挨着的下一个同胞元素
    [5] prev() : 获取紧挨着的上一个同胞元素
    [6] siblings() : 获取所有的同胞元素
    [7] parent() : 获取父元素
    [8] parents(选择器) ：通过选择器获取任何一个祖先元素
    [9] find(选择器) ：通过选择器查找后代元素，等价于后代选择器
<body>
<div>table 之前的div元素</div>
<table border="1" cellpadding="5" cellspacing="0" width="500">
   <tr>
       <td>姓名</td>
       <td>年龄</td>
       <td>性别</td>
       <td>地址</td>
   </tr>
   <tr>
       <td>张三</td>
       <td>23</td>
       <td>男</td>
       <td>北京海淀</td>
   </tr>
   <tr>
       <td>李四</td>
       <td>44</td>
       <td>女</td>
       <td>北京通州</td>
   </tr>
   <tr>
       <td>王五</td>
       <td>67</td>
       <td>男</td>
       <td>北京昌平</td>
   </tr>
   <tr>
       <td>赵六</td>
       <td>88</td>
       <td>女</td>
       <td>北京朝阳</td>
   </tr>
   <tr>
       <td>钱琪</td>
       <td>25</td>
       <td>女</td>
       <td>
          <button id="del">删除</button>
       </td>
   </tr>
</table>
<h1><></h1>
<h1>哈哈</h1>

<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   //first() : 获取第一个元素
   //获取第一个tr
   var first = $("tr").first();
   first.css("background","green");
   //last() : 获取最后一个元素
   //获取最后一个tr
   $("tr").last().css("background","red");
   //eq(index) : 获取第index个元素，index从0开始
   $("tr").eq(2).css("background","gray");
   //next() ： 获取紧挨着的下一个同胞元素
   //获取table紧挨着的下一个同胞元素
   $("table").next().css("color","red");
   //prev() : 获取紧挨着的上一个同胞元素
   //获取table紧挨着的上一个同胞元素
   $("table").prev().css("font-size","30px");
   //siblings() : 获取所有的同胞元素
   //获取table所有的同胞元素
   console.log($("table").siblings());
   //parent() : 获取父元素
   //获取table的父元素
   console.log($("table").parent());
   //parents(选择器) : 获取任何一个祖先元素
   //获取id=del的祖先元素tr
   console.log($("#del").parents("tr"));
   //find(选择器) ：通过选择器查找后代元素
   //在table中查找id=del的后代元素
   $("table").find("#del").css("color","blue");
   
</script>
5.属性过滤选择器
1）[属性名称=属性值] ：获取“属性名称=属性值“的元素，经常用在获取表单元素
UserName : <input type="text" name="username" />
Password : <input type="password" name="pwd" />

<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   //属性过滤选择器,一般用在获取表单元素，因为表单元素必有name属性
   //查找 name=username的input元素
   $("input[name=username]").css("border","2px solid red");
   //查找name=pwd的input元素
   $("input[name=pwd]").css("border","2px solid green");
</script>
6.子元素过滤选择器：根据层次关系过滤需要的元素
    [1] :first-child , 获取第一个子元素
    [2] :last-child ，获取最后一个子元素
    [3] :nth-child(index) , 获取任何一个子元素 index ：从1开始
<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   <ul>
       <li>4</li>
       <li>5</li>
       <li>6</li>
   </ul>

<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   //1.先获取 ul下所有的li元素
   //2.刷选出第一个元素
   //$("ul li:first").css("background","red");
   //子元素过滤选择器
   //1.查找所有的ul
   //2.查找每个ul下边第一个子元素
   $("ul li:first-child").css("background","red");
   $("ul li:last-child").css("background","green");
   $("ul li:nth-child(2)").css("background","blue");
</script>
7.表单过滤选择器：获取表单元素
:checked , 获取选中的checkbox或者radio
<body>
   性别：
       <input type="radio" value="男" name="sex">男
       <input type="radio" value="女" name="sex">女
   兴趣：
       <input type="checkbox" value="吃饭" />吃饭
       <input type="checkbox" value="睡觉" />睡觉
       <input type="checkbox" value="打豆豆" />打豆豆
       <input type="checkbox" value="淘宝双11" />淘宝双11
       <input type="checkbox" value="LOL" />LOL
       <button id="btn">获取选中的checkbox</button>

<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   document.getElementById("btn").onclick = function() {
       //获取选中的checkbox
       console.log($("input:checked"));
       //只获取选中的radio
      console.log($("input[name=sex]:checked"));
   }
</script>
jQuery为了简化事件的处理，封装了一套事件方法
事件方法：
   事件属性去掉on就是事件方法
1.事件的添加方式：
    $(选择器).事件方法(事件处理函数);
2.常用事件：
   [1] 点击事件：click(fn);fn:事件处理函数
   $("button").click(function() {
       alert("点击事件触发");
   });
[2] 失去焦点事件：blur(fn);fn:事件处理函数
   $("input[name=username]").blur(function() {
       console.log("失去焦点事件")
   });
[3] 获取焦点事件：focus(fn);fn:事件处理函数
   $("input[name=username]").focus(function() {
       console.log("获取焦点事件")
   });
[4] 内容改变事件：change(fn);fn:事件处理函数
 $("input[name=username]").change(function() {
       console.log("内容改变了");
   });
[5] 表单提交事件：submit(fn);fn:事件处理函数
   $("form").submit(function() {
       alert("表单提交了");
       //通过返回值可以控制表单的提交，返回true是提交表单；返回false是阻止提交表单
       return true;
   });
1）隐藏和显示：通过改变透明度、宽度以及高度来隐藏显示元素
    show(time) : 花费time毫秒显示元素
    hide(time) : 花费time毫秒隐藏元素

1.ready的事件：
    1）当文档加载完毕时，会执行ready事件。
    2）ready事件的使用：
        完全体：
        $(document).ready(function() {
        });
        简化版：
        $(function(){
        })
    3）onload 事件和 ready 事件的区别？
        1）onload 事件一个网页只能有一个；
            ready事件，一个网页中可以有多个，非常适合团队开发；彼此代码互不干扰。
        2）onload 等文档加载完毕时触发，要等整个资源(图片,视频,音频)都加载完毕；
            ready事件，等文档结构加载完毕，不用管资源是否加载完毕。

2.jQuery对象和DOM的转换问题：
    1） DOM对象：所有的HTML元素，js认为都是DOM对象.
    2) jQuery对象： $ 函数的返回值，都是jQuery对象.
    3) 联系：
        jQuery 对象中保存了DOM对象，可以对DOM对象进行操作。
    4）DOM对象转换为jQuery对象：
        var jQuery对象 = $(DOM对象);
    5）jQuery对象转换为DOM对象：
        [1] 通过数组的索引获取DOM对象：var btn1 = btns[1];

        [2] 通过jQuery对象的get(index) ： var btn1 = btns.get(0);

你儿时望着的月亮

从离家那晚跌落了东山

就没再爬起过