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. Linux批量修改（删除）文件名某些字符(rename命令)

    假设在路径C:/下存在多个类似以下的文件名 file_nall_abc1.txt file_nall_abc2.txt file_nall_abc3.txt file_nall_abc4.txt fi ...

  2. Gym 101915

    Gym - 101915A  Printing Books 题意:有一本书,从第X页开始,一共用了n位数字,求此书一共多少页.99就是两位数字,100就是三位数字. 思路:直接模拟即可,我用了一个hi ...

  3. Python 的文件处理

    Python提供了os.shutil.glob 等开发包处理文件 一.OS包 os包中包含了目录创建.目录删除.文件创建.执行系统命令等方法. import os remove()   删除文件 mk ...

  4. 委托delegate

    委托delegate没有函数体.委托可以指向函数(要与指向的函数格式.类型相一致) namespace demo { public delegate double MyDelegate(double ...

  5. 打印流(PrintWriter ）

    PrintWriter package cn.lijun.demo1; import java.io.File; import java.io.FileNotFoundException; impor ...

  6. KVM安装启动虚拟机

    KVM定制OpenStack云主机 如何定制化OpenStack云主机?从去年10月份刚开始接触OpenStack,到现在也有一年了.虽说目前只是停留在用它,对它的一些组件简单的了解,但谈到制作出一个 ...

  7. ESXI6时间源快速同步

    1.使用SSH会话连接到ESXi主机. 2./etc/ntp.conf 在文本编辑器中打开 添加内天tos maxdist 303.运行此命令以访问 likewise shell /usr/lib/v ...

  8. Hadoop问题：Input path does not exist: hdfs://Master:9000/user/hadoop/input

    问题描述: org.apache.hadoop.mapreduce.lib.input.InvalidInputException: Input path does not exist: hdfs:/ ...

  9. jquery validate 详解一

    原文:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html jQuery校验官网地址:http://bassistance.de/jquery-pl ...

  10. 阅读：ECMAScript 6 入门(1)

    参考 ECMAScript 6 入门 ES6新特性概览 ES6 全套教程 ECMAScript6 (原著:阮一峰) JavaScript 教程 重新介绍 JavaScript(JS 教程) 前言 学了 ...