关于jquery:WEB前端三jQuery

jQuery简介

jQuery: JavaScript Query JS查问
jQuery是一门轻量的、收费开源的JS函数库（就是JS的简略框架）
jQuery能够极大的简化JS代码
jQuery的核心思想：“写的更少，但做的更多”

jQuery的劣势

能够极大的简化JS代码
能够像css选择器一样获取元素
能够批改css款式来管制页面的成果
能够兼容罕用的浏览器

引入jQuery

jQuery函数库文件就是一个js文件，要想应用jQuery，须要先引入jQuery的函数库文件

<script src="./js/jquery-1.8.3.js"></script>

文档就绪事件函数

<head><meta charset="UTF-8"><!-- 在应用jQuery之前，必须先引入jQuery的函数库文件 --><script src="js/jquery-1.8.3.js"></script><script>//1.获取id为demo的h1元素    var h1 = document.getElementById( "demo" );//2.获取h1元素中的内容( innerHTML )     alert( h1.innerHTML );</script></head><body>    <h1 id="demo">jQuery的引入示例...</h1></body>

下面的代码在执行时，会报一个谬误
起因形容：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。
解决形式一：
将script标签移到body外部，也就是h1元素的前面这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，因为在获取h1元素之前，h1元素曾经被浏览器加载过了，所以前面再获取就可能获取到！

<body>    <h1 id="demo">jQuery的引入示例...</h1>    <script>        //1.获取id为demo的h1元素        var h1 = document.getElementById( "demo" );        //2.获取h1元素中的内容( innerHTML )        alert( h1.innerHTML );    </script></body>

解决形式二：
将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最初一个html元素时）立刻执行。因为以后网页中的所有元素都被加载了，h1元素必定也被加载了，此时再获取h1元素就肯定能获取到。

