jquery入门 (一)

jquery入门(一)

什么是jquery

JS和jq的关系：jquery库里存在大量JS函数、

jquery公式：$(selector).action()

jquery选择器就是css选择器

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<a href="" id="test">点我</a>

<script>

    $(\'#test\').click(function(){
        alert(\'hello,world\')
    })



</script>

jquery选择器

选择器就是css选择器

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
    //原生js选择器,选择器少，写的麻烦
    //标签
    document.getElementsByTagName();
    //ID
    document.getElementById();
    //类
    document.getElementsByClassName();


    //jquery选择器  css中的选择器全部能用
    $(\'p\').click();//标签选择器
    $(\'#id\').click();//ID选择器
    $(\'.class\').click();//类选择器
</script>

jquery文档工具站

jquery事件 action

鼠标事件
键盘事件

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
    #divMove{
        width: 500px;
        height:500px;
        border: 1px solid red;
    }
</style>
<!--要求获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里点击鼠标试一试
</div>


<script>
    //当网页元素加载完毕后，响应事件
//    $(document).ready(function(){
//        
//    })
    //以上内容简化为
    $(function () {
        $(\'#divMove\').mousemove(function(e){
            $(\'#mouseMove\').text(\'x:\'+ e.pageX+\'y:\'+ e.pageY)
        })
    })

</script>

jquery操作DMO元素

   $(\'#test-ul li[name=python]\').text()//获得值
   $(\'#test-ul li[name=python]\').text(\'123456\')//设置值为123456
   $(\'#test-ul\').html(\'\');//获得值
   $(\'#test-ul\').html(\'<strong>123</strong>\');//设置值

//css
    $(\'#test-ul li[name=python]\').css({ "color": "#ff0011", "background": "blue" });

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

复习笔记参考资料来自B站UP主：狂神说