JQuery知识总结(一)

最新推荐文章于 2024-07-30 10:56:44 发布

Solitude.5254

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量553

点赞数

分类专栏： JavaScript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_52215821/article/details/121314561

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JQuery（一）

文章目录

JQuery（一）

JQuery介绍

jQuery是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

JQuery核心思想
它的核心思想是writeless,domore(写得更少,做得更多)，
所以它实现了很多浏览器的兼容问题。
jQuery流行程度jQuery现在已经成为最流行的JavaScript库，
在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery好处！！！

jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

补充
DOM和BOM的区别

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作
而后者是对浏览器（可看成容器）内的内容进行操作。

js原生事件和JQeury事件

js原生事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
            window.onload=function(){
                var hobbies=document.getElementsByName("hobbies");
                    document.getElementById("head").onclick=function(){
                        for(var i=0;i<hobbies.length;i++){
                             hobbies[i].checked= document.getElementById("head").checked;  
                        }
                    }

                    for(var i=0;i<hobbies.length;i++){
                        hobbies[i].onclick=function(){
                                var count=0;
                            for(var i=0;i<hobbies.length;i++){
                              if(hobbies[i].checked){
                                  count++;
                              }
                            }
 document.getElementById("head").checked=(hobbies.length==count);
                        }
                    } 
            }
          
    </script>
    <div>
        <input type="checkbox" value="" id="head">
        <br>
        <input type="checkbox" value="" name="hobbies"/>吃
        <br>
        <input type="checkbox" value="" name="hobbies"/>喝
        <br>
        <input type="checkbox" value="" name="hobbies"/>嫖
        <br>
        <input type="checkbox" value="" name="hobbies"/>赌
    </div>
   
</body>
</html>

JQeury事件

          $(function(){
    var $hobbies =$("input[name='hobbies']");
    $("#head").click(function(){
        for(var i=0;i<$hobbies.length;i++){
          $hobbies[i].checked= $("#head").checked;  
 }
    });   
    for(var i=0;i<$hobbies.length;i++){
        $hobbies[i].click(function(){
            var count=0;
            for(var i=0;i<$hobbies.length;i++){
                if($hobbies[i].checked){
                    count++;
                }
            }
            $("#head").checked==($hobbies.length==count);
        });
    }         
});

JQuery核心函数

$ $是 j Q u e r y 的核心函数，能完成 j Q u e r y 的很多功能。$ $ ()就是调用$ 这个函数

1、传入参数为[函数]时：

    表示页面加载完成之后。相当于window.onload=function(){}

2、传入参数为[HTML字符串]时：

 会为我们创建这个html标签对象

3、传入参数为[选择器字符串]时：

