jquery

jQuery基本介绍
                什么是Jquery?
                jQuery的本质就是JavaScript
                只是将JavaScript的某些方法封装成一个库,
                极大简化了原生JavaScript开发。
                (潜台词:JS怎么用,Jquery就怎么用,只是把JS的代码简化了)
                
                什么是库? lib
                “库”--->(library--文库,图书馆)-->  将一些相关函数方法进行封装以便使用。
                类似于jar包。
                
                Jquery的优势:
                1.轻量级,jquery库的大小仅仅几十kb
                
                2.强大的选择器
                (用更精简的代码即可获取指定的html元素,
                摈弃了之前通过document.getElement等方法,并支持批量操作元素)
                
                3.浏览器的兼容性,能兼容大部分市面上的浏览器
                
                4.等等...    

如何引用:
                1.下载jquery的js文件  但是Hbuiler内置了如何操作:
                    A.选中js文件夹
                    B.右键创建一个js文件
                    C.在下方选中jquery1.x  然后重命名即可
                    D.不要去动里面的代码
            
                2.在script标签中引入刚刚下载的jquery文件
                    <script src="js/jquery.js"></script>
                
                3.设置语法提示库
                    右下角  选择jquery  xxx
                
                
                4.测试
                通过alert($) ;  如何正确弹窗就说明OK了 反之失败 
                
                
                凡是在控制台看到了这一行代码:$ is not defined
                就表示Jquery没有引入成功
                
                
                Jquery的压缩版:
                    在开发中:会经常看见xxxx.min.xx格式的文件
                
                    看到了这个min就理解为压缩版即可。
                    就是去除了空格、换行、注释等,让占据空间变小而已。
                    
                    没有min关键字的就是未压缩版
                
                    了解即可。
                
                
                压缩版理解为 上线版   项目都上线了,希望项目的体积越小。
                
                未压缩版理解为 开发版  项目还没有上线,我随时需要对代码进行修改

Jquery中常见方法如下:
            val()   text()   html()     css()  attr()     prop()

val的2种用法:
            1.取值:
            /var str = $("input").val();
            alert(str);
            2.赋值
            $("input").val("~~~");

text的2种用法:
            1.取值:
             var str = $("h3").text();
            alert(str);
            2.赋值
            $("h3").text("!!!");

html使用场景:只能修改非表单元素  
            例如h1标签 span标签  但是像文本框密码框就无法使用该方法
            
            //html和text的区别是:前者会将html标签识别  后者只会解析成文本
            
           //html的2种用法:
            //1.取值:
            // var str = $("h3").html();
            // alert(str);
            //2.赋值
            // $("h3").html("!!!");
            
            
            
            注意事项:  js的style.xxx是属性 jquery的css是方法
            
            css使用场景:修改或获取HTML元素的CSS的样式  
            
            
            css的2种用法:
            1.取值:
            var str = $("p").css("color");
            alert(str);
            2.赋值
            $("p").css("color" , "yellow");
            
            
            
            
            attr使用场景:修改或获取HTML元素的属性 该属性的值 不为true或false
            //常见的属性A类(等于一个具体的值):id   class   name    type      src   href   
            
            attr的2种用法:
           1.取值:
            var str = $("input").attr("id");
            alert(str);
            2.赋值
            $("input").attr("id" , "aaa");
            
            $("button").attr("disabled","disabled");//没问题
            但是你会发现 无法通过attr将其修改为 可以使用
            
            prop使用场景:修改或获取HTML元素的属性 该属性的值 为true或false
            常见的属性B类(等于一个true或false):disable  readonly     checked
            var str = $("button").prop("disabled");
             alert(str);
            
            $("button").prop("disabled",false);

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值