JQuery学习（一）

最新推荐文章于 2022-11-29 13:58:04 发布

keep creating

最新推荐文章于 2022-11-29 13:58:04 发布

阅读量220

点赞数 2

分类专栏： JQuery

本文链接：https://blog.csdn.net/Ybianyi/article/details/105728160

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQuery学习（一）

什么是JQuery？

jQuery是一个优秀的JavaScript代码库。倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理与交互。一句话概括为：是一个封装了很多方法的JS库。

核心特性

1、具有独特的链式语法和短小清晰的多功能接口；
2、具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
3、拥有便捷的插件扩展机制和丰富的插件。

JQuery的优势

1、可以写入多个入库函数；
2、JQuery的api名字容易记住；
3、JQuery代码简洁（隐式迭代）；
4、解决浏览器兼容性问题；
5、容错率较高，前面代码出来了问题，后面代码受影响小

如何使用JQuery？

1、引入JQuery文件；

JQuery版本	特性
1.x	支持老浏览器比如ie678 ，停止更新了
2.x	不支持老浏览器的，停止更新了
3.x	不支持老浏览器的，更新中

2、写一个入口函数；

$(function () {
    alert("我是jQuery入口函数");
  });

  window.onload = function () {
    alert("我是window.onload");
  }

3、找到要操作的元素（JQuery选择器），去操作（添加属性、样式、文本）

$(document).ready(function () {
    $('div').width(100).height(100).css('backgroundColor','red').text('哈哈'); //链式编程.
  });

JQuery的两种写法

第一种写法：

$(document).ready(function () {
  //
  // });

第二种写法：

$(function () {
  //
  // });

JQuery入口函数和window.onload入口函数的区别

1.window.onload入口函数不能写多个，但是jQuery的入口函数是可以写多个的；
2.执行时机不同： jQuery入口函数要快于window.onload；
jQuery入口函数要等待页面上dom树加载完后执行 window.onload要等待页面上所有的资源(dom树/外部css/js连接,图片)都加载完毕后执行。

JQuery对象和DOM对象的比较

1、JQuery对象
利用JQuery选择器获取到的对象
特点:只能调用JQuery的方法或者属性,不能调用DOM对象的属性或者方法
2.DOM对象
原生js选择器获取到的对象
特点:只能调用DOM方法或者属性,不能调用JQuery的属性或者方法.
二者的关系：
JQuery对象是一个伪数组，JQuery对象其实就是DOM对象的一个包装集

//dom对象转换成jQuery对象.
 var div1 = document.getElementById("one");
 var $div1 = $(div1);
 console.log($div1);

jQuery对象转换成dom对象.
    //方法一： 使用下标来取出来.
    var $divs = $('div');
    console.log($divs);
    var div1 = $divs[0];
    console.log(div1);
    
    //方法二：使用jQuery的方法 get();
    var div2 = $divs.get(1);
    console.log(div2);

案例一：过滤选择器-隔行变色

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //设置奇数行li标签颜色为天蓝色.
    $('li:odd').css('backgroundColor','skyblue');

    //设置偶数行li标签背景色为粉色
    $('li:even').css('backgroundColor','pink');

    //首尾两行li显示红色.
    $('li:eq(0)').css('backgroundColor','red');
    $('li:eq(9)').css('backgroundColor','red');

  });
</script>

效果图：在这里插入图片描述

案例二：开关灯

<body>
    <button>开灯</button>
    <button>关灯</button>
    <img src="images/coder.jpg"/>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //需求:给按钮们添加事件:设置body的背景色.

    //1.获取到按钮们
    var btns = document.getElementsByTagName("button");
    //console.log(btns);

    //2.给关灯按钮设置点击事件.
    btns[1].onclick = function () {
      $('body').css('backgroundColor','black');
    }

    //3.给开灯按钮设置一个点击事件.
    $(btns[0]).click(function () {
      $('body')[0].style.backgroundColor = 'white';
    });

  });
</script>

keep creating

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习（一）

JQuery学习（一）什么是JQuery？jQuery是一个优秀的JavaScript代码库。倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理与交互。一句话概括为：是一个封装了很多方法的JS库。核心特性1、具有独特的链式语法和短小清晰的多功能接口；2、具有高效灵活的css选择器，并且可对C...
复制链接

扫一扫