【javascript】框架学习的路永远不会停止，但暂时学到这里吧

最新推荐文章于 2024-10-17 09:40:47 发布

玖夜Kty

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量222

点赞数

分类专栏： web 框架 jquery 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44587107/article/details/121038651

版权

web 同时被 3 个专栏收录

47 篇文章 1 订阅

订阅专栏

框架

3 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

文章目录

框架

框架

前端常用的框架有 Bootstrap、Vue、Angular、React等。既能开发Pc端也能开发移动端
前端常用的移动端插件有**swiper、superslide、iscroll等。**

学习路线与知识点汇总

常见的JavaScript库

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto

这些库都是对原生Javascript的封装，内部都是用javascript实现的。

jQuery: write less, do more

优点

轻量级。jQuery非常轻巧，采用UglifyJS压缩后，大小保持在30KB左右。
强大的选择器。
允许开发者使用从CSS1-CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择权。
出色的DOM操作的封装。
jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候，更得心应手。
可靠的事件处理机制
完善的Ajax
jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
不污染顶级变量。
出色的浏览器兼容性
链式操作方式
对发生在同一个jQuery对象上的操作，可以直接连写而无重复获取对象。
隐式迭代
当想找到带有“.myclass”类的全部元素，并将其隐藏，无需循环遍历每一个返回的元素。
行为层与结构层的分离
开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。使各个方面的开发人员各司其职，互不干涉。
丰富的插件支持
完善的文档
开源

jquery的一些使用

$(function(){
    $('div').hide();
})

$ is the top object of jQuery, like window
用原生js获取来的对象就是DOM，比如我们之前获取一个对象使用利用querySelector(‘div’); 我们利用jQuery只需要这样 $(‘div’);就可以做到一样的获取效果，但是是有一些区别的
承接上文，jQuery对象的本质是利用$对DOM对象包装后产生的对象（伪数组形式存储）
jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的javascript 属性和方法

对象转换

jQuery对象与Dom对象的互相转换，因为JS比jQuery更大，原生的一些属性和方法jQuery里面并没有封装，要想使用这些方法必须转换为DOM对象
DOM对象转换为jQuery对象：$(DOM Object)
jQuery对象转换为DOM对象,要用到索引号

example

<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频，得到就是jQuery对象
        // $('video');
        // (2) 我们已经使用原生js 获取过来 DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面没有play 这个方法
        // 2.  jQuery对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>

jQuery的常用API

jQuery选择器

jQuery基础选择器

原生js获取元素的方式各种各样花样繁多，jQuery贴心地为我们封装了

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

$('选择器')     //直接填css选择器就行了
$("p").css("background-color","red");

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
$(“p”) 选取 p 元素。
$(“p.intro”) 选取所有 class=“intro” 的 p 元素。
$(“p#demo”) 选取所有 id=“demo” 的 p 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
$("[href￥=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。￥替换成美元符号

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 p 元素
$(“p.intro”)	所有 class=“intro” 的 p 元素
$(".intro")	所有 class=“intro” 的元素
$("#intro")	id=“intro” 的元素
$(“ul li:first”)	每个 ul 的第一个 li 元素
$("[href￥=’.jpg’]")	所有带有以 “.jpg” 结尾的属性值的 href 属性(把￥替换成$)
$(“div#intro .head”)	id=“intro” 的 div 元素中的所有 class=“head” 的元素

jQuery隐式迭代

jQuery修改样式

$('div').css('属性','值');

便利内部dom元素并以为数组的形式存储起来的过程就叫做隐式迭代

简单理解：给匹配到的所有元素都循环遍历，执行相应的方法，而不用我们自己去执行循环，简化我们的操作

jquery筛选选择器

全部选择器参考手册

选择器	实例	选取
*	$("*")	所有元素
:first	$(“p:first”)	第一个 <p> 元素
:last	$(“p:last”)	最后一个 <p> 元素
:even	$(“tr:even”)	所有偶数 <tr> 元素
:odd	$(“tr:odd”)	所有奇数 <tr> 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素

jquery筛选、遍历方法（重点）

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟
nextAll([expr])	$(".first").nextAll()	查找元素后的所有后辈
prevAll([expr])	$(".first").prevAll()	查找元素前的所有前辈
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有返回true