jq知识点一

最新推荐文章于 2022-10-11 08:46:42 发布

ZSYTYY

最新推荐文章于 2022-10-11 08:46:42 发布

阅读量329

点赞数

分类专栏：作业

作业专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jq的使用加入jq庫文档就绪（需要写一个函数$（document），ready（function（{}））
相当于$function（）{}），
基本语法，$===jq
$(e=select).action === juery(select).action()
推荐用$ 符号
var jqurey=function（）{}
jquery（）===$（）

css添加样式，

eg：$（‘p’）.css('background-color':'red')。
只有一个属性值的时候
有多个属性：值得时候 ---（background-color：‘red’，）

推荐

常用事件方法
1.元素选择器：基于元素名=名称选取元素
2.id选择器通过html元素的id属性选取指定的元素
3.类选择器通过指定的class查找元素
4.css选择器用于改变html元素的css属性
其他选择器选取所有元素
选取ul下的li元素
我们可以通过jq选择器可以选择html的所有元素。

获取内容
text（）设置或返回元素的文本内容。
html（）获取元素的所有内容包括元素标签。
val（）获取表单的值只能获取（input）。

jq的基础动画
实现基础菜单

1.jqury动画效果，隐藏和显示。

两个方法hide（），show（）。
两个按钮
通过使用hide（）或show（）方法来隐藏或显示html
speed规定隐藏和显示的速度，取值为‘show’，‘fast’，毫秒，
callback参数，是隐藏或显示完成后

toggle（）方法
切换hide（）和show（）方法
$(selector).hide(speed.callback)
$(selector).show(speed.callback)

$("#button3").click(function(){
$("p").toggle(1000.function(){
$("p").css({color:"yellow"})
})

})

slide,点击滑动显示或者隐藏面板
两个方法slidedown（），slideup（），slidetoggle（）

第三个动画效果

通过animate():使用相对值
<script>
$(document).click(funcction(){
$("#button").click(function(){
$("div").animate({left:"200px",opacity:'0.5',height:'+=16px',width:'+=16px'

})
})

})

</script>

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

默认情况下html有一个静态的位置，且是不可移动的，如果需要改变，那么需将元素position属性设置为absolute、relative、fixed
通过animate，把<div>

$(document).ready(function(){
   $("#button").click(function(){
   $("div").animate({
       left:"200px",opacity:"0.5",height:'160px',width:'160px'},1000,function(){
       alert("动漫执行完成")

})

})
是否可以用animate（）方法来操作所有的CSS属性？？
？
几乎可以，但需记住，当使用animate()方法的时候，必须使用camel标记法书写所有的属性法。eg：css

使用队列功能，如果在彼此之后编写多个animate()调用jquery，Jquery会创建包含这些方法的调用的内部队列然后逐一运行这些

停止动画stop用于在动画完成前对他进行停止。
暂停动画，那么效果$(''),暂停队列中的一个动画，如果队列中有多个动画，那么暂停该动画然后系统会执行后面的动画，stop是这样。

二级菜单的实现

jquery-----链（chaining）
通过jquery 可以把方法，链接到一起。chain允许我们在一条语句中运行多个jquery方法。
在相同的元素上。获取一个p标签通过CSS将颜色改成，向上滑动。background-color，blue给他一个速度。
意思就是#P1首先会变红，向上移1.5秒的速度，移动然后向下移1.5s的速度移动最后，将背景颜色变为蓝色。如果不用链，写法，在animate
链式的有点。浏览器不用多次去查找相同的元素

作业用jq改CSS二级菜单样式。

<html><head>
<script src="jquery-1.8.3min.js"></script>
</head>
<body>
<div class="top_bar">
    <ul>
        <li>
            <a class="one_bar" href="###">一级菜单</a>
            <ul class="two_bar">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <a class="one_bar" href="###">一级菜单</a>
            <ul class="two_bar">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <a class="one_bar" href="###">一级菜单</a>
            <ul class="two_bar">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <a class="one_bar" href="###">一级菜单</a>
            <ul class="two_bar">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

.two_bar {
	margin-left:80px;
	display:none;
}
li {
	list-style:none;
}
.two_bar li,.one_bar {
	display:block;
	text-align:center;
	font-size:16px;
	background-color:#55339e;
	color:#ffffff;
	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;
}

$(document).ready(function(){
$(".one_bar").click(function(){
$(this).next().slideToggle();
$(this).parent().siblings().children("ul").slideUp();
});
});

ZSYTYY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq知识点一

jq的使用加入jq庫文档就绪（需要写一个函数$（document），ready（function（{}））相当于$function（）{}），基本语法，$===jq$(e=select).action === juery(select).action()推荐用$ 符号var jqurey=function（）{}jquery（）===$（）css添加样式，eg：$（‘p’）....
复制链接

扫一扫