JS笔记--day20.初始jquery

1.如何使用jquery

在使用jquery时，首先需要引入jquery.js文件。

<!-- 先引入jq文件 -->
<script src="./js/jquery.js"></script>

 2.jquery的基本语法

语法：$(selector).action()

例：设置一个div标签，用jquery方法设置div的宽高和背景颜色

<div class="box" id="con"></div>

<script>
    //单独设置  使用tag标签设置
    $('div').css('width', '200px'); 
    //使用类名设置
	$('.box').css('height', '200px');
    //使用id设置
	$('#con').css('background', 'red');

    //链式设置
    $('div').css('width', '200px').css('height', '200px').css('background', 'red');
</script>

 3.jquery取值赋值一体化

var w = $('.box').css('width');
console.log(w);//200px

4.jquery包含隐式迭代，相当于for循环

$('li').css('background', 'plum'); // 会选择到所有的li标签，给他们设置上样式

5.$的作用 

window.jQuery = window.$ = jQuery;

jQuery('div').css('width', '200px').css('height', '300px');
console.log($); // jquery

当其他外链的$值与jquery中的$值冲突时，有两种解决方法：

1.放弃 jquery中的$值

$.noConflict(); // jquery放弃$的使用权
console.log($); // 100

此时的$值为外链中的值。

2. 使用匿名函数 

(function($){// 函数内部 形参$ = jQuery
    $('div').css('width','200px');
    $('div').css('background','greenyellow'); 
})(jQuery);