JQuery笔记

jQuery

简称："JQ"

jQuery是一个快速、简洁的JavaScript框架(库，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布)

jQuery设计的宗旨是“write Less，Do More”（写的少，干得多）

jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

插件：是封装好的一个独立的功能代码，可供开发人员完成某个功能时直接使用的

库：是将很多功能代码封装到一起的，并不能帮助我们完成一整个项目

框架：可以帮助我们完成一整套的项目开发

一、jQuery起步

官网:jQuery

手册：离线版(.chm或者PDF)

在线版:jQuery插件库-收集最全最新最好的jQuery插件

1.1 安装jquery

a. 下载jQuery库文件

从jq22.com网站上边下载

b. 导入jQuery库文件

 <!-- 第一种方法: 将jquery文件下载到本地再引入 -->
   <script src="./jquery-3.5.1.min.js"></script>
  <!-- 第二种:使用cdn的方式 在线的juqery文件   要求电脑必须连网   会导致网页加载速度变慢-->
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

1.2 入口函数

又称作 预加载函数

<script>
// 第一种写法
$(document).ready(function(){
  // 在这里写你的代码...
});
   // 第二种写法
$(function(){
    // 在这里写你的代码...
})
</script>

JavaScript中获取html元素的方法

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

jQuery中获取对象的方法

$()

1.3 jQuery获取DOM元素

$() 来获取对象(DOM元素)

面试题

js的dom对象和jQuery中的Dom对象 如何互相转化

js dom对象 转化为jquery dom对象 ： 只需给js dom对象加上$()

jquery dom对象如何转化为js的dom对象： jq对象[下标]

二、选择器

选择器就是帮助我们来选取元素的，比如说在css中的选择器，选择好元素后进行样式的修饰，在Jquery中选择器选好元素后，是需要进行DOM操作的

大部分的css选择器都可以应用到jQuery选择器中

CSS的选择器分类

• 基础选择器

  • *号选择器

  • 标签(元素)选择器

  • 类选择器 .类名

  • id选择器 #id值

• 复合选择器

  • 后代选择器 E F 查找的是E元素里边的F元素

  • 子集选择器 E>F 查找的是E元素的子集F元素

  • 紧邻兄弟选择器

  • 同辈兄弟选择器

  • 多重选择器

• 伪类选择器

  • :hover

  • :active

  • :visited

  • :link

  • :first-child

  • :last-child

  • :nth-child()

  • :not()

  • :nth-of-type()

• 伪对象选择器

  • ::before

  • ::after

  • ::first-line

  • ::first-letter

三、样式

1. css() 为dom对象设置样式

   第一种用法： css(属性名称,属性值) 一次只能设置一个样式

   <div class="demo">
           设置一条样式
   </div>
   <script>
   $('.demo').css('color','blue').css('background-color','red')
   </script>

   第二种用法：css({属性名称:属性值,属性名称:值....})

   <div class="demo">
           设置一条样式
   </div>
   <script>
       // 写法一
    var s =  { 
        color:'blue',
        backgroundColor:'cyan',
        fontSize:'24px'
          }
        $('.demo').css(s)
      // 写法二 
      $('.demo').css({ 
        'color':'blue',
        'background-color':'cyan',
        'font-size':'24px'
          }) 
   </script>

   四、DOM操作

2. append() 向匹配到的父元素末尾追加子元素

   <div class="add">append</div>
   <script>
       /*
   	 1. 创建dom元素
        jQ:  $('<a href="http://www.baidu.com">百度</a>')
       2. 获取父元素
       $('.add')
       3. 使用append()追加
       父元素对象.append(要追加的子元素)
           */
   var obj = $('<a href="http://www.baidu.com">taobao</a>')
   $('.add').append(obj)
   </script>

   2.appendTo() 把子元素追加到父元素中

    <div class="add">append</div>
   <script>
   var obj = $('<a href="http://www.baidu.com">taobao</a>')
   obj.appendTo($('.add'))
   </script>

   3.prepend() 向父元素的开头添加子元素

    <div class="add">prepend</div>
   <script>
   var obj = $('<a href="http://www.baidu.com">taobao</a>')
   $('.add').prepend(obj)  
       //结果： <div class="add"><a href="http://www.baidu.com">taobao</a>prepend</div>
   </script>

   4.prependTo() 元素前置到另一个、指定的元素元素集合中。

   <div class="parent">宝剑锋从磨砺出</div>
       <span id="child">梅花香自苦寒来</span>
   <script>
       $(function(){
           $('#child').prependTo($('.parent'))
           // 效果：<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从磨砺出</div>
       })
   </script>

   5.remove() 移出匹配到的元素

   <p>苹果01</p>
   <p class="two">苹果02</p>
   <p>苹果03</p>
   <script>
   //$('p').remove()   // remove()方法不传递参数的情况下  表示删除匹配到的所有元素$('p').remove('.two')   // 移除类名等于two的p标签</script>