jQuery新手入门

一、jQuery的用法

---

 jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script>

JQuery入口函数

有两种写法:

  // 完整写法
  $(document).ready(function(){
       ...
  });
 
  // 简化写法
  $(function(){
       ...
  });

//$+()开头，中间写function和方法体

jQuery选择器
jQuery选择器的介绍
jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

jQuery选择器的种类
标签选择器
类选择器
id选择器
层级选择器
属性选择器
示例代码:

$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签//id前加#,class前加.
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签
说明:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

$(function(){
    result = $("div").length;
    alert(result);
});

小结

• jQuery选择器就是选择标签的
• 标签选择器是根据标签名来选择标签//比如li,ul,span等
• 类选择器是根据类名来选择标签//前面加上.   class="name"就是$('.name')
• id选择器是根据id来选择标签//前面加上#   id="age"就是$('#age')
• 层级选择器是根据层级关系来选择标签//从最高层依次往下，如$('ul li span')
• 属性选择器是根据属性名来选择标签//标签名后加上属性

选择集过滤

选择集过滤的介绍
选择集过滤就是在选择标签的集合里面过滤自己需要的标签//has和eq

选择集过滤的操作
has(选择器名称)方法，表示选取包含指定选择器的标签//例子中，选择含有id为mytext的div标签
eq(索引)方法，表示选取指定索引的标签//例子中，选取第二个div标签（从0开始，所以第二个是eq(1)）
has方法的示例代码:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});
    });
</script>
 
<div>
    这是第一个div
    <input type="text" id="mytext">
</div>
 
<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>
eq方法的示例代码:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});
 
        //  eq方法的使用
        var $div = $("div").eq(1);
        //  设置样式
        $div.css({"background":"yellow"});
    });
</script>
 
<div>
    这是第一个div
    <input type="text" id="mytext">
</div>
 
<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>

小结
选择集过滤可以使用has方法和eq方法来完成
jquery给标签设置样式使用css方法

选择集转移

选择集转移介绍
选择集转移就是以选择的标签为参照，然后获取转移后的标签

选择集转移操作
$('#box').prev(); 表示选择id是box元素的上一个的同级元素
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
$('#box').next(); 表示选择id是box元素的下一个的同级元素
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
$('#box').parent(); 表示选择id是box元素的父元素
$('#box').children(); 表示选择id是box元素的所有子元素
$('#box').siblings(); 表示选择id是box元素的其它同级元素
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
选择集转移的示例代码:

<script>
    $(function(){