jQuery的基础知识学习

jQuery:jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单。简化了JS对DOM的操作。（写的少做的多）
jQuery的引入方式和外部js文件一致

jQuery的基本选择器：

jQuery支持所有的cs1~cs3选择器
html:

<style>
        #btn1 {
            display: none;
        }
    </style>
<button id="btn" class="btnlist">按钮</button>
<button id="btn1" class="btnlist"><span>按钮</span></button>
<ul>
    <p>0</p>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<input type="text"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="password"/>
<input type="radio"/>
<textarea></textarea>
<button>按钮</button>
<select id="">
    <option>陕西</option>
    <option selected>西安</option>
</select>
<div class=".box" id="!ck">
    .box
</div>
<div>
    <div class="notMe"></div>
    <div class=".box myClass"></div>
    <div class=".box"></div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-3.0.0.js"></script>

基本选择器：

	//#id 根据给定ID匹配一个元素
    console.log($("#btn"));
    //element 根据给定元素名称匹配所有元素
    console.log($("button"));
    //.class 根据给定的类匹配元素
    console.log($(".btnlist"));
    //!* 匹配所有元素
    console.log($("*"));
    //将每一个选择器匹配到的元素合并后一起返回
    console.log($("#btn,#btn1"));

层级选择器：

	//在给定的祖先元素下匹配所有的后代元素
    console.log($("ul li"));
    //在给定的父元素下匹配所有的子元素
    console.log($("ul>li"));
    // prev+next 匹配所有紧接在prev元素后面的next元素
    console.log($("ul+input"));
    //prev~siblings 匹配prev元素的所有同辈sibling元素

基本选择器：

	//：first 获取第一个元素
    console.log($("ul>li:first"));
    //:last 获取最后一个元素、
    console.log($("ul>li:last"));
    // :not(selector) 去除与所给定选择器匹配的元素 就是除过这个元素匹配其他元素
    console.log($("ul>li:not(ul li:last)"));
    //：even 匹配所有索引值为偶数的元素，从0开始计数
    console.log($("ul>li:even"));
    //:odd 匹配所有索引值为奇数的元素 从0开始计数
    console.log($("ul>li:odd"));
    //:eq(index) 匹配一个给索引值的元素
    console.log($("ul>li:eq(3)"));
    //:gt(index) 匹配所有大于给定索引值的元素
    console.log($("ul>li:gt(1)"));
    //:lt(index) 匹配所有小于给定索引值的元素
    console.log($("ul>li:lt(1)"));

内容选择器：

	//:contains(txt) 匹配包含给定文本的元素
    console.log($("button:contains('按')"));
    //:empty 匹配所有不包含子元素或者文本的空元素
    console.log($(":empty"));
    //:has(selector) 匹配含有选择器所匹配的元素的元素
    console.log($("button:has(span)"));
    //:parent 匹配含有子元素或者文本的元素
    console.log($("*:parent"));

可见性选择器：

	//:hidden 匹配所有不可见元素 或者type为hidden的元素
    console.log($("button:hidden"));
    //:visible 匹配所有可见元素
    console.log($(":visible"));

属性选择器：

	//[ ]匹配包含给定属性的元素
    console.log($("button[id]"));
    //[attr=value] 匹配给定的属性是某个特定值的元素
    console.log($("button[id=btn]"));
    //[attr!=value] 匹配所有不含有指定的属性或者属性不等于特定值的元素
    console.log($("button[id!=btn]"));
    //[attr^=value] 匹配给定元素是以某些值开始的元素
    console.log($("button[id^=b]"));
    //[attr$=value] 匹配给定的属性是以某些值结尾的元素
    console.log($("button[id$=n]"));
    //[attr*=value] 匹配给定的属性是以包含某些值的元素
    console.log($("button[id*=n]"));
    //复合属性选择器
    console.log($("button[id=btn][class=btnlist]"));

