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. 解决win10环境下python Selenuim调用Chrome时提示data 及Chrome正在受自动软件控制的方法

    用python自动访问谷歌浏览器时会出现data界面,很是烦人.在网上搜索,有说是因为webdriver和google版本不匹配导致的,就下过各种版本,结果都一样. 后来明白了,出现data的原因只是 ...

  2. python基础-守护进程、守护线程、守护非守护并行

    守护进程 1.守护子进程 主进程创建守护进程  其一:守护进程会在主进程代码执行结束后就终止  其二:守护进程内无法再开启子进程,否则抛出异常:AssertionError: daemonic pro ...

  3. Linux下FTP虚拟账号环境部署简述

    vsftp的用户有三种类型:匿名用户.系统用户.虚拟用户.1)匿名登录:在登录FTP时使用默认的用户名,一般是ftp或anonymous.2)本地用户登录:使用系统用户登录,在/etc/passwd中 ...

  4. opencv: 基本知识(二）；

    1.cvArr* 与 cv::Mat之间的转换; cv::Mat ---- > cvArr* cv::Mat img; IplImage temp = IplImage(img); cvArr ...

  5. jmeter中判断数据库是否存在相应的记录

    jmeter判断数据库中是否存在相应记录可以使用count 配合case,然后再加个断言,后面用 变量JMeterThread.last_sample_ok来判断是否存在相应记录 select cas ...

  6. kernel(一)编译体验

    目录 打补丁 配置 总结 配置方式 配置体验 配置详解 Makefile解析 子目录的Makefile 架构下面的Makefile 顶层Makefile Make解析 编译 链接 链接脚本 烧写内核 ...

  7. printf不定参数

    title: printf不定参数 tags: C ARM date: 2018-10-21 12:14:58 --- 不定参数的传递 函数调用时参数传递是使用堆栈来实现的,参数入栈顺序是从右向左,在 ...

  8. SpringBoot笔记十五：任务

    目录 异步任务 定时任务 异步任务 注解:@Async,@EnableAsync 我新建一个Service,就叫AsyncService package com.example.service; im ...

  9. C++回顾day02---<对象构造和析构，外加友元函数>

    一:若没有显示写构造函数,默认会有一个默认构造函数(无参),若自己构造后,不会存在这个默认构造函数 二:类成员若是有const修饰,必须在对象初始化的时候,为该类成员赋值(或者一开始就定死,同C中) ...

  10. ruby批量插入数据，bulk_insert-----Gem包使用

    文档 https://github.com/jamis/bulk_insert class Book < ActiveRecord::Base end book_attrs = ... # so ...