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. 使用postman测试dubbo服务层的方法

    下面的项目用的是servlet3.0架构 接口(doubbo消费者项目和服务者项目共享的jar项目中): package serviceinvoke; import com.alibaba.dubbo ...

  2. 第七节，TensorFlow编程基础案例-TensorBoard以及常用函数、共享变量、图操作(下)

    这一节主要来介绍TesorFlow的可视化工具TensorBoard,以及TensorFlow基础类型定义.函数操作,后面又介绍到了共享变量和图操作. 一 TesnorBoard可视化操作 Tenso ...

  3. POJ 1979 Heavy Transportation （kruskal）

    Heavy Transportation Time Limit: 3000MS   Memory Limit: 30000K Total Submissions:46898   Accepted: 1 ...

  4. thinkphp 实现分页

    一.一个条件的查询数据 查询数据自然是先要显示出数据,然后根据条件进行查询数据 (1)显示出表的数据 这个方法我还是写在了HomeController.class控制器文件中 (1.1)写了一个方法s ...

  5. jquery 实现按回车键登录功能的写法

    <script> //登录的逻辑函数 自己写 function submitFuc(){ var loginName= $("#loginName").val(); v ...

  6. Try It Once Again

    愿你就是自己最暖的太阳.无需凭借谁的光~~~~~~~~~~~~ ============================== ============================== ====== ...

  7. docker 基本功能

    Docker开启Remote API docker默认是没有开启Remote API的,需要我们手动开启. 1.编辑/lib/systemd/system/docker.service文件: 注释掉图 ...

  8. java代码的编译执行过程

  9. u-boot(四)命令实现

    目录 u-boot(四)命令实现 分析run_command 小结 自定义一个命令 代码 makefile title: u-boot(四)命令实现 tags: linux date: 2018-09 ...

  10. docker 基础之私有仓库

    docker-registry 是官方提供的工具,可以用于构建私有的镜像仓库.安装运行 docker-registry容器 在安装了 Docker 后,可以通过获取官方 registry 镜像来运行. ...