JQuery 知识点

1.jQuery简介：

jquery是JavaScript+查询（Query），是由javascript编写的js库，为编写javascript提供了更高效便捷的接口

2.jQuery核心功能：

1. HTML 元素选取：提供了在文档上查找dom元素的方式。
2. HTML 元素操作：提供了对dom元素的操作增删改功能。
3. CSS 操作 ：提供了对dom元素样式的修改功能。
4. HTML 事件函数 ：扩展了javascript事件，并实现了兼容。
5. JavaScript 特效和动画 。
6. AJAX ：简化了javascript对于ajax的调用。
7. Utilities ：提供了若干工具函数。

3.jQuery的引入方式：

1. 加载本地的jQuery文件

2. 引入网络上的jQuery文件

4.jQuery入门程序

//当网页加载后弹出helloworld对话框

$(document).ready(function() {
    alert('hellowworld');
});

//简写形式
        $(function(){
            
        });
//$:jQuery的核心函数，用于获取document对象。
//ready():jQuery提供的事件函数，表示当文档加载后调用响应函数

5.jQuery的基本语法

$(selector).action();

$：jQuery的核心函数,也可编写成jQuery

• selector：jQuery的查找网页元素的表达式,返回jQuery封装的DOM对象
• action：jQuery的内置函数

6.jquery对象与DOM对象的区别

• jQuery 对象：就是通过jQuery封装的DOM对象，兼容性更强

• jQuery对象中封装了dom对象

• jQuery对象扩展了dom对象的属性及方法

• jQuery对象：

var $div = $("#div");
$div.html('使用jquery对象操作');

• DOM对象：

var div = document.getElementById('div');
div.innerHTML="使用dom对象操作";

var $variable = jQuery 对象;
var variable = DOM 对象;

7.Jquery对象与DOM对象的转换

• 将DOM对象转换为jQuery对象：用$()把DOM对象包装起来

//DOM对象转换为jquery对象的方式
var div = document.getElementById('div');
var $div = $(div);
$div.html('使用jquery对象操作');

• 将jQuery对象转换为DOM对象：一个jQuery对象可以封装多个DOM对象；通过size()方法，返回选择器选择的dom对象的数量

/*使用数组下标获取dom对象*/
var firstInput = $input[0];
//使用get方法获取
var firstInput = $input.get(0);
/*获取jquery封装的dom对象的数量*/
var size = $input.size();

image.png

8.jquery选择器

1. 基本选择器

   $("#id").action()   //id选择器:选择一个具有指定id属性的单个元素
   $("元素").action()  //元素选择器: 参数为html标签名，返回该标签对应的jQuery对象（封装一组DOM对象）
   $(".class").action() //  类选择器:参数为css的样式类名，返回使用当前样式类渲染的jQuery对象
   $("*").action() //通配符选择器：匹配所有元素对应的jQuery对象
   

2. 高级选择器

• 属性选择器：通过元素的属性来获取相应的元素

    * [attribute]： 匹配包含指定属性的元素
     $("div[id]") //获取所有具有id值的div对象

    * [attribute=value]：匹配给定的属性是某个特定值的元素
     $("input[name=‘userName’]") 获取name取值为userName的输入框

    * [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素
     $("input[name!=‘userName’]")获取name取值为非userName的输入框

    * [attribute^=value]：匹配给定的属性是以某些值开始的元素
    $("input[name^=‘news’]")获取name取值以news开头的输入框

    * [attribute$=value]：匹配给定的属性是以某些值结尾的元素
    $("input[name$=‘end’]")获取name取值以end结尾的输入框

    * [attribute*=value]:匹配给定的属性是以包含某些值的元素
    $("input[name*=‘con’]") 获取name取值包含con的输入框

    * [attributeFilter1][attributeFilterN]：组合使用
    $("input[id][name$=‘man’]")  
    //获取具有id属性，name取值以man结尾的输入框

• 层次选择器：通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素

$("form input") 获取form表单下所有input标签
$("form > input") 获取form表单下直接子节点input标签

• 伪类选择器

$(".class:first") 获取第一个样式类名为class的元素
$(" .class:first-child") 获取样式类名为class的元素的第一个子元素
$(".class:empty") 获取样式类名为class且没有子元素的选择器

9.jQuery的DOM操作

1. DOM的增删改

• 创建DOM元素: 使用 jQuery 的工厂函数 $(html)，会根据传入的 html 字符串创建一个 jQuery的DOM 对象并返回

//通过$符号创建的元素为jquery对象,对象在内存中类似于innerHTML
var image = $('');
//插入body下
$(document.body).append(image);

• 插入dom元素：将jQuery的dom对象插入到指定位置上

  
  
  image.png

• 删除DOM元素

  
  
  image.png

• 修改DOM元素

  
  
  image.png

2. DOM属性的设定

• 属性操作：获取或设定DOM元素属性值

image.png

3. DOM样式的设定

• 样式操作：修改目标元素所使用的样式类

//获取样式取值
$('#div').css("font-size")
//设定一个样式
$('#div').css('color','red');
//批量设定样式
$('#div').css({color:'red','background-color':'yellow'});

image.png

4. DOM对象的html设定
   Html设置：用于设置元素内部的html代码或字符
   • obj.html():读取和设置某个元素中的HTML 内容，与dom中的innerHTML一致。
   • obj.text():读取和设置某个元素中的文本内容，与dom中的innerText一致