JQuery 知识点

1.jQuery简介：

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

2.jQuery核心功能：

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

3.jQuery的引入方式：

加载本地的jQuery文件

<script type="text/javascript" src="jquery-1.9.1.js"> </script>

引入网络上的jQuery文件

<script type=“text/javascript” src=“http://ajax。googleapis。com/ajax/libs /jquery/1.4.0/jquery.min.js"> </script>

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的内置函数

 <script>
        $(function(){
            // $(selector).action();

            $(".p1").html("新内容");

            let pcontent =  $(".p1").html();  //将类名为".p1"的html内容赋值给变量
            // let pcontent =  $(".p1").text();  //纯文本内容
            console.log(pcontent);//将变量打印从控制台打印

            $("input[name='username']").val("张三");//通过name属性的name值找到input框，并改变其value属性的值；

            let inputValue = $("input[name='username']").val();//通过name属性的name值找到input框，并将其value属性的值赋给变量
            console.log('inputValue :',inputValue);
        })
    </script>

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选择器

基本选择器

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

高级选择器

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

    * [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操作

DOM的增删改

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

//通过$符号创建的元素为jquery对象,对象在内存中类似于innerHTML
var image = $('<img src="1.png" alt="图片" style="width: 100px;"/>');
//插入body下
$(document.body).append(image);

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

image.png
删除DOM元素

image.png
修改DOM元素

image.png

DOM属性的设定

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

 <script>
      $(function () {
        const src1 = $("img").attr("src","image/advpic.jpg");
        alert(src1);
      });
    </script>

image.png

DOM样式的设定

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

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

image.png

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