Web实训知识点——4.09

最新推荐文章于 2023-12-25 16:09:50 发布

余生隻靠浪丶

最新推荐文章于 2023-12-25 16:09:50 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/ZZhangLiangLiang/article/details/89288984

版权

Jquery的使用

加入Jquery库文档就绪(需要写一个函数 $document），ready（function（{}））) 相当于$ function（）{}）
css添加样式：
eg：$（“p”）.css(‘background-color’:‘red’)。------只有一个属性的时候
（‘background-color’:‘red’,’’,’’,)。------有多个属性的时候
常用的Jquery事件方法：

1.$(document).ready(function(){})
$(document).ready():该方法允许我们在文档加载完成后执行函数
2.click（function（）{}）：当按钮点击事件被触法时会调用一个函数（也就是执行一个方法）

总结Jquery选择器：

1.元素选择器：基于元素名=名称选取元素
eg:$(“p”)------所有标签为p的元素
我想获取标签为p的元素的第一个，或者第三个
2.id选择器：通过HTML元素的id属性选取指定的元素
eg:<div id=""></div>
$(#“nav”)
3.类选择器：通过指定的class查找元素
eg：<div class="name"></div>
$(.“name”)
4.继承选择器
5.CSS选择器：用于改变HTML元素的CSS属性
eg: <P></p>
$(“P”).css({‘background-color’:‘red’})

其他选择器
1 $(^{'} *^{'}) : 选取所有元素 2$ (“ul”) :选取ul下的li元素
eg: <ul> <li></li> <li></li> <li></li> </ul>
$(“ul li”):选取ul下的所有的元素
$(“ul li：first”):选取ul下的第一个的元素
我们可以通过Jquery选择器选择所有的html元素（
Jquery获取元素的内容和属性（DOM-文档对象模型操作）
1.获取内容：text（).html（）.val（）

<div id="text">我叫张三</div>
<input type="button" value="按钮" id="button">
<script>
    var nutton $("button")
    button.click(function(){
        alert("div的内容和为:"+$("#test").text()
    })
</script>





    html():设置或返回所有元素的内容

 <div id="test">我叫张三
<p>123</p>
<p>1111111111111111</p>
</div>
<input type="button" value="按钮显示 div的内容" id=button1">
<input type="button" value="按钮html的内容" id=button2">
<script>
```
var button1=$("#button1")
button1.click(function(){
    alert("div的内容和为:"+$("#test").text())
    })
$("#button2").click(function(){
    alert("html的内容和为:"+$("#test").html())
    })

$("#test").text()结果为：

text():设置或返回元素的文本内容
html():设置或返回所有元素的内容
val():设置或返回表单字段的值0

Jquery的基础动画操作

1.Jquery动画效果隐藏和显示
两个方法：hidden（），show（）
语法：
$（selector）.hide(speed.callback)
$（selector）.hide(speed.callback)
speed规定隐藏和显示的速度，取值为“show”，“fast”，毫秒，
callback参数，是隐藏和显示完成后
两个按钮：通过使用hide（）或show()方法来隐藏或显示html
例子：

Jquery动画效果,隐藏和显示。

3.animate（）方法用于创建自定义的动画语法： $(selector).animate({params},speed,callback)必须的params参数定义形成动画的css属性。可选参数和上面的几个方法相同。

eg：
通过animate（）方法操作属性
代码如下：
开始动画

默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的，如果需要改变，那么需将元素的position属性设置为，absolute，relative，fixed

Jquery------链（Chaining）通过Jquery可以把方法链接到一起，Chaining允许我们在一条语句中运行多个Jquery方法（在相同的元素上） $("#p1").css({'color':"red"}).slideUp(1500).slideDown(1500).animate({backgroundColor:"blue"},1000) 意思：#p1元素首先会变红，然后向上以1.5秒的速度移动，然后向下以1.5秒的速度移动。最后将背景颜色变为蓝色。如果我们不用链，那么我们的写法： $("#p1").css({'color':"red"}) $("#p1").slideUp(1500) $("#p1").slideDown(1500) $("#p1").animate({backgroundColor:"blue"},1000)

Chaining的优点：
浏览器不用多次去查找相同的元素

用Jquery写二级菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
 
    .two_bar {
    display:none;
        margin:0 auto;
    }
    li {
    list-style:none;
    }
    .two_bar li,.one_bar {
    display:block;
    text-align:center;
    font-size:16px;
    background-color: #9e3927;
    color: #3ae9ff;
    border-bottom:1px solid #ffffff;
    border-radius:10px;
    line-height:38px;
    overflow:hidden;
    height:38px;
    width:258px;
    }
    a:link,a:visited,a:hover,a:active {
    text-decoration:none;
    }
</style>
    <script>
        $(document).ready(function(){
            $(".one_bar").click(function(){
                $(this).next().slideToggle();
                $(this).parent().siblings().children("ul").slideUp();
            });
        });
    </script>
</head>
<body>
<div class="top_bar">
    <ul>
        <li>
            <a href="###" class="one_bar">首页</a>
            <ul class="two_bar">
                <li>游戏</li>
                <li>娱乐</li>
                <li>体育</li>
            </ul>
        </li>
        <li>
            <a href="###" class="one_bar">导航</a>
        </li>
        <li>
            <a href="###" class="one_bar">关注</a>
        </li>
        <li>
            <a href="###" class="one_bar">榜单</a>
        </li>
    </ul>
</div>
</body>
</html>

余生隻靠浪丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点——4.09

Jquery的使用加入Jquery库文档就绪(需要写一个函数（document），ready（function（））)相当于（document），ready（function（{}））)相当于（document），ready（function（））)相当于function（）{}）css添加样式：eg：$（“p”）.css(‘background-color’:‘red’)。------只...
复制链接

扫一扫