JavaScript05

JavaScript05

1.jQuery

jQuery库，里面存在大量的JavaScript函数

获取jQuery库

• 官网下载到本地
• 找CDN在线链接

<!--在线引入-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

公式：$(selector).action() 选择器加事件

<a href="" id="test-jquery">点我</a>
<script>
	//选择器就是css的选择器
    $('#test-jquery').click(function(){
        alert("hello,jQuery");
    })
</script>

选择器

<script>
    //原生js，选择器少，麻烦不好记
	//标签
    document.getElementByTagName();
    //id
    document.getElementById();
    //类
    document.getElementByClassName();
    
    //jQuery   css中的选择器它全部都能用
    $('p').click();        //标签选择器
    $('#id1').click();     //id选择器
    $('.class1').click()   //class选择器
</script>

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件、键盘事件、其他事件

<style>
    #divMove{
        width:500px;
        height:500px;
        border;1px solid red;
    }
</style>

<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id='mouseMove'></span>
<div id='divMove'>
    在这里移动鼠标试试
</div>
<script>
	//当网页元素加载完毕之后，响应事件
    $(function()){      //等同于 $(document).ready(function(){})
      $('#divMove').mousemove(function (e)){  //e代表参数，可以用任何字母或单词代替
        $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)//text方法加文字
        }
      }
</script>

操作DOM

节点文本操作

<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>

<script>
	//document.getElementById('')  原生
    
    $('#test-ul li[name=python]').text();//获得值
    $('#test-ul li[name=python]').text('123');//设置值
    $('#test-ul').html();//获得值
    $('#test-ul').html('<strong>123</strong>');//设置值
    
</script>

css的操作

$('#test-ul li[name=python]').css("color","red")

元素的显示和隐藏：本质 display：none

$('#test-ul li[name=python]').hide()
$('#test-ul li[name=python]').show()

其他操作

$(window).width()
$(document).width()

扩展

layer

Element-ui