Jq基础简介

Posted 2020-08-23 TheWinds

jQuery就是用原生js写出的框架集(Write less do more )

1.需要注意的问题？
(1).jQuery语法需要重新学习
(2).jQuery需要注意版本之间的兼容性
(3)不是越新的版本越好（要稳定）
(4)jQuery一般有两个版本(xxx.min.js和xxx.js) 区别就是去除回车空格换行 (min版一般用在上线项目节约带宽)

2.jQuery的引入方式?
<script src=”xxx.js”></script>

3.查看jQuery是否被正确引入
1.alert(jQuery);
2.alert($);
3.alert(window.$);
注：$代表jQuery

4.文档预加载

(1).
$(document).ready(function(){

});

(2).

$(function(){

});
注:正常情况下 jQuery的代码都要写在入口之内
能用jQuery语法完成的 尽量使用jQuery语法完成

5.jQuery多个样式设定 

例：$(‘#one‘).css({color:‘red‘,backgroundColor:‘#fc1‘,fontSize:40});

注:原生CSS样式中有 ‘-‘ 的去掉并且将后面的单词第一个字母大写

6.jQuery节点短对象和原生js对象不能混用语法
（原生js节点对象与jQuery节点对象的相互转换）
var one = document.getElementById(‘one‘);
将js原生对象转成jquery对象只需要使用$( )包含起来
定义jQuery对象(变量名以$开头)
var $one = $(one);
将jQuery对象转换为原生DOM节点对象
var one = $(‘#one‘)[0];
第二种实现方法
var one = $(‘#one‘).get(0);

7.书写时注意一些规范格式
（注意换行,看起来更清晰易懂）
$(‘ul li‘)
　.css(‘color‘,‘red‘)
　.css(‘background‘,‘#fc1‘)
　.css(‘marginTop‘,‘20px‘)
　.click(function( ){
　　alert($(this).html( ));
});

8.回到最后一个破坏性操作之前 end( )

$(‘ul li‘).first( ).css(‘backgroundColor‘,‘#0fa‘).end( ).last( ).css(‘backgroundColor‘,‘#0f0‘);