$ (“#id属性值”);id选择器，根据id查询标签对象
$ (“标签名”);标签名选择器，根据指定的标签名查询标签对象
$(“.class属性值”);类型选择器，可以根据class属性查询标签对象。

4、传入参数为[DOM对象]时：

 会把这个dom对象转换为jQuery对象

jQuery对象和dom对象区分

Dom对象

1.通过getElementById()查询出来的标签对象是Dom对象
2.通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象，是Dom对象

DOM对象Alert出来的效果是：

 [objectHTML标签名Element]

jQuery对象

5.通过JQuery提供的API创建的对象，是JQuery对象
6.通过JQuery包装的Dom对象，也是JQuery对象
7.通过JQuery提供的API查询到的对象，是JQuery对象
jQuery对象Alert出来的效果是：

  [objectObject]

jQuery对象的本质

 jQuery对象是dom对象的数组+jQuery提供的一系列功能函数

jQuery对象和Dom对象使用区别

 jQuery对象不能使用DOM对象的属性和方法
 DOM对象也不能使用jQuery对象的属性和方法

Dom对象和jQuery对象互转

dom对象转化为jQuery对象
1、先有DOM对象
2、$(DOM对象)就可以转换成为jQuery对象
jQuery对象转为dom对象
1、先有jQuery对象
2、jQuery对象[下标]取出相应的DOM对象

在这里插入图片描述

jQuery选择器

基本选择器

#ID选择器：

 根据id查找标签对象

.class选择器：

 根据class查找标签对象

element选择器：

 根据标签名查找标签对象*选择器：表示任意的，所有的元素

selector1，selector2组合选择器：

 合并选择器1，选择器2的结果并返回

在这里插入图片描述

	$(function () {
	//1.选择 id 为 one 的元素 "background-color","#bbffaa"
	$("#btn1").click(function () {
	// css() 方法 可以设置和获取样式
	$("#one").css("background-color","#bbffaa");
					});
	//2.选择 class 为 mini 的所有元素
	$("#btn2").click(function () {
	$(".mini").css("background-color","#bbffaa");
		});
	//3.选择 元素名是 div 的所有元素
	$("#btn3").click(function () {
	$("div").css("background-color","#bbffaa");
	});
	//4.选择所有的元素
	$("#btn4").click(function () {
		$("*").css("background-color","#bbffaa");
	});

	//5.选择所有的 span 元素和id为two的元素
	$("#btn5").click(function () {
	$("span,#two").css("background-color","#bbffaa");
		});
	});

层级选择器

ancestordescendant后代选择器：

在给定的祖先元素下匹配所有的后代元素

parent>child子元素选择器：

 在给定的父元素下匹配所有的子元素

prev+next相邻元素选择器：

匹配所有紧接在prev元素后的next元素

prev~sibings之后的兄弟元素选择器：

匹配prev元素之后的所有siblings元素

	$(document).ready(function(){
	//1.选择 body 内的所有 div 元素
	$("#btn1").click(function(){
	$("body div").css("background", "#bbffaa");
});

	//2.在 body 内, 选择div子元素  
	$("#btn2").click(function(){
	$("body > div").css("background", "#bbffaa");
	});

	//3.选择 id 为 one 的下一个 div 元素 
	$("#btn3").click(function(){
	$("#one+div").css("background", "#bbffaa");
	});

	//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
	$("#btn4").click(function(){
	$("#two~div").css("background", "#bbffaa");
		});
	});

过滤选择器

基本过滤器

在这里插入图片描述

:first获取第一个元素
:last获取最后个元素
:not(selector)去除所有与给定选择器匹配的元素
:even匹配所有索引值为偶数的元素，从0开始计数
:odd匹配所有索引值为奇数的元素，从0开始计数
:eq(index)匹配一个给定索引值的元素
:gt(index)匹配所有大于给定索引值的元素
:lt(index)匹配所有小于给定索引值的元素
:header匹配如h1,h2,h3之类的标题元素
:animated匹配所有正在执行动画效果的元素

内容过滤器

在这里插入图片描述

:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或者文本的空元素
:parent匹配含有子元素或者文本的元素
:has(selector)匹配含有选择器所匹配的元素的元素

属性过滤器

在这里插入图片描述

[attribute]匹配包含给定属性的元素。
[attribute=value]匹配给定的属性是某个特定值的元素
[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]匹配给定的属性是以某些值开始的元素
[attribute$=value]匹配给定的属性是以某些值结尾的元素
[attribute*=value]匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]复合属性选择器，需要同时满足多个条件时使用。

表单过滤器

在这里插入图片描述

:input匹配所有input,textarea,select和button元素
:text匹配所有文本输入框
:password匹配所有的密码输入框
:radio匹配所有的单选框
:checkbox匹配所有的复选框
:submit匹配所有提交按钮
:image匹配所有img标签
:reset匹配所有重置按钮
:button匹配所有inputtype=button<button>按钮
:file匹配所有inputtype=file文件上传
:hidden匹配所有不可见元素display:none或inputtype=hidden

表单对象属性过滤器

在这里插入图片描述

:enabled匹配所有可用元素
:disabled匹配所有不可用元素
:checked匹配所有选中的单选，复选，和下拉列表中选中的option标签对象
:selected匹配所有选中的option

Solitude.5254

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery知识总结(一)

JQuery（一）文章目录JQuery（一）JQuery介绍js原生事件和JQeury事件JQuery核心函数jQuery对象和dom对象区分Dom对象jQuery对象Dom对象和jQuery对象互转jQuery选择器基本选择器层级选择器过滤选择器基本过滤器内容过滤器属性过滤器表单过滤器表单对象属性过滤器JQuery介绍jQuery是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。JQuery核心思想它的核心思想是writeless,domore(写得更
复制链接

扫一扫

专栏目录