什么是jquery？

Jquery是javascript的一个函数库包含以下功能:
  • html元素选取
  • html元素的操作
  • css操作
  • html事件的函数
  • javacript的特效
  • html的遍历和修改
  • ajex
jquery的引用
使用jquery的两种方法
下载对应的jQuery库，从jquery.com进行下载
<head> <script src="jquery-1.10.2.min.js"></script> </head>

2.使用CNN

百度

<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>

又拍

<head> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head>

新浪

<head> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>

谷歌

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head>

微软

<head> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>

jQuery基本语法

jquery语法是通过选取html元素，并对其进行选取元素执行某些操作
基础语法:$(selector).action()
  • 美元符号定义jquery
  • selector选择符查询和查找对应html元素
  • jquery的action()执行对元素的操作
$(this).hide()-隐藏当前的元素
$("p").hide()-隐藏所有的<p>元素
$("p.test").hide()-隐藏所有class="test"的<p>元素
$("#test").hide()-隐藏所有id="test"的元素
 
文档就绪事件
$(document).ready(

function(){

//开始书写对应的jQuery代码

}

)
这样写的原因是：
  • 防止文档加载之前运行jQuery代码-在DOM加载完成之后才进行操作
注意:
jQuery入口函数与js入口函数区别
$(document).ready(

    function(){

        //执行代码

    }

)

//或者

$(function(){

    //执行代码

})

//javascript入口函数

window.onload=function(){

    //执行代码

}
 
window.onload
$(doucument).read()
执行时机
必须等待网页全部加载完毕，包括图片等
只需要等待网页中dom结构加载完毕，就可以执行包裹代码
执行次数
只能执行一次，如果执行两次，那么第一次执行会全部覆盖
 可以执行多次，第n次都不会被上一次覆盖
简写方案
无
$(function(){});
 
 Jquery选择器
  • jQuery选择器允许对html元素
  • jQuery选择器基于元素id、类、属性、属性值等进行查找html元素，它基于已经存在的css选择器。除此之外，它还有一个自定义的选择器。
  • jQuery中所有的选择器都是通过美元符号开头$()

元素选择器

<html>

    <head>

        <title>

            初始化jQuery

        </title>

        <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">

        </script>

        <script>

            $(document).ready(function(){

                $("button").click(

                    function(){

                        $("p").hide();

                    }

                )

            })

        </script>

    </head>

    <body>

            <h2>这是一个标题</h2>

            <p>这是一个段落。</p>

            <p>这是另一个段落。</p>

            <button>点我</button>

    </body>

</html>

#id选择器

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#test").hide();

});

});

</script>

</head>

<body>

<h2>这是一个标题</h2>

<p>这是一个段落</p>

<p id="test">这是另外一个段落，id为test</p>

<button>点一下我</button>

</body>

</html>

class选择器

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("button").click(function(){

$(".test").hide();

});

});

</script>

</head>

<body>

<h2 class="test">这是一个标题</h2>

<p class="test">这是一个段落。</p>

<p>这是另外一个段落。</p>

<button>点我</button>

</body>

</html>

其他例子

$("*") 选择所有的元素
$(this) 选择当前html元素
$("p.intro") 选择class为intro的p标签
$("p:first") 选择第一个<p>元素
$("ul li:first") 选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child") 选取每个<ul>元素的第一个<li>元素
$("[href]") 选取带有href属性的元素
$("a[target="_blank"]") 选取所有target属性值等于"_blank"的<a>元素
$("a[target!='_blank']") 选取所有属性值不等于'_blank'的<a>元素
$("tr:even") 选取偶数位置的<tr>元素
$("tr:odd")
选取奇数位置的
<tr>元素
 
 
 
 
 
 
 
 
 

初步学习jquery学习笔记（一）的更多相关文章

  1. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. 初步学习jquery学习笔记（六）

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  3. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  4. 初步学习jquery学习笔记（四）

    Jquery HTML Jquery 捕获内容 什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...

  5. 初步学习jquery学习笔记（二）

    jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...

  6. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  7. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  8. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  9. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

随机推荐

  1. [深度学习] pytorch学习笔记（4）(Module类、实现Flatten类、Module类作用、数据增强)

    一.继承nn.Module类并自定义层 我们要利用pytorch提供的很多便利的方法,则需要将很多自定义操作封装成nn.Module类. 首先,简单实现一个Mylinear类: from torch ...

  2. 大哥带的XSS练习

    0x01反射型 <script>alert("zhong")</script> 可以看见什么都没有过滤 0x02存储型XSS http://www.xss_ ...

  3. Arch linux(UEFI+GPT)安装及后续优化教程

    Arch Linux安装过程中需要从远程存储库获取软件包,电脑需要有效的互联网连接. 1.联网 查看是否有网 ping www.baidu.com 同步时间 timedatectl set-ntp t ...

  4. LinkedList,ArrayList,Vector,HashMap,HashSet,HashTable之间的区别与联系

    在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的ArrayList. ...

  5. 转 Cookie、Session

    https://www.cnblogs.com/liwenzhou/p/8343243.html Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况 ...

  6. 用xmmp+openfire+smack搭建简易IM实现

    功能实现:注册,登录,单聊表情,文本,图片,语音的发送接收,添加好友,删除好友,查找好友,修改密码,消息提醒设置,获取离线消息等功能 1.前期准备 1.下载opnefire软件:https://www ...

  7. Jmeter(七)参数化

    初识Jmeter的时候, 除了感觉安装和配置都很轻量以外, 还有一个最大的感触就是, 翻译真硬啊, 真的够够的! 和他磨合了挺长一段时间之后, 终于开悟了, 这些硬硬的翻译, 其实还是基本靠谱的, 看 ...

  8. Selenium 2自动化测试实战1（1-2章节重点笔记）

    1.黑盒测试 黑盒测试,指的是把被测的软件看做一个黑盒子,不去关心盒子里面的结构是什么样子的,只关心软件的输入数据和输出结果. 2.白盒测试白盒测试,指的是把盒子打开,去研究里面的源代码和程序执行结果 ...

  9. 60第K个排列

    题目:给出集合 [1,2,3,…,n],其所有元素共有 n! 种排列.按大小顺序列出所有排列情况,并一一标记,当 n = 3 时, 所有排列如下:    "123"    &quo ...

  10. Visual Studio 2017 远程调试

    当你将.NET程序发布到不同机子时候,想要进行调试,但机子不足以安装VS或安装VS麻烦,可以考虑使用远程调试,这里以C#项目为例,asp.net方法略有不同 原理: 首先安装VS远程调试工具,有俩种安 ...