原创 前端jQuery基础学习笔记

发布时间:2020-05-06 11:39:28 浏览 1187 来源:博学谷 作者:照照

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

     

    jQuery基础学习

     

    1jQuery的概念

     

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

     

    2jQuery快速入门

     

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

    var div1 = $("#div1");

    alert(div1.html());

     

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

     

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

     

    2JQuery对象和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基础学习笔记的整理,大家都看懂了吗?如果觉得文字学习比较费力,可以直接上博学谷观看相应的学习视频,对相关知识点的讲解会更加详细!

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 前端面试Ajxa常见问题整理 下一篇: 博学谷JavaScript基础教程培训课程内容,

相关推荐 更多

    推荐课程

  • 深度学习ES6 打通前端框架开发基础

    ¥199 进阶 431

  • 前端电商项目课程

    免费 进阶 1501

  • 企业级微信小程序 从实战到重构提升

    ¥299 进阶 170

  • JavaScript数据结构与算法

    ¥299 基础 27

  • 大咖带你零基础入行前端

    免费 基础 772

热门文章

  • 5W2H数据分析方法及思维是什么?
  • UI设计师要懂什么技术?掌握哪些知识?
  • 哪里可以培训少儿编程老师?学什么?
  • 软件测试方法和技术知识点有哪些?
  • 2021年2月IT编程语言排行榜
  • PHP从入门到精通需要多长时间?
  • 产品经理需要的技能是什么?具备哪些能力?
  • 新媒体运营是做什么的?工作内容有哪些?
  • Java线上培训机构哪家好?靠不靠谱?
  • 学Web技术前端培训机构哪家好?
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码