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. C++-模板的声明和实现为何要放在头文件中

    源: http://blog.csdn.net/lqk1985/archive/2008/10/24/3136364.aspx 如何组织编写模板程序 发表日期: 1/21/2003 12:28:58 ...

  2. Android 查看webview里面的图片

    今天介绍一下怎么查看WebView里面的图片,首先要设置WebView能够支持JavaScript,然后实现JavaScript的监听接口: mWebView.getSettings().setJav ...

  3. Fragment 切换问题

    public void switchContent(Fragment fragment) { if(mContent != fragment) { mContent = fragment; mFrag ...

  4. Matlab与C/C++联合编程之Matlab以MEX方式调用C/C++代码（四）

    利用Matlab与VC++联合编程,既可在C语言程序中打开Matlab引擎,调用Matlab的ToolBox函数和作图函数,也可在Matlab中调用C代码生成的动态链接库文件,用以加快执行速度.缩短开 ...

  5. python——周边

    Pythonic的禅意 import this python是用c语言写的.传说python不止有C语言实现,还有java实现,还有python实现的python,甚至还有js实现的python. p ...

  6. Javascript之clipBoard操作

    1.clipBoard 是网页上剪贴板,可以获取剪切板上值,可能类似物键-值对这种模式取值\赋值,如果在copy网上的某篇博客时,往往会带有“转载自xxxx地方 http://www.xxx.com/ ...

  7. <转>用thinkPHP实现验证码的功能

    许多系统的登录都有验证码,而如果使用thinkPHP框架搭建网站的话,验证码的生成和验证就比较容易了 1.生成验证码 thinkPHP有对应生成验证码的方法 要使用验证码,需要导入扩展类库中的ORG. ...

  8. 【LeetCode OJ】Insertion Sort List

    Problem: Sort a linked list using insertion sort. The node of the linked list is defined as: /** * D ...

  9. ERP权限系统（七）

    添加链接权限的字段: //权限管理 n.Target = "MainFrame"; //折叠 TreeView1.Nodes.Add(n); n.Expanded = false;

  10. C#不安全代码和Fixed

    fixed 语句禁止垃圾回收器重定位可移动的变量. fixed 语句只在不安全的上下文中是允许的. Fixed 还可用于创建固定大小缓冲区. fixed 语句设置指向托管变量的指针,并在执行该语句期间 ...