美文网首页
前端jQuery基础学习笔记

前端jQuery基础学习笔记

作者: 再让你三行代码 | 来源:发表于2020-09-10 16:21 被阅读0次

众所周知,选择jQuery,可以写更少的代码,做更多的事情。jQuery作为[前端]开发和全栈开发必备的基础技术,我们都应该学习并熟练掌握它。本文为广大学习者总结和归纳了jQuery的基础知识,内容包括jQuery的概念、jQuery快速入门、JQuery对象和JS对象区别与转换和选择器。

jQuery基础学习

1、jQuery的概念

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。总的来讲,jQuery就是一个JavaScript框架,可以简化JavaScript开发。

2、jQuery快速入门

下载JQuery,导入JQuery的js文件:导入min.js文件,使用:

var div1 = $("#div1");

alert(div1.html());

3、JQuery对象和JS对象区别与转换

(1)JQuery对象在操作时,更加方便。

(2)JQuery对象和js对象方法不通用的.

(3)两者相互转换:

  • jq -- > js : jq对象[索引] 或者 jq对象.get(索引)

  • js -- > jq : $(js对象)

4、选择器

(1)基本操作

事件绑定:

                                 //1.获取b1按钮

                 $("#b1").click(function(){

                     alert("abc");

                 });

入口函数:

                                  $(function () {

                         });

                                  window.onload  和 $(function) 区别

                      * window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉

                      * $(function)可以定义多次的。

样式控制:css方法

                                  // $("#div1").css("background-color","red");

                    $("#div1").css("backgroundColor","pink");

(2)分类

A.基本选择器有标签选择器,语法是("html标签名")获得所有匹配标签名称的元素;id选择器,语法是("#id的属性值")获得与指定id属性值匹配的元素;类选择器,语法是(".class的属性值")获得与指定的class属性值匹配的元素;并集选择器,语法是("选择器1,选择器2....")获取多个选择器选中的所有元素。

B.层级选择器有后代选择器,语法是("A B ")选择A元素内部的所有B元素;子选择器,语法是("A > B")选择A元素内部的所有B子元素。

C.属性选择器有属性名称选择器,语法是("A[属性名]")包含指定属性的选择器;属性选择器,语法是("A[属性名='值']")包含指定属性等于指定值的选择器;复合属性选择器,语法是$("A[属性名='值'][]...")包含多个属性条件的选择器。

D.表单过滤选择器有可用元素选择器,语法是:enabled 获得可用元素,不可用元素选择器 ,语法是:disabled 获得不可用元素;选中选择器,语法是:checked 获得单选/复选框选中的元素;选中选择器,语法是:selected 获得下拉框选中的元素。

以上就是前端jQuery基础学习笔记的整理,大家都看懂了吗?

相关文章

  • 前端jQuery基础学习笔记

    众所周知,选择jQuery,可以写更少的代码,做更多的事情。jQuery作为[前端]开发和全栈开发必备的基础技术,...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • 第15/16天,jQuery

    @(Web前端)[笔记] jQuery API 3.2.1 速查表 目录 一、jQuery是什么? [1] j...

  • PHP从入门到精通

    一、PHP学习教程 PHP学习前期,首要的WEB前端基础知识,比如:html5、css3、java、jquery有...

  • python学习笔记-前端基础05-jQuery

    jQuery是对JavaScript的封装,极大的简化了JavaScript编程。jQuery优点:兼容主流浏览器...

  • web前端学习计划

    前端学习的知识路线:原生js,使用jQuery及编写jQuery扩展,前端模版,前端mvc,模块化开发,mvvm开...

  • 大前端进阶

    我们知道,前端的基础无非就是:HTML+CSS+JS(jquery)+UI框架+...从现在开始,我们要学习进阶的...

  • Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活。 案例: 使用jquery案例: jquery 快...

  • 前端测试

    目录 目录 1. 前端基础1.1 布局1.1.1 grid布局 2. Vue 学习笔记2.1 Vue模板创建 前端...

网友评论

      本文标题:前端jQuery基础学习笔记

      本文链接:https://www.haomeiwen.com/subject/itmpektx.html