jQuery笔记

通过 jQuery，我们可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

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

示例

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

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

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

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

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

选择器允许您对元素组或单个元素进行操作。

注意：jQuery语法的简单写法

jQuery(function () {
        /*功能函数*/
});
//或
$(function () {
        /*功能函数*/
});

即   在jQuery中，美元符号$和jQuery是等价的，相等的。如果alert( $ === jQuery );  返回 true

$(‘#box’).css(‘color’, ‘red’);            //执行功能函数

$().css(‘color’, ’red’);                     //理论上合法，但实际上缺少元素而报错

值得一提的是，执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就是说，jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。
$('#box').css('color', 'red').css('font-size', '50px'); //连缀

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	window.onload = function() { alert(1); }
	window.onload = function() { alert(2); }//只会弹出2, 1会被覆盖掉
	$(document).ready(function() { alert(3); });//3和4都会弹出
	$(document).ready(function() { alert(4); });
</script>

在实际应用中，我们都很少直接去使用js语法中的window.onload，因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。所以，最头疼的就是网速较慢的情况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。

对象互换

因为document.getElementById('box') 返回的是DOM对象，前面加上$就会返回jQuery对象

从上面get(0) -- 索引看出，jQuery 是可以进行批量处理DOM 的，这样可以在很多需要循环遍历的处理上更加便捷。

四．多个库之间的冲突
当一个项目中引入多个第三方库的时候，由于没有命名空间的约束（命名空间就好比同一个目录下的文件夹一样，名字相同就会产生冲突），库与库之间发生冲突在所难免。那么，既然有冲突的问题，为什么要使用多个库呢？原因是jQuery 只不过是DOM 操作为主的库，方便我们日常Web 开发。但有时，我们的项目有更多特殊的功能需要引入其他的库，比如用户界面UI 方面的库，游戏引擎方面的库等等一系列。而很多库，比如prototype、还有我们JavaScript 课程开发的Base 库，都使用“$”作为基准起始符，如果想和jQuery 共容有两种方法：
1.将jQuery 库在Base 库之前引入，那么“$”的所有权就归Base 库所有，而jQuery 可
以直接用jQuery 对象调用，或者创建一个“$$”符给jQuery 使用。

var $$ = jQuery;  //创建一个$$的jQuery 对象
$(function () { //这是Base 的$
        alert($('#box').ge(0)); //这是Base 的$
        alert($$('#box').width()); //这是jQuery 的$$
});

2.如果将jQuery 库在Base 库之后引入，那么“$”的所有权就归jQuery 库所有，而Base库将会冲突而失去作用。这里，jQuery 提供了一个方法：

jQuery.noConflict(); //将$符所有权剔除
var $$ = jQuery;
$(function () {
        alert($('#box').ge(0));
        alert($$('#box').width());
});

选择器

1.简单选择器

 

jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数

alert($('div').size());     //3 个

alert($('div').length);    //3 个

$('div').eq(1).css('color', 'red');   ---  将找到的第二个div元素的颜色设置成红色。

注意 : $('div').get(1);  ---  这个是返回div的第二个元素对象

或者直接用下标返回 -- $('div').get[1];

注意：CSS子元素选择器(>) -- 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

$('#box > p').css('color','red');    //jQuery 子选择器，只把属于box的直接孩子的p元素里面的内容设置为红色，兼容了IE6

那么对于缺失不存在的元素，我们使用jQuery 调用的话，怎么去判断是否存在呢？因为本身返回的是jQuery 对象，可能会导致不存在元素存在与否，都会返回true。

if ($('#pox').length > 0) { //判断元素包含数量即可
        $('#pox').css('color', 'red');
}

除了这种方式之外，还可以用转换为DOM 对象的方式来判断，例如：
if ($('#pox').get(0)) {} 或if ($('#pox')[0]) {} //通过数组下标也可以获取DOM 对象

2.进阶选择器

$('#box p, ul li *').css('color', 'red'); //组合了多种选择器

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议少用。
3.高级选择器

在层次选择器中，除了后代选择器之外，其他三种高级选择器是不支持IE6 的，而jQuery却是兼容IE6 的。

jQuery 为后代选择器提供了一个等价find()方法
$('#box').find('p').css('color', 'red'); //和后代选择器等价

jQuery 为子选择器提供了一个等价children()方法：
$('#box').children('p').css('color', 'red'); //和子选择器等价

jQuery 为next 选择器提供了一个等价的方法next()：
$('#box').next('p').css('color', 'red'); //和next 选择器等价

jQuery 为nextAll 选择器提供了一个等价的方法nextAll()：
$('#box').nextAll('p').css('color', 'red'); //和nextAll 选择器等价

在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点，我们不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

$('#box').next(); //相当于$('#box').next('*');

为了补充高级选择器的这三种模式，jQuery 还提供了更加丰富的方法来选择元素：
$('#box').prev('p').css('color', 'red'); //同级上一个元素
$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素

nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。
$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止
$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止

siblings()方法正好集成了prevAll()和nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
//等价于下面：
$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定
$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定

 

 

 

 

 

持续更新....