js 基础 jQuery

来源：互联网发布：php面向对象思想编辑：程序博客网时间：2024/05/22 07:02

1、引用

<head><script src="jquery.js"></script></head>

2、名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

3、基本语法

$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$(".test").hide() - 隐藏所有 class="test" 的所有元素$("#test").hide() - 隐藏所有 id="test" 的元素

4、选择器

jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$("p") 选取 <p> 元素。$("p.intro") 选取所有 class="intro" 的 <p> 元素。$("p#demo") 选取所有 id="demo" 的 <p> 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：$("p").css("background-color","red");

$("*")选取所有元素在线实例$(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> 元素

5、事件触发

<script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("p").hide();  });});</script>

方法描述bind()向元素添加事件处理程序blur()添加/触发失去焦点事件change()添加/触发 change 事件click()添加/触发 click 事件dblclick()添加/触发 double click 事件delegate()向匹配元素的当前或未来的子元素添加处理程序die()在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序error()在版本 1.8 中被废弃。添加/触发 error 事件event.currentTarget在事件冒泡阶段内的当前 DOM 元素event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据event.delegateTarget返回当前调用的 jQuery 事件处理程序所添加的元素event.isDefaultPrevented()返回指定的 event 对象上是否调用了 event.preventDefault()event.isImmediatePropagationStopped()返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()event.isPropagationStopped()返回指定的 event 对象上是否调用了 event.stopPropagation()event.namespace返回当事件被触发时指定的命名空间event.pageX返回相对于文档左边缘的鼠标位置event.pageY返回相对于文档上边缘的鼠标位置event.preventDefault()阻止事件的默认行为event.relatedTarget返回当鼠标移动时哪个元素进入或退出event.result包含由被指定事件触发的事件处理程序返回的最后一个值event.stopImmediatePropagation()阻止其他事件处理程序被调用event.stopPropagation()阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知event.target返回哪个 DOM 元素触发事件event.timeStamp返回从 1970 年 1 月 1 日到事件被触发时的毫秒数event.type返回哪种事件类型被触发event.which返回指定事件上哪个键盘键或鼠标按钮被按下event.metaKey事件触发时 META 键是否被按下focus()添加/触发 focus 事件focusin()添加事件处理程序到 focusin 事件focusout()添加事件处理程序到 focusout 事件hover()添加两个事件处理程序到 hover 事件keydown()添加/触发 keydown 事件keypress()添加/触发 keypress 事件keyup()添加/触发 keyup 事件live()在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素load()在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件mousedown()添加/触发 mousedown 事件mouseenter()添加/触发 mouseenter 事件mouseleave()添加/触发 mouseleave 事件mousemove()添加/触发 mousemove 事件mouseout()添加/触发 mouseout 事件mouseover()添加/触发 mouseover 事件mouseup()添加/触发 mouseup 事件off()移除通过 on() 方法添加的事件处理程序on()向元素添加事件处理程序one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次$.proxy()接受一个已有的函数，并返回一个带特定上下文的新的函数ready()规定当 DOM 完全加载时要执行的函数resize()添加/触发 resize 事件scroll()添加/触发 scroll 事件select()添加/触发 select 事件submit()添加/触发 submit 事件toggle()在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数trigger()触发绑定到被选元素的所有事件triggerHandler()触发绑定到被选元素的指定事件上的所有函数unbind()从被选元素上移除添加的事件处理程序undelegate()从现在或未来的被选元素上移除事件处理程序unload()在版本 1.8 中被废弃。添加事件处理程序到 unload 事件contextmenu()添加事件处理程序到 contextmenu 事件$.holdReady()用于暂停或恢复.ready() 事件的执行

鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunload

6、ajax方法

