jquery快速入门

jQuery的作用:1.取得页面中的元素;2.修改页面的外观;3.改变页面的内容;4.响应用户的页面操作;5.为页面添加动态效果;6.无须刷新页面即可从服务器获取数据;7.简化常见的js任务。

$是jquery专用的特殊符号,可以说所有jquery函数的调用都是从$开始的$()在jquery里面表示一个选择器,括号里面填写一定的表达式就可以选中你想要的元素,jquery的选择器除了能很好地遵循css的表达式外,还额外提供了一些更个性化的选择方式,比如$("div li:nth-child(2)")选中的是div中的第2个li元素。
关于选择器的更多用法可以百度一下jquery的api$(document)是一个选择器,选中的是整个html所有元素的集合。$(function(){..})等于document.ready事件,即在页面所有元素准备完毕之后,载入页面之前执行本方法$()在jquery里面表示一个选择器,括号里面填写一定的表达式就可以选中你想要的元素,jquery的选择器除了能很好地遵循css的表达式外,还额外提供了一些更个性化的选择方式,比如$("div li:nth-child(2)")选中的是div中的第2个li元素。
关于选择器的更多用法可以百度一下jquery的api$(document)是一个选择器,选中的是整个html所有元素的集合。$(function(){..})等于document.ready事件,即在页面所有元素准备完毕之后,载入页面之前执行本方法
----------------------------------------------------------------------------------------------------------------------------------
 
  1. <html>

  2. <head>

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

  4. <script type="text/javascript">

  5. $(document).ready(function(){

  6. $("p").click(function(){

  7. $(this).hide();

  8. });

  9. });

  10. </script>

  11. </head>

  12. <body>

  13. <p>If you click on me, I will disappear.</p>

  14. </body>

  15. </html>

以上案例解释:当按钮的点击事件被触发时调用相关函数。

$(document).ready(function)

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。

由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档,因此无需选择器。

----------------------------------------------------------------------------------------------------------------------------------------------

从此处开始,进入jquery代码快。

 $("p").click(function(){}

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

----------------------------------------------------------------------------------------------------------------------------------

 

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" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

实例

$("p").css("background-color","red");

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

jQuery快速入门相关推荐

  1. JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门

    1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...

  2. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  3. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  4. JQuery快速入门-选择器

    JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...

  5. jquery快速入门(二)

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  6. jQuery快速入门(2)--操作 2021.11.20

    关联查找 1)$dom.parent():找$dom的父节点,相当于dom.parentNode属性 2)$dom.first():$dom集合中的第一个,平行关系 而不是父子关系 与parentNo ...

  7. jQuery快速入门(淘宝切换服饰、王者荣耀手风琴效果)

    一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...

  8. jquery 快速入门二

    ---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...

  9. JQuery 快速入门一篇通

    JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...

最新文章

  1. 一篇比较深刻的讲FP特性的文章
  2. linux查看文件隐藏字符,Linux使用cat命令显示隐藏字符的方法
  3. (0098)iOS开发之应用间的分享系列(3)
  4. 公司GitHub被封号,只因员工在伊朗开电脑,官方:将撤销被美制裁国家限制
  5. qq满屏飞吻代码_教你用微信隐藏代码表白!各种微信技巧
  6. 树——axure线框图部件库介绍
  7. 中断底半部:softirq、tasklet、workqueue
  8. saml2_向SAML响应中添加自定义声明–(如何为WSO2 Identity Server编写自定义声明处理程序)...
  9. c语言的四个函数,C语言学习之动态内存分配的四个函数
  10. Android 自定义ImageView加载图片
  11. Bailian4033 铺地毯【暴力】
  12. Hive依据key获取value
  13. stm32F407 调试 LAN8720A ping不通问题解决
  14. 用python爬取校花网图片
  15. SpringCloud-11-解决[NACOS HTTP-GET] The maximum number of tolerable server reconnection errors has bee
  16. Pygame显示文字
  17. 小爱同学语音API(不需要小米账号)
  18. 决策树之C4.5实现(离散属性与连续,属性并存)
  19. uboot引导vxworks6.9(T4240) 启动
  20. numpy.meshgrid()理解

热门文章

  1. python链表翻转_反转链表(两种Python解法)
  2. linux 启动两个摄像头,Linux:(多摄像头)如何运行指定的摄像头
  3. 恒位油杯故障原因_厂家详解干式真空泵故障分析与保养办法
  4. Android Studio引入.so文件的正确姿势 以及调用.so 文件时报错has text relocations 解决
  5. Python基础——Anaconda的安装使用
  6. mit risc-v 资料
  7. Pycharm 配置 Anaconda中解释器
  8. sklearn.preprocessing.PolynomialFeatures
  9. Failed to start mongod.service: Unit mongod.service not found
  10. pyspark 连接mysql