WEB前端（三）--jQuery

头像
禾白少二
    阅读 6 分钟

    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"}
    ]

    jquery
    禾白少二
    57 声望26 粉丝
    « 上一篇
    WEB前端（二）--JavaScript
    下一篇 »
    WEB前端（四）--Ajax

    引用和评论

    推荐阅读
    头像
    Lambda表达式详解

    禾白少二阅读 2k

    0 条评论
    得票最新