【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

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).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>

时间: 2025-01-03 19:32:23

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】的相关文章

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

js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g

jQuery实现弹出框拖拽

主要应用jQuery的on和off方法实现在 mousedown 的情况下进行mousemove. 其他:$(window).width() .$(window).height() ---- 获取浏览页面的宽高. pageX.pagerY(ie8不兼容)或 clientX.clientY --------- 获取鼠标当前位置的横轴纵轴. offset().left.offset().top------------------------- div距离左边界的长度和上边界的长度. 下面是简易实现方

jquery实战——弹出框拖拽效果

今天主要记录一下弹出框拖拽效果: 一.移动弹出窗口的步骤是:按下鼠标左键——移动鼠标——松开鼠标左键停止移动 二.主要思想: 按下鼠标左键:$('div').mousedown(function(e){}) 移动鼠标,获取鼠标当前坐标值:$(document).mousemove(function(e){}) 松开鼠标左键停止移动:$('div').mouseup(function(e){ $(document).unbind('mousemove');  //即当鼠标左键被释放时解除mouse

jQuery+css3弹出框插件

先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var defaults = { event: 'click', // 默认点击事件 dialogBox: 'selector', // 弹出框容器 hover: false, // 默认滑动事件关闭 } CSS部分: *{padding: 0; margin: 0; list-style: none;f

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jQuery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. jsonp快速入门: [原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 关于jquery.ajax的jsonp方法是用以及其error回调函数不能正确执行,请参考园长dudu的文章: jquery ajax中使用jsonp的限制 jQuery插件jQu

datePiker弹出框被其他div遮挡

最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular指令,在网上找了好多例子,有直接修改css的,也有在options添加zIndexOffset的,这样对于我的项目都不适用. 后来查看datepiker的源码,发现其z-index是在其父div的基础上+1.这样就不难发现,只要将其父div的z-index设置的合适就不会出现遮挡问题.下面附上对z-index

jquery UI 弹出框

2015-07-17 11:04:38 1 <div id="reg"></div> 2 <script type="text/javascript"> 3 var dg = $("#reg").dialog( 4 { 5 autoOpen:false, 6 // modal:true, 7 show:"blind", // clip,drop,explode,fold,puff,slide

jquery Bootstrap 弹出框(Popover)显示html内容,URL,div等

实现效果: 其实有个关键点: data-container="body" data-html="true" 注意下就可以了 <button type="button" class="btn btn-success" title="Popover title" data-container="body" data-html="true" data-toggle=&

四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些 常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

Bootstrap入门(二十九)JS插件6:弹出框

加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script&