初识jQuery

作者: 琴匣自鸣 | 来源:发表于2018-05-22 15:21 被阅读15次

    简介:jQuery是对JavaScript对象和函数的封装,如同后台方法一样,有各种方法会使用就行,提高工作效率不要写大量的JS原生代码,想详细了解jQuery各个执行过程去学JS去。

    jQuery的引入:<script src="路径" type="text/javascript"></script>

    一、基本语法  
    1.$(document).ready(function(){}) 当页面加载完成后执行的方法
       $(document).ready()与window.onload类似,但仍有区别

    1.语法结构:$(selector).action(); 
        $():工厂函数,将DOM化为jQuery对象
        selector:选择器:例如 “#id” 等对节点元素进行选择
        action:方法,jQuery中提供的各种方法,例如 $("#id").onclick();
    注意:在jQuery中 $==jQuery 即 $(document).ready()== jQuery(document).ready() 
    注意:jQuery与js不要混用,例如:
    var a=document.getElementByID("ss"); a.addClass();
     注意只有在jQuery中才有第二种写法,但是a并不是jQuery所封装好的对象类型,因此不能用。换个思路用jQuery的方式来获取对象就可以:
    var a=$("#ss"); a.addClass();  这样就没问题。

    二、 操作页面元素
    1.jQuery.对象.addClass(class名称);
        例: $("#id").addClass("aa"); 常用于修改样式
    2.jQuery.对象.css("属性","属性值");设置单个CSS
        ~~.css({"属性1","属性值1","属性2","属性值2"});设置多个CSS
    3.~~.show();显示元素 
       ~~.hide();隐藏元素
    4.链式操作:对一个对象进行多重操作,并将操作结果返回给该对象
    例如:1.$("h2").css("backgroundcolor","#ccffff").next().css("display","block");
    意思是:给h2元素添加背景色css之后再使其显示。
            2.$("#Test").addClass('style').find("div").eq(0).fadeOut(200);
    意为:先为id为Test的对象添加"style"这个样式,再找寻其下的第一个div标签,并使其淡出
            3.$(".ss").css("width","100px").click(function(){}).alt("");
    意为:将class为ss的元素的宽度设为100px,点击时间为。。,alt为~~。   

    注意:在jQuery中点击时间为click,并且不可以直接写 ~~.click(bb());可以换个思路 $(".ss").click(function(){bb()});
              

    相关文章

      网友评论

        本文标题:初识jQuery

        本文链接:https://www.haomeiwen.com/subject/oxkhjftx.html