正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

  • 微信公众号
  • 关于jQuery的一些基础东西

    jingyile·2018-08-03·107 次阅读

    最流行的JavaScript框架jQuery

    jQuery 库可以通过一行简单的标记被添加到网页中

    jQuery是一个轻量级的"写的少,做的多"的JavaScript库

    jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

    jQuery下载链接

    BootCDN:<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> </script>

    百度 CDN:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

     

    基础语法: $(selector).action()

    • 美元符号定义 jQuery
    • 选择符(selector)"查询"和"查找" HTML 元素
    • jQuery 的 action() 执行对元素的操作

    实例:

    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏所有段落

    $("p .test").hide() - 隐藏所有 class="test" 的段落

    $("#test").hide() - 隐藏所有 id="test" 的元素

    $(document).ready(function(){

    // 开始写 jQuery 代码...

    });

    这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

    function里面的代码会在浏览器加载页面后立即运行。

    这很关键,因为在没有document ready function以前,代码可能会在HTML渲染完成之前就执行了,这样会产生bug。

     

    三种获取元素的方式:

    type选择器   $("button")

    class选择器  $(".btn")

    id选择器     $("#target1")

     

    只需要用jQuery的.addClass()方法,就可以给元素加class了。

    通过jQuery的removeClass()方法删除元素的class。

    直接通过jQuery来改变HTML元素的CSS样式。

    jQuery有一个叫做.css()的方法,能让你改变元素的CSS样式。

    以下代码显示如何将颜色改变成蓝色:

    $("#target1").css("color", "blue");

    这跟一般的CSS语法有点不同,因为这里的CSS属性和值是在引号内的,并且用逗号分开,而不是冒号。

    jQuery有一个.prop()的方法,可以让你来调整元素的属性。

    以下代码显示如何禁用所有按钮:

    $("button").prop("disabled", true);

    jQuery不仅可以改变HTML元素开始和结束标签之间的文本,还可以改变HTML元素标记本身。

    jQuery有一个.html()方法,可以让你在元素中添加HTML标签和文字,而元素中之前的内容都会被方法中的内容所替换掉。

    Query 还有一个类似的方法叫.text(),它只能改变文本但不能添加标签。换句话说,这个方法只会把任何传进来的HTML标签当成你想替换现有内容的文本。

    以下代码显示如何重写和强调标题文本(使用em标签):

    $("h3").html("<em>jQuery Playground</em>");

    jQuery 有一个.remove()的方法,可以彻底删除一个HTML元素。

    jQuery有一个appendTo()方法,可以让你把选中的HTML元素附加到其他元素中。

    比如,我们想让target4从right-well移动到left-well,我们用以下代码:

    $("#target4").appendTo("#left-well");

    jQuery有一个clone()方法,可以复制元素

    例如,如果我们想把target2从left-well复制到right-well,我们用以下代码:

    $("#target2").clone().appendTo("#right-well");

    注意到上面是将两个jQuery方法合在一起使用了。

    这种叫方法链function chaining,它是jQuery的一种便捷方式。

    每个HTML元素都有一个parent元素,并从中继承属性。

    jQuery有一个parent()方法,可以允许你访问选定元素的父元素。

    许多HTML元素都有children(子元素),子元素从父元素那里继承属性。

    jQuery有一个children()方法,可以让你访问选定元素的子元素。

    $("#target1").parent().css("background-color", "red");

    $("#right-well").children().css("color", "orange");

    jQuery用CSS选择器来获取元素,target:nth-child(n)CSS选择器允许你通过目标类或元素类型选择目标元素的所有子元素

    以下代码显示如何给jQuery Playground中的每个井中(left well和right well)的第三个子元素添加bounce类:

    $(".target:nth-child(3)").addClass("animated bounce");

    Query的:odd选择器用于匹配所有索引值为奇数的元素,将其封装为jQuery对象并返回

    odd选取的是偶数,:even选取的是奇数。

    // 这里的selector表示具体的选择器
    jQuery( "selector:odd" )

    注意:由于索引值是从0开始计数的,因此奇数索引上的元素实际上是自然顺序上为偶数的元素。

     

    jQuery也可以获取body元素。

    以下代码显示如何让整个body有淡出效果:

    $("body").addClass("animated fadeOut");

     

     

     

     


    正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

    
    
    查看评论

    Post a new comment

    Post a new comment
    欢迎回来 , [ 修改 ]




    加载中……