<head><meta charset="UTF-8"><!-- 在应用jQuery之前，必须先引入jQuery的函数库文件 --><script src="js/jquery-1.8.3.js"></script><script>    $(function(){        //1.获取id为demo的h1元素        var h1 = document.getElementById( "demo" );        //2.获取h1元素中的内容( innerHTML )        alert( h1.innerHTML );});</script></head><body>    <h1 id="demo">jQuery的引入示例...</h1></body>

解决形式三：
将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当咱们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就可能获取到h1元素。

<head><meta charset="UTF-8"><!-- 在应用jQuery之前，必须先引入jQuery的函数库文件 --><script src="js/jquery-1.8.3.js"></script><script>    function fn1(){    //1.获取id为demo的h1元素    var h1 = document.getElementById( "demo" );    //2.获取h1元素中的内容( innerHTML )    alert( h1.innerHTML );}</script></head><body>    <h1 id="demo">jQuery的引入示例...</h1></body>

总结：什么时候须要用到文档就绪事件函数:

通常是在获取元素时, 如果"获取元素的代码" 执行的工夫, 比 "元素自身加载的工夫" 还要早(也就是说,在获取元素时,元素还没有被浏览器加载), 那么元素必然是获取不到的!
能够将获取元素的代码放在文档就绪事件函数中, 因为文档就绪事件函数是在浏览器加载残缺个网页后立刻执行，因而在这个函数中获取任何元素都能够获取到。

jQuery选择器

根本选择器

(1)元素名选择器$("div") -- 选中所有的div元素$("span") -- 选中所有的span元素(2)class/类选择器$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)$("span.s1") -- 选中所有class值为s1的span元素(3)id选择器$("#one") -- 选中id为one的元素(4)多元素选择器$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

层级选择器

$("div span") -- 选中所有div外部的所有span元素$("#one span") -- 选中id为one的元素外部的所有span元素$("#two+span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two").next("span") -- 选中id为two的元素前面紧邻的span兄弟元素$("#two").prev("span") -- 选中id为two的元素后面紧邻的span兄弟元素$("#two~span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").nextAll("span") -- 选中id为two的元素前面所有的span兄弟元素$("#two").prevAll("span") -- 选中id为two的元素后面所有的span兄弟元素$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素

根本过滤选择器

(1) 选中第一个div元素$("div:first")$("div:eq(0)")$("div").eq(0)(2) 选中最初一个div元素$("div:last")$("div:eq(-1)")$("div").eq(-1)(3) 选中第n+1个div元素(n从零开始)$("div:eq(n)")$("div").eq(n)

其余选择器

$(":input") -- 匹配所有的表单项元素(能够是input、select、option、textarea等元素)$(":checkbox") -- 匹配所有的复选框等价于 $("input[type='checkbox']") -- 匹配所有的复选框$(":checked") -- 能够匹配所有被选中的单选框或复选框,以及被选中的option选项$("input:checked") -- 示意匹配所有被选中的单选框或复选框$("input[type='checkbox']:checked") -- 示意匹配所有被选中的复选框$("input[type='checkbox']:not(:checked)") -- 示意匹配所有没有被选中的复选框

jQuery API

html元素操作

(1)创立html元素

    $("<div></div>") -- 创立一个div元素,返回一个jQuery对象    $("<div>这是一个div元素</div>") -- 创立一个蕴含内容的div元素,返回一个jQuery对象    $("<input type='text'/>") -- 创立文本输入框,返回一个jQuery对象

(2)增加子元素 -- append()

    $("body").append("<table><tr><td>这是一个td元素</td></tr></table>");    -- 往body中增加一个表格元素    var $div = $("<div>这是一个div元素</div>");    $("body").append( $div ) -- 往body中增加一个div元素

(3)删除元素 -- remove()

    $("div").remove() -- 删除所有匹配的div元素

(4)替换元素 -- replaceWith()

    $("div").replaceWith("<p>我是来替换div的p元素!!</p>")

html元素属性或者css属性操作

1.prop()函数 -- 获取元素的某一个属性值,或者为元素设置属性值attr()函数 -- 能够获取元素的属性值,或者为元素设置属性值prop()和attr()的区别:    prop函数是在jquery1.6版本之后才呈现,用于获取或设置元素的属性(固有属性)值,    attr函数是在jquery1.6版本之前就有的函数,用于获取或设置元素的属性(自定义属性)值2.css()函数 -- 能够获取或设置元素的css款式

动画函数

show() -- 设置元素为显示状态, 等价于 css("display", "block|inline");hide() -- 设置元素为暗藏状态, 等价于 css("display", "none");toggle() -- 切换元素的显示状态, 如果元素自身是显示的,则会变成暗藏状态,如果元素自身是暗藏的,则会变成显示状态slideToggle() -- 切换元素的显示状态, 如果元素自身是显示的,则会变成暗藏状态,如果元素自身是暗藏的,则会变成显示状态

parent()/parents()/find()

parent() -- 获取以后元素的父元素, 相似于js中的 parentNode属性parents() -- 获取以后元素的所有的先人元素find() -- 获取以后元素外部指定的后辈元素$("div").find("span") -- 获取所有div元素外部的span元素$("div span") -- 获取所有div元素外部的span元素

扩大

为元素绑定点击事件

形式1(js版)：

<script>    function fn(){        alert("input按钮被点击了...");}</script><body>    <input onclick="fn()" type="button" value="点我~!" /></body>

形式2(js版)：

<script>window.onload = function(){    //获取id为btn的元素    var btn = document.getElementById("btn");    btn.onclick = function(){        alert("input按钮被点击了...");}}</script><body>    <input id="btn" type="button" value="点我~!" /></body>

形式3(jQuery版)

<script>$(function(){    //当点击btn按钮时,触发点击事件执行其中的函数    $("#btn").click( function(){        alert("input按钮被点击了...");});});</script><body>~~~~    <input id="btn" type="button" value="点我~!" /></body>

js对象和jQuery对象的相互转换

通过JS的形式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数
通过jQuery选择器获取元素，返回的是jQuery对象（构造像一个汇合），jQuery对象只能调用jQuery的属性或函数。
如果现有JS对象，但咱们须要调用jQuery的属性或函数，能够将JS对象转成jQuery对象；
如果现有jQuery对象，但咱们须要调用JS的属性或函数，能够将jQuery对象转成JS对象；

JSON解析：

传输数据：txt，xml（和html有点像标签name=key，标签内容=value）
json 外面有属性，有值，没有标签 [{},{}] json传输效率高
[{"p":"3999.00","op":"3999.00","cbf":"0","id":"J_100007851351","m":"4000.00"},{"p":"6499.00","op":"7299.00","cbf":"0","id":"J_100011773072","m":"7499.00"}]
data
[
{"p":"3999.00","op":"3999.00","cbf":"0","id":"J_100007851351","m":"4000.00"}, {"p":"6499.00","op":"7299.00","cbf":"0","id":"J_100011773072","m":"7499.00"}
]