1.如何使用jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

使用jQuery前必须下载并引用jQuery的js文件，下载链接为http://jquery.com/

下载完成后引入jQuery文件

<script src="js/jQuery.js"></script>

为防止jquery程序中中文乱码，应在引入

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <!--防止乱码-->

</head>

2.jQuery弹出框

<script>

$(document).ready(function(){
  alert("显示提示框，我的第一个jQuery程序");
 });
</script>

3.jQuery对div进行操作

<script>
$(document).ready(function(){    //document表示加载body时触发的事件
 $("p").click(function(){     //表示标签<p>的click事件
  $(this).hide();          //隐藏这个标签加入参数可缓慢隐藏，如$(this).hide(1000); 一秒内缓慢隐藏
  $(this).html("sda5");    //更改div内容
  $(this).css("background-color","blue")    //更改div的css   背景颜色
  $(this).css("color","beige")    //更改div的css   字体颜色
 });
 });
</script>
</head>
<body>
 <p>sda1</p>
 <p>sda2</p>
 <p>sda3</p>
 <p>sda4</p>
</body>

4.jQuery对class，id，type的操作

<head>

<script>
$(document).ready(function()
{
  $(":button").click(function()  //指定到type="button"，定义click事件
  {
      $(".test").hide();        //指定到class="test"，定义隐藏
  });
  $(":button").click(function()  //指定到type="button"，定义click事件
  {
      $("#test").hide();        //指定到class="test"，定义隐藏
  });
});
</script>
</head>
<body>
 <p class="test">这个标签引用了类 test,触发事件会消失</p>
 <a class="test">这个标签也引用了类 test,触发事件会消失</a>
 <a id="test">这个标签也引用了id:test,触发事件会消失</a>
 <p id="test">这个标签不引用</p>
 <input type="button" value="clickme"/>  <!--点击触发事件-->
</body>

5.jquery选择器

1)元素选择器
$("p") 选取所有 <p> 标签。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("ul li:first")  每个 <ul> 的第一个 <li> 元素 
 
2)属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3)CSS 选择器
$("div#intro .head")  id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("p").css("background-color","red");  选取所有<p>标签，并改变其css的background-color属性

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】的更多相关文章

  1. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  2. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  3. jQuery+css3弹出框插件

    先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...

  4. jquery.reveal弹出框

     一款js弹出框,嵌入其它页面: 引用: <script src="../../js/jquery.reveal.js" type="text/javascript ...

  5. datePiker弹出框被其他div遮挡

    最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...

  6. jquery UI 弹出框

    2015-07-17 11:04:38 <div id="reg"></div> <script type="text/javascript ...

  7. jQuery zxxbox弹出框插件(v3.0)

    插件地址: http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html

  8. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  9. Bootstrap popover弹出框

    popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...

  10. 前端基础(九)：SweetAlert(弹出框)

    简介 SweetAlert是一款很好用的弹出框框架 下载 点我下载 导入 博主用的是bootstrap-sweetalert,所以要依赖bootstrap,导入前先导入原生jQuery以及bootst ...

随机推荐

  1. 遍历List过程中同时修改

    public static void Main() { List<int> list = new List<int>(); ,,,,,,,,,}; list.AddRange( ...

  2. gitlab 500 服务器错误 重启解决了

    查看状态 sudo gitlab-ctl status # 启动Gitlab所有组件 sudo gitlab-ctl start # 停止Gitlab所有组件 sudo gitlab-ctl stop ...

  3. python赋值和生成器

    在python赋值过程中,对单个变量的赋值,在所有语言中都是通用的,如果是对两个变量同时进行赋值,这个时候,就会出现一点点小的差异.例如在下面的一两行代码中. a , b = b , a+b 这是同时 ...

  4. 解析：为什么程序员应该有一台Mac个人电脑？

    对于开发来讲,使用Mac电脑的好处,下面简单列举几个: 首先,macOS很安全和稳定,Mac 系统的底层是最原始的unix操作系统,很多大型的银行和军工企业都是这个操作系统,安全性很高,基本不需要安装 ...

  5. 获取日k数据

    http://web.ifzq.gtimg.cn/appstock/app/fqkline/get?_var=kline_dayqfq&param=sz002921,day,,,320,qfq ...

  6. 基于python调用libvirt API

    基于python调用libvirt API 1.程序代码 #!/usr/bin/python import libvirt import sys def createConnection(): con ...

  7. Elastic Stack之kibana使用

    Elastic Stack之kibana使用 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客数据流走向:FileBeat ===>Redis  ===>log ...

  8. ranger部署文档（记）

    目录 概览... 2 1.      ranger-admin. 2 2.      ranger-user-sync. 2 3.      ranger-*-plugins. 2 安装... 3 1 ...

  9. Hadoop记录-fair公平调度队列管理

    <?xml version="1.0"?> <allocations> <queue name="root"> <qu ...

  10. 验证调用HttpServletResponse.getWriter().close()方法是否真的会关闭http连接

    起因 线上项目突然遭到大量的非法参数攻击,由于历史问题,之前的代码从未对请求参数进行校验. 导致大量请求落到了数据访问层,给应用服务器和数据库都带来了很大压力. 针对这个问题,只能对请求真正到Cont ...