1.jquery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

2.jquery选择器（标签选择器，id选择器，class选择器）

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

</head>

<body>

<p>1111111</p>

<div id="aa" style="border:1px solid red; width:20px; height:20px;"></div>

<div class="aa" style="border:1px solid red; width:20px; height:20px;"></div>

</body>

</html>

<script>

$(document).ready(function(){

    $("#aa").click(function(){      //id选择器

    $("p").hide()               //点击id是aa的元素，隐藏p标签        

    })

    });

$(document).ready(function(){

    $(".aa").click(function(){     //class选择器

    $("p").hide()

    })

    });

</script>

补充：

$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素

3.常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数

<body>

<p>1111111</p>

</body>

</html>

<script>

$(document).ready(function(){

    $("p").dblclick(function(){      //双击p标签，内容会消失

    $(this).hide()                   //this代表点击的此内容

    })

    });

</script>

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数

<p>1111111</p>

</body>

</html>

<script>

$(document).ready(function(){

    $("p").mouseenter(function(){      //双击p标签，内容会消失

    $(this).hide()                   //this代表点击的此内容

    })

    });

</script>

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数

<p>1111111</p>

</body>

</html>

<script>

$(document).ready(function(){

    $("p").mouseleave(function(){      //双击p标签，内容会消失

    $(this).hide()                   //this代表点击的此内容

    })

    });

</script>

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)

<p>1111111</p>

</body>

</html>

<script>

$(document).ready(function(){

    $("p").hover(

    function(){alert("come")},

    function(){alert("go")})                  //this代表点击的此内容

    });

</script>

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

<body>

姓名：<input type="text" ><br>

邮箱：<input type="text">

</body>

</html>

<script>

$(document).ready(function() {

    $("input").focus(function(){               //获取焦点时，要运行的函数

    $(this).css("background-color","red")

    });

    $("input").blur(function(){                 //失去焦点时，要运行的函数

        $(this).css("background-color","white")

        });

});

</script>

常见 DOM 事件：

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

Jquery基础知识；的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. JQuery基础知识（1）

    JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...

  3. JQuery基础知识（2）

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  4. 0417 jQuery基础知识

    jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...

  5. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  6. 【JQuery基础知识/statusCode(状态码)】---初学者必备

    今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...

  7. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  8. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  9. jQuery基础知识准备

    一． 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...

随机推荐

  1. COJ 1287 求匹配串在模式串中出现的次数

    这里要在后缀自动机的节点中维护一个从到达当前位置出现的字符串总个数 这里新添加进来的节点的状态出现的次数必然为1 另外包含所能达到这个节点所能到达的状态一定是将它作为父亲的点 那么说明将它作为父亲的点 ...

  2. (转)iOS应用架构谈 view层的组织和调用方案

    前言 <iOS应用架构谈 开篇>出来之后,很多人来催我赶紧出第二篇.这一篇文章出得相当艰难,因为公司里的破事儿特别多,我自己又有点私事儿,以至于能用来写博客的时间不够充分. 现在好啦,第二 ...

  3. matlab代码 图像处理源码

    非常不错的找图像处理源码的地方,源码搜搜. http://www.codesoso.com/Category.aspx?CategoryId=56

  4. SharePoint 2013 开发——开发并部署Provider-hosted APP

    博客地址:http://blog.csdn.net/FoxDave 本篇我们用Visual Studio创建并部署一个SharePoint Provider-hosted应用程序. 打开Visua ...

  5. 基于反射的通过set方法的依赖注入，可以看成一种设计模式，自己来用

    非常好用,在properties文件中配置字符串和类名之间的对应,在程序里读取文件,找到类名,通过反射,达到调用set方法的目的,然后直接将自己的指向其他类的对象的引用赋值,指向实体对象. 比如use ...

  6. 根据username查找user

    返回的是一个list<User>,不过验证密码的时候,要求返回是一个user对象,如果用uniqueresult,这个是过时的方法,如果用getResultList 会得到一个列表,get ...

  7. hdu1394

    //Accepted 292 KB 46 ms //利用线段树求逆序数 //对于每个数看前面比他大的数有多少个,更新这个数的个数 #include <cstdio> #include &l ...

  8. Codeforces Round #247 (Div. 2)

    A.水题. 遍历字符串对所给的对应数字求和即可. B.简单题. 对5个编号全排列,然后计算每种情况的高兴度,取最大值. C.dp. 设dp[n][is]表示对于k-trees边和等于n时,如果is== ...

  9. ZOJ 1654 - Place the Robots （二分图最大匹配）

    题意:在一个m*n的地图上,有空地,草和墙,其中空地和草能穿透攻击光线,而墙不能.每个机器人能够上下左右攻击,问在地图上最多能放多少个不互相攻击的机器人. 这个题和HDU 1045 -  Fire N ...

  10. Airbase-ng帮助

    Airbase-ng 1.2 rc2 - (C) 2008-2014 Thomas d'Otreppe  Original work: Martin Beck  http://www.aircrack ...