子元素选择器：

	//:first-child 匹配第一个子元素
    console.log($("ul>li:first-child"));
    //:last-child 匹配最后一个子元素
    console.log($("ul>li:last-child"));
    //:first-of-type 选择所有相同的元素名称的第一个兄弟元素
    console.log($("ul>li:first-of-type"));
    //:last-of-type 选择的所有元素之间具有相同元素名称的最后一个兄弟元素
    console.log($("ul>li:last-of-type"));
    //:nth-child 匹配其父元素下的第N个子或奇偶元素
    console.log($("ul>li:nth-child(1)"));
    //:nth-last-child() 选择所有他们父元素的第N个子元素。计数从最后一个元素开始到第一个
    console.log($("ul>li:nth-last-child(1)"));
    //:nth-last-of-type() 选择的所有他们的父级元素的第n个子元素，技术从最后一个到第一个
    console.log($("ul>li:nth-last-of-type(2)"));
    //:nth-of-type 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
    console.log($("ul>li:nth-of-type(3)"));
    //only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
    console.log($("p:only-child"));

表单选择器：

	//:input 匹配所有input textarea select 和button 元素
    console.log($(":input"));
    //:text 匹配所有单行文本框
    console.log($(":text"));
    //:password 匹配所有密码框
    console.log($(":password"));
    //:radio 匹配所有单选按钮
    console.log($(":radio"));
    //:checkbox 匹配所有复选框
    console.log($(":checkbox"));
    //:submit 匹配所有提交按钮
    console.log($(":submit"));
    //:reset 匹配所有重置按钮
    console.log($(":reset"));
    //:button 匹配所有按钮
    console.log($(":button"));

表单对象属性选择器：

	//:enabled 匹配所有可以元素
    console.log($(":enabled"));
    //:disabled 匹配所有不可以元素
    console.log($(":disabled"));
    //:checked 匹配所有选中的被选中的元素 不包含option
    console.log($(":checked"));
    //:selected 匹配所有选中的option元素
    console.log($(":selected"));

jQuery过滤

html：

<ul>
    <li>1</li>
    <li>2</li>
    <li class="lilist">3</li>
    <li>4</li>
    <p>41</p>
    <li>5</li>
</ul>

	 /*
    * jquery 里面的当前对象是$(this)
    * */
    //:eq() 获取第N个元素
    console.log($("ul>li:eq(2)"));
    console.log($("ul>li:eq(-2)"));
    //first() 获取第一个元素
    console.log($("ul>li").first());
    //last() 获取最后一个元素
    console.log($("ul>li").last());
    //hasClass() 检查当前元素是否含有某个特定的类
    console.log($("ul>li").hasClass("lilist"));
    //filter() 筛选出与指定表达式匹配的元素集合
    console.log($("ul>li").filter("li.lilist"));
    //is() 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
    console.log($("ul>li").is(".lilist"));
    console.log($("ul>li").eq(1).is(".lilist"));

    //map 将一组元素转换成其他数组
    var num=$("ul>li").map(function(){
        return $(this)[0];
    })
    console.log(num);
    //has() 保留包含特定后代的元素 去掉那些不包含指定后代的元素
    console.log($("ul>li").has(".lilist"));
    //not() 删除与指定表达式匹配的元素
    console.log($("ul>li").not(".lilsit"));
    //slice(s,e) 选取一个匹配的子集 与slice类似
    console.log($("ul>li").slice(0, 2));

jQuery事件：

html：

<button>按钮</button>
<button class="btn">按钮</button>
<button>按钮</button>
<input type="text" value="你看我变色"/>

<div style=" height: 1000px">

</div>
<ul>
    <li>11</li>
    <li>22</li>
    <li class="info">33</li>
    <li>44</li>
</ul>
<div class="tri" style=" width: 100px; height: 100px; background: red">

</div>
<script src="js/jquery-1.9.1.js"></script>

