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{
         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主：狂神说