JQuery学习记录2021.06.22

最新推荐文章于 2024-05-24 23:45:01 发布

Stan_lu

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量92

点赞数

分类专栏： html Javascript JQuery 文章标签： javascript jquery html5

本文链接：https://blog.csdn.net/Stan_lu/article/details/118107044

版权

Javascript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

JQuery

1 篇文章 0 订阅

订阅专栏

Templates:

1. arrow (类似Java的Lamda)

代码分析：

通过 => 来代替 function 关键词

通过 `${}` 来将变量中的值嵌入字符串

代码展示：

$(function () {

            //function addNum(params) {
            //    return params + 2;
            //}

            const addNum = (params) => {
                return params + 2
            }

            console.log(addNum(2));
            console.log(addNum(-2));

            const num = ['1', '2', '3'];
            const lab = num.map((i) => {
               return `Lab ${i}`
            });
            console.log(lab);
}

2. animate()

代码分析：

通过使用 animate() 函数来改变标签的css样式可以实现动画效果

代码展示：

$(".start").click(function(){
            $("ul").animate({
                width : "50%"
            }).animate({
                fontSize:"45px"
            }).animate({
                borderWidth: 20
            }).addClass("red");
        });

3. filter()

代码分析：

通过 filter() 和内嵌的 function 实现根据 index 对奇偶行的标签做不同的操作

代码展示：

$(".filter").click(function(){
            //odd
            if($("input[value = 'odd']").is(":checked")){
                $("ul li").removeClass("highlight");
                $("ul li").filter(function(index){
                    return index % 2 == 0;
                }).addClass("highlight");
            }
            //even
            if($("input[value = 'even']").is(":checked")){
                $("ul li").removeClass("highlight");
                $("ul li").filter(function(index){
                    return index % 2 != 0;
                }).addClass("highlight");
            }
        })

<input type="radio" name="oddeven" value="odd"> Odd 
<input type="radio" name="oddeven" value="even"> Even 
<button type="button" class="filter">Filter</button>
<span class="error">Select odd or even</span><br>

4. ${} 获取所有特定标签

代码分析：

获取相当于 list 的标签组，可以通过for循环遍历

代码展示：

function checkall(box){
				var x = $("input");
				for(i = 0; i< x.length;i++){
					x[i].checked = box.checked;
					checkone(x[i]);
				}
			}

5. slide 手动实现

代码分析：

通过animate()实现平滑的slide效果。

通过window.panelWidth获取窗口宽度，从而设定滑动的距离。

对于每个panel滑动不同index对应的距离来避免重叠。

代码展示：

<!DOCTYPE HTML>
<html>
	<head>
		<title>Sliding Tabbed Panels</title>
		<link type="text/css" rel="stylesheet" href="slide.css" />
		<script
          src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		

		<script>
			$(document).ready(function(){
				$(".sp .tabs").css('display','block');

				$(".panel_container").css({
					'height':'400px'
				})
				$(".panels").css({
					'position':'absolute',
					'top':'0px'
				})
				$(".panel").css({
					'position':'absolute',
					'height':'400px'
				})

				window.panelWidth = $(".sp").width();

				$(".panel").each(function(index){
					$(this).css({
						'width':window.panelWidth +'px',
						'left':(index * window.panelWidth)

					})
				})

				$(".tabs span").on("click",function(){
					changePanels($(this).index());

				})
			})

			function changePanels(index){
				
				let newPanelPosition = (window.panelWidth) *index * -1;
				
				$(".panels").animate({
					left: newPanelPosition
				},1000)
			}
		</script>
	</head>
	<body>

		
		
		<!-- Begin - Sliding Tabbed Panels -->
		<div class="sp">
			<div class="tabs">
				<span class="ipad">Tab 1</span><span class="video">Tab 2</span><span class="photo">Tab 3</span>
			</div>
			<div class="panel_container">
				<div class="panels">
					<div class="panel">
						<div class="panel_content">
							<h2>Filling text for Tab 1</h2>
							<p>Lorem A ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
							
						</div>
					</div>
					<div class="panel">
						<div class="panel_content">
							<h2>Filling text for Tab 2</h2>
							<p>Lorem B ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
							
							
						</div>
					</div>
					<div class="panel">
						<div class="panel_content">
							<h2>Filling text for Tab 3</h2>
							<p>Lorem C ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End - Sliding Tabbed Panels -->
	</body>
</html>

Stan_lu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习记录2021.06.22

Templates:1. arrow (类似Java的Lamda)代码分析：通过 => 来代替 function 关键词通过 `${}` 来将变量中的值嵌入字符串代码展示：$(function () { //function addNum(params) { // return params + 2; //} const addNum = (params...
复制链接

扫一扫