/*
* window.onload 浏览器加载事件
* dom渲染完成事件
* */
    /*    $(window).ready(function(){
        console.log(1);
    });
    //简写
    $(function(){
        console.log(2);
    })*/

    //on 绑定事件 on 参数2相当于把父元素的事件委托给当前过滤元素来执行
    $("button").on("mousemove",function(){
        console.log("move");
    });
    $("ul").on("click",".info",function(){
        console.log(1);
    })
    //off 事件移除 全部移除 指定移除
    $("button").off("mousemove");
    //one 绑定一次性事件 on bind:为每个匹配元素的特定事件绑定事件处理函数。
    $("ul>li:first").one("click",function(){
        console.log("li");
    })
    //trigger 自动触发指定类型事件
    $(".tri").click(function(){
        console.log("你点我");
    }).trigger("click");
    $("input").select(function(){
        $(this).css("color","red");
    }).trigger("select").on("my",function(){
        console.log("自定义事件");
    }).trigger("my");

    //常规事件
    //data 执行事件传递的参数 fn 事件的执行回调函数
    $("button").click(1,function(){
        //传递的参数在event.data
        console.log("你点我");
    }).mouseenter(function(){
        console.log(1);
    }).mouseleave(function(){
        console.log(2);
    })
    //blur() 当元素失去焦点时触发 blur 事件。
    $("input").blur(function(){
        console.log("失去");
    }).focus(function(){
        console.log("获取");
    }).keydown(function () {
        console.log(3);
    }).keyup(function () {
        console.log(4);
    });


    //事件处理
    //bind type data fn
    //unbind 全部移除 移除指定类型事件
    $("html").bind("keydown mousemove",function(){
        console.log("key");
        $(this).unbind("mousemove");
    })

    //事件的执行参数
    $(window).keypress(10,function(e){
        console.log(e.timestamp);//时间console.log(e.currentTarget);//冒泡阶段的元素
        console.log(e.target);//最初触发的dom元素
        console.log(e.data);//传递数据 在data
        e.stopPropagation()//阻止事件冒泡
        e.preventDefault()//阻止事件默认行为
        return false;//阻止事件默认
    })

jQuery的dom元素操作：

<button name="btn" id="btn" title="你好">按钮</button>
<input type="checkbox" checked/>篮球
<input type="text" value="请输入...."/>
<script src="js/jquery-1.9.1.js"></script>
<script>
    /*
    * jquery 可以隐式迭代 一次性操作一堆元素
    * */
    //attr(name|properties|key,value|fn) 获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性
    $("#btn").attr("class","btnlist");
    $("#btn").attr("data-index",0);
    console.log($("#btn").attr("btnlist"));
    //removeAttr(name) 从每一个匹配的元素中删除一个属性
    //回调函数
    $("#btn").attr("title",function(idnex,attr){
        console.log(idnex, attr);
    })
    //从每一个匹配的元素中删除一个属性
    $("#btn").removeAttr("class")
    //pro() 获取匹配的元素集中第一个元素的属性值或设置一个或者多个属性值
    $("#btn").prop("name","按钮");
    $("#btn").prop("name",function(index,prop){
        return "修改";
    });
    console.log($("#btn").prop("name"));

    //removeProp() 用来删除由.prop() 方法设置的属性集
    $("#btn").removeProp("name");
    $("#btn").removeProp("title");

    //操作元素的css类
/*
    //addClass() 为每个匹配的元素添加指定的类名
    $("#btn").addClass("b1 b2");
    //removeClass() 从所有匹配的元素中删除全部或者指定的类
    $("#btn").removeClass("b2");
    //toggleClass() 如果存在就删除一个类 不存在就添加一个类
    //1.一个参数为直接类别切换
    //2.两个参数   1.切换的类  2.bool类型值 确定是否切换
    $("#btn").toggleClass("b2 b1 b5",true)
    //3.一个参  回调函数
    $("#btn").toggleClass(function (index, old) {
        console.log(old);
        return old + " b3 b2 b5";
    });*/

    //元素的html text value
    //html() 获取或设置元素的html
    $("#btn").html("你好");
    //text() 获取或设置元素的text
    $("#btn").text("使劲");
    $("#btn").html("<span>你好</span>");
    $("#btn").text("<span>你好</span>");

    //val 设置或获取元素的value
    $("input[type=text]").val("请看我...");
    $("input[type=text]").val(function (index, old) {
        return "新值"
    });

    //操作元素的css
    //css() 获取或设置元素的样式
    $("#btn").css("width","200px");
    console.log($("#btn").css("width"));
    $("#btn").css("width", function (index, old) {
        return "150px";
    });
    //一次性操作多个样式
    $("#btn").css({
        "width":"300px",
        "height":"40px"
    })
    $("#btn").attr({
        "name": "张三",
        "data-index": 10
    });
    $("#btn").removeAttr("name data-index");