方法描述$.ajax()执行异步 AJAX 请求$.ajaxPrefilter()在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项$.ajaxSetup()为将来的 AJAX 请求设置默认值$.ajaxTransport()创建处理 Ajax 数据实际传送的对象$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据$.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码的数据$.getScript()使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript$.param()创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据ajaxComplete()规定 AJAX 请求完成时运行的函数ajaxError()规定 AJAX 请求失败时运行的函数ajaxSend()规定 AJAX 请求发送之前运行的函数ajaxStart()规定第一个 AJAX 请求开始时运行的函数ajaxStop()规定所有的 AJAX 请求完成时运行的函数ajaxSuccess()规定 AJAX 请求成功完成时运行的函数load()从服务器加载数据，并把返回的数据放置到指定的元素中serialize()编码表单元素集为字符串以便提交serializeArray()编码表单元素集为 names 和 values 的数组

7、超链接切换图片不跳转

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Bootstrap</title>    <link rel="stylesheet" href="css/bootstrap.min.css">    <script src="js/jquery-3.1.1.js"></script>    <script src="js/bootstrap.min.js"></script>    <script src="js/eventtrigger.js"></script></head><body><script>    $(document).ready(function () {        var test = new EventTrigger();        test.homePage();    })</script><h1>This is first title</h1><ul>    <li>        <a href="imgs/page1.jpg" onclick="return false;" title="Page1">Page1 display</a>    </li>    <li>        <a href="imgs/page2.jpg" onclick="return false;" title="Page2">Page2 display</a>    </li>    <li>        <a href="imgs/page3.jpg" onclick="return false;" title="Page3">Page3 display</a>    </li></ul><img id="default" src="imgs/default.jpg" alt="gallery" style="width: 200px; height: 150px"></body></html>

/** * Created by Hou on 2016/11/11. */function EventTrigger() {}EventTrigger.prototype.homePage = function () {    $('ul > li').click(function () {        $('#default').attr("src",$(this).find("a").attr("href"));    })}

8、常用效果

隐藏和显示jQuery hide()jQuery hide()

淡入淡出jQuery fadeIn()jQuery fadeOut()jQuery fadeToggle()jQuery fadeTo()

滑动jQuery slideDown()jQuery slideUp()jQuery slideToggle()

动画jQuery animate() 方法允许您创建自定义的动画。

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

使用 callback 实例$("button").click(function(){  $("p").hide("slow",function(){    alert("段落现在被隐藏了");  });});

jQuery - 链(Chaining)$("#p1").css("color","red").slideUp(2000).slideDown(2000);

获取内容和属性/设置内容和属性text()、html() 以及 val()、attr()$("#btn1").click(function(){  alert("Text: " + $("#test").text());});$("#btn2").click(function(){  alert("HTML: " + $("#test").html());});$("button").click(function(){  alert($("#runoob").attr("href"));});text()、html() 以及 val()、attr()$("#btn1").click(function(){    $("#test1").text("Hello world!");});$("button").click(function(){  $("#runoob").attr("href","http://www.runoob.com/jquery");});

添加元素append() - 在被选元素的结尾插入内容（元素中）prepend() - 在被选元素的开头插入内容（元素中）after() - 在被选元素之后插入内容（元素外）before() - 在被选元素之前插入内容（元素外）

删除元素remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素

获取并设置 CSS 类addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性

返回 CSS 属性$("p").css("background-color");设置 CSS 属性$("p").css("background-color","yellow");设置多个 CSS 属性$("p").css({"background-color":"yellow","font-size":"200%"});

尺寸width()height()innerWidth()innerHeight()outerWidth()outerHeight()

jQuery 尺寸

jQuery Dimensions

遍历 - 祖先parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

遍历 - 后代children() 方法返回被选元素的所有直接子元素find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

遍历 - 同胞(siblings)siblings() 方法返回被选元素的所有同胞元素。next() 方法返回被选元素的下一个同胞元素。nextAll() 方法返回被选元素的所有跟随的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

遍历- 过滤first() 方法返回被选元素的首个元素。last() 方法返回被选元素的最后一个元素。eq() 方法返回被选元素中带有指定索引号的元素。filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。not() 方法返回不匹配标准的所有元素。

0 0