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. 改变Chrome浏览器主程序_缓存_个人信息路径

      改变Chrome浏览器缓存_个人信息路径(亲测) actionx2上传于2012-10-26|(7人评价)|3077人阅读|41次下载|文档简介|举报文档    在手机打开   改变 Chrom ...

  2. bzoj 2154 莫比乌斯反演求lcm的和

    题目大意: 表格中每一个位置(i,j)填的值是lcm(i,j) , 求n*m的表格值有多大 论文贾志鹏线性筛中过程讲的很好 最后的逆元我利用的是欧拉定理求解的 我这个最后线性扫了一遍,勉强过了,效率不 ...

  3. const的全面理解

    const关键字用来作甚?const是一个类型修饰符.常见的类型修饰符有哪些? short long unsigned signed static autoextern register 定义一个变量 ...

  4. ScrollView中嵌入ListView，GridView冲突的解决（让ListView全显示出来）

    ScrollView中嵌入原生ListView或GridView,会出现ListView,GridView显示不全的问题. 解决方法:重新构造一个ListView或GridView,重写OnMeasu ...

  5. VC单文档对话框添加托盘图标

    一 单文档添加托盘 1. 在CMainFrame中定义NOTIFYICONDATA结构m_notify 2.在OnCreate中添加托盘初始化代码 int CMainFrame::OnCreate(L ...

  6. Microsoft Visual Studio Ultimate 2013 with Update 3 CN+EN

    官方90天试用版. Microsoft Visual Studio Ultimate 2013 with Update 3 - 简体中文DVD5 ISO image (SHA-1: 9A306631A ...

  7. Map的遍历

    @Test public void test() { Map<String,String> usersmap = new HashMap<>(); usersmap.put(& ...

  8. Javascript 基础--数组

    一.一维数组 1.一维数组 var weights = [3,5,1,3.4,2,50]; var all_weight=0; var avg_weight=0; for(var i=0;i<w ...

  9. JS获取客户端Mac和IP

    JS获取硬件信息是通过ActiveX进行获取的,因此只能IE浏览器支持,火狐不支持 而且必须降低浏览器安全级别,因此不到万不得以一般不会采用这种方式 <html> <head> ...

  10. oracle中的cluster表

    大家对通常oracle中的cluster的理解是不准确的,经常和sql server中的cluster index混淆.Cluster是存储一组table的一种方法,这些table共享同一数据块中的某 ...