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. Java 时间、日期类

    1. System类 currentTimeMillis():返回当前时间的long型值.此long值是从1970年1月1日0点0分00秒开始到当前的毫秒数. 此方法常用来计算时间差. 2. Date ...

  2. Object Oriented Programming python

    Object Oriented Programming python new concepts of the object oriented programming : class encapsula ...

  3. 【SQL查询日志】查看数据库历史查询记录

    --关键字:cross apply & outer apply --最后更新:2011-10-20 作者:Ronli--更新链接:http://www.cnblogs.com/ronli/ar ...

  4. Tab的键的妙用

    vs2013输入“(”的时候自动加入了“)”,开始的时候感觉相当不方便,要按“End”才能继续输入“:”,后来发现按“Tab"也会自动跳出括号,于是满心喜欢.

  5. C++11的new concepts (move semantic)

    MoveConstructible 和MoveAssignable MoveConstructible Specifies that an instance of the type can be mo ...

  6. 百度云加速时使用Cloudflare的技术

    百度云加速时使用Cloudflare的技术 引用“百度的关于我们”这是在打脸吗?就是把英文翻译过来换个验证码 百度是全球最大的中文搜索引擎.最大的中文网站.2000年1月创立于北京中关村.如今,百度已 ...

  7. php大力力 [007节]php静态表量

    2015-08-23 php大力力007. php静态表量 这里看一下高老师的视频讲解: 转帖: php中static静态类与static 静态变量用法区别 php中的静态变量的基本用法 转载 时间: ...

  8. 对前端mvc的认识和思考

    现在,我们经常都可以看到复杂的JavaScript应用程序,由于这些应用程序变得越来越复杂,一长串的jQuery回调语句或者通过应用程序在 各个状态执行不同的函数调用,这些做法都会变得无法再让人接受, ...

  9. 10、SQL基础整理（约束2）

    约束 除主键约束.外键约束外 唯一约束(主键列.索引列的候选索引)   设计---右键---索引/键---需要修改的列----是唯一的----忽略重复键 代码方式: cid  varchar (20) ...

  10. spring 常见错误

    1. 数据库字段和实体字段不匹配,尤其是数据表字段和实体字段的类型不匹配 2. 数据表中日期字段不能为空(sql语句用了聚合函数min或者max),此时数据表中没有数据就会报此类错误.