jquery 自己总结的知识点

最新推荐文章于 2022-06-06 12:48:58 发布

我的___爱

最新推荐文章于 2022-06-06 12:48:58 发布

阅读量496

点赞数

分类专栏： jquery 文章标签： jQuery HTML

本文链接：https://blog.csdn.net/jiazhongkai521/article/details/9076709

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1）其实jquery的选择器和css的选择器有点类似，我自己是这样感觉的，如想给html的p元素添加上border的css样式的话，我们可以这样写

<html>

<head>

<title>jquery 选择器</title>

p{border:1px dotted red;}

</style>

</head>

<body>

<p>这是一个段落</p>

</body>

</html>

同样的加入我们想用jquery来操作p标签的话，我们可以这样操作，注：前提是页面需要引入jquery库。

$(function(){

$("p").text("用jquery来操作p标签内的内容");

}

</script>

同样的css中的id标签选择器是#+id，如#wenbin，jquery使用的是$("#wenbin") 来选择id为wenbin的元素。

css中使用的是.wenbin 来表示class为wenbin的类，同样jquery使用的也是$(”.wenbin")来选择class为 wenbin的元素。

好了，来完熟悉的了，再看一下jquery选择器的不同之处

<a href="http://www.baidu.com">百度超链接</a>
<a href="http://www.google.com.cn">谷歌超链接</a>

<script type="text/javascript">
    $(function ()
    {
        $("[href='http://www.baidu.com']").css("border", "1px dotted red");
        $("[href$='.cn']").css("border", "1px dotted blue");
        $("[href]").css("display", "none");
    });
</script>

上面的$("[href='http://www.baidu.com']").css("border", "1px dotted red");代码的意思是说所有html元素中有href这个属性等于'http://www.baidu.com'这个的所有元素的css样式都加上border为1px dotted red这个css样式。

下一行代码的意思是所有html元素中有href这个属性的，并且href还是以".cn"结尾的，添加一个css样式。

最后一行代码的意思是所有包含href这个属性的元素都添加一个display=none这个css样式。（即不可见）

本想把jquery写下去，但是发现了jquery也不用太精专，它的基本用法和一些常用知识了解的情况下，用到的时候去查找jquery的说明文档就可以了。

但是一些常用的还是得掌握的，如设置和获取元素的html、text和val等。

还有一些常用的动画效果函数如slide、fadeOut和fadeIn、slideUp等。

2）今天要从文本框中取值，正好用到了一个jquery的函数给记录下来，如下：

假如我们需要获取输入文本框的值，就需要使用val(）这个方法，（）内假如有参数的话，那么就是给文本框赋值，如果没有那么就是取值，即$("#Text1").val() 是取值；

$("#Text1").val("1111111”) 是给文本框赋值为1111111。大体上就是这样使用，其中跟val相似的还有text和html，来获取内部的文本和html。

3）今天做了一下文本框按回车键转移到下一个文本框，然后再按回车键，触发按钮事件。

其中涉及到click事件、keypress等事件，其中js中的是onclick onkeyjpress 但是在jquery里面on就被去掉了，所以以后用方法的时候自己注意一下，大体上就是这个命名方式。

下面是验证用户名、密码、登录按钮按回车键切换焦点。代码如下：

<script type="text/javascript">
    $(function()
    {
      
        $("#Text1").keypress(function()
        {
            if (event.keyCode == 13)
            {
                if ($("#Text1").val() != "")
                {
                    $("#Text2").focus();
                }
            }
        });

        $("#Text2").keypress(function()
        {
            if (event.keyCode == 13)
            {
                if ($("#Text2").val() != "")
                {
                    $("#Button1").click();
                }
            }
        });

        $("#Button1").click(function()
        {
            alert('333333');
        });

    });
    
    
</script>

其中 text1 为用户名和 text2 为密码还有 button1 按钮为登录按钮。

---------------------------------------未完待续------------------------------------------------------------

我的___爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 自己总结的知识点

其实jquery的选择器和css的选择器有点类似，我自己是这样感觉的，如想给html的p元素添加上border的css样式的话，我们可以这样写jquery 选择器p{border:1px dotted red;}这是一个段落同样的加入我们想用jquery来操作p标签的话，我们可以这样操作，注：前提是页面需要引入jquery库。 $(fu
复制链接

扫一扫

专栏目录