[JavaScript知识库]5 jQuery基础

1 jQuery基础

1. jQuery的介绍
jQuery是一个免费、开源的JavaScript函数库
jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
jQuery的优点就是兼容主流浏览器，代码编写更加简单。

2 jQuery的用法

2.1 jQuery的引入
http://code.jquery.com/
jQuery 1.x	 jQuery Core 1.12.4 - minified 版本

<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>


2. jQuery的入口函数
我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素。
而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    //  原生js写法
    window.onload = function(){
        //  当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
        var oDiv = document.getElementById("div1");
        alert(oDiv);
    };
    //  $符号就是jquery的象征
    //  $本质是就是函数，只不过这个函数名($)
    $(document).ready(function(){
        //  获取标签和css样式匹配标签的规则一样
        //  以后使用jquery，变量名都要以$符号开头
        var $div = $("#div1");
        alert($div)
    });
    //  jquery的简写方式
    $(function(){
        var $div = $("#div1");
        alert($div)
    })

    // ready 等待页面标签加载完成以后就执行ready事件， 不会等待资源数据加载完成
</script>
<div id="div01">这是一个div</div>

3 jQuery选择器

jQuery选择器的种类
	标签选择器: $('li') //选择所有的li标签
	类选择器: $('#myId') //选择id为myId的标签
	id选择器: $('.myClass') // 选择class为myClass的标签
	层级选择器: $('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
	属性选择器: $('input[name=first]') // 选择name属性等于first的input标签

4 选择集过滤

选择集过滤的操作
	has(选择器名称)方法，表示选取包含指定选择器的标签
	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>

5 选择集转移

$('#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 src="js/jquery-1.12.4.min.js"></script>

<!-- 选择集转移: 根据指定标签为参照物，选中其它标签，这种操作叫做选择集转移 -->
<script>
    $(function(){
        //  获取div，并把div作为参照物，获取其它标签
        var $div = $("#box1")
        //  css 参数是一个js对象，js对象和python里面字典很类似
        //  属性名和css里面的属性名保存一致
        //  选择上一个同级标签
        $div.prev().css({"color": "red", "font-size": "25px"});
        //  选择上面所有的同级标签
        $div.prevAll().css({"text-indent": "50px"});
        //  选择下一个同级标签
        $div.next().css({"color": "green"});
        //  选择下面所有的同级标签
        $div.nextAll().css({"text-indent": "50px"})
        //  选择同级的其它标签
        $div.siblings().css({"text-decoration":"underline"});
        //  选择父标签
        $div.parent().css({"background": "gray"});
        //  获取所有的子标签
        $div.children().css({"color": "red"});
        //  查找指定的子标签
        $div.find(".sp1").css({"color": "green"})

    })
</script>


小结
prev() 表示获取上一个同级元素
prevAll() 表示获取上面所有同级元素
next() 表示获取下一个同级元素
nextAll() 表示获取下面所有同级元素
parent() 表示获取父元素
children() 表示获取所有的子元素
siblings() 表示获取其它同级元素
find("选择器名称") 表示获取指定选择器的元素

6 获取和设置元素内容

jquery中的html方法可以获取和设置标签的html内容
给指定标签追加html内容使用append方法

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        //  获取标签
        var $div = $("div");
        //  jquery的方式获取标签内容
        alert($div.html());
        //  设置标签内容
        $div.html("<a href='https://www.baidu.com'>百度</a>");
        //  扩展: 追加内容
        $div.append("<a href='https://www.baidu.com'>谷歌</a>")
    });
</script>

7 获取和设置元素属性

prop方法的使用
之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        //  获取标签
        var $p = $("p");
        var $text = $("#txt1");
        //  获取样式属性，比如:获取字体大小
        var $px = $p.css("font-size");
        alert($px);
        //  设置样式属性
        $p.css({"font-size":"30px", "background":"green"});
        //  除了样式属性的相关操作使用css方法，其它属性的操作都是prop方法
        //  获取属性
        var $name = $text.prop("name");
        alert($name);
        var $type = $text.prop("type");
        alert($type);

        //  设置属性
        $text.prop({"value":"张三", "class":"tname"});
        //  获取value属性可以使用val方法
        alert($text.prop("value"));
        //  使用val方法获取value属性
        alert($text.val())
        //  使用val方法设置value属性
        $text.val("王五");
    });
</script>