</script>

jQuery里面的元素查找：

html：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="li5">5</li>
    <li>7</li>
    <li class="li4">1</li>
    <p >6</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>

js：

<script>
    //jQuery可以进行链式操作
    //同一个对象 多个对象链式操作
    //尽量避免多个链 3-4
    //children() 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素组合
    console.log($("ul").children());
    //find() 搜索所有指定表达式匹配的元素
    console.log($("ul").find("li"));
    //next() 取得一个包含匹的元素集合中每一个元素紧邻的后面同辈元素的元素集合
    console.log($("li").next(".li5"));
    //nextAll 查找当前元素之后所有的同辈元素。
    console.log($("ul").children().nextAll());
    //nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
    console.log($(".li5").nextUntil(".li4"));

    //parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合
    console.log($("ul").children().parent());
    //parents() 取的一个包含所有匹配元素的祖先元素的元素集合（不包含根元素）；可通过可选表达式进行筛选
    console.log($("ul").children().parents("body"));
    //prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
    console.log($("ul").children().prev());
    // prevAll() 查找当前元素之前所有的同辈元素返回值prevUntil()查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

    //siblings 同胞兄弟元素  添加参数过滤
    console.log($("ul").children().siblings(".li5"));
    //add() 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
    console.log($("ul").add(".li5"));

    $("ul").children().each(function(index){
        $(this).html(parseInt($(this).text())+index);
    });
    $("ul").children().map(function(index){
        $(this).html(10+index);
    })

</script>

jQuery的位置和尺寸：

html：

 <style>
        .block{
            width: 100px;
            height: 200px;
            overflow-y: scroll;
            /*overflow-y: hidden;*/
            overflow-x: scroll;
            border: 1px red solid;
        }
        .b{
            height: 300px;
            width: 90px;
            border: 1px solid blue;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            padding: 20px 20px;
            /*margin: 10px;*/
        }
    </style>
    <div class="block">
    <div class="b"></div>
	</div>
	<div class="box">

	</div>
	<script src="js/jquery-1.9.1.js"></script>

js：

<script>
    //offset() 获取当前元素在当前视口的相对偏移
    console.log($(".block").offset().left);
    console.log($(".block").offset().top);
    //position() 获取匹配元素相对于父元素的偏移
    console.log($(".b").position());
    //scrollTop() 获取匹配元素相对滚动条顶部的偏移
    console.log($(".block").scrollTop(30));
    //scrollLeft() 获取匹配元素相对于滚动条左侧的偏移
    console.log($(".block").scrollLeft(10));
    //height() 获取匹配元素当前计算的高度值
    console.log($(".box").height());
    //width() 取得第一个匹配元素当前计算的宽度值
    console.log($(".box").width());
    //innerHeight() 对可见和隐藏元素都有效 获取第一个匹配元素内部区域高度 （包括补白、不包括边框）
    console.log($(".box").innerHeight());
    //innerWidth() 获取第一个匹配元素内部区域宽度
    console.log($(".box").innerWidth());
    //outerHeight() 获取第一个匹配元素外部高度 对隐藏和可见都有效
    console.log($(".box").outerHeight());
    //outerWidth() 获取第一个元素外部宽度默认包括补白和边框
    console.log($(".box").outerWidth());
    $(".box").width(function(index,old){
        console.log(index, old);
        return old+100;
    })
</script>