2020/8/3前端学习日记

最新推荐文章于 2024-06-03 17:25:40 发布

甜饼大酱的老婆

最新推荐文章于 2024-06-03 17:25:40 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/weixin_42400773/article/details/107758097

版权

jQuery

jQuery语法：$(selector).action()

美元符号定义jQuery
选择符（selector）“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作
示例：
$(this).hide() 隐藏当前元素
$(“p”).hide() 隐藏所有段落
$(".test").hide() 隐藏所有class=“test"的元素
$(”#test").hide() 隐藏所有id="test"的元素

jQuery使用的语法是XPath与CSS选择器语法的组合

文档就绪函数：

$(document).ready(function(){
	--jQuery functions go here--
}

这个函数是为了防止文档在完全加载之前就运行jQuery代码。

jQuery选择器

jQuery元素选择器
jQuery使用css选择器来选取HTML元素
$(“p”)选取<p>元素
$(“p.intro”)选取所有class="intro"的<p>元素
$(“p#demo”)选取所有id="demo"的<p>元素

jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素
$("[href]")选取所有带有href属性的元素
$("[href=’#’]")选取所有带有href值等于"#“的元素
$(”[href != '#]")选取所有带有href值不等于“#”的元素
$("[href $= ‘.jpg’]")选取所有href值以".jpg"结尾的元素

jQuery CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性

$("p").css("background-color","red");

jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数.
实例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
	<h2>This is a heading</h2>
	<p>This is a paragraph.</p>
	<p>This is another paragraph.</p>
	<button>Click me</button>
</body>

</html>

jQuery名称冲突

jQuery使用$符号作为jQuery的简介方式.
noConflict()释放jQuery对$的控制权
该方法也可以用于为jQuery变量规定新的自定义名称
在其他JavaScript库为其函数使用$时,该方法很有用.(别的库也要使用$时,可以调用noConflict()函数)
jQuery.noConflict(removeAll)

removeAll 布尔值.指示是否允许彻底将jQuery变量还原.

定义一个新的别名:
var j = jQuery.noConflict();
j.(“div p”).hide();

具体情况可以参考https://www.w3school.com.cn/jquery/core_noconflict.asp

由于jQuery是为处理HTML事件而特别设计的,那么遵循以下原则时,代码会更恰当且更以维护:

把所有jQuery代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把jQuery代码置于单独的.js文件中
如果存在命名冲突,则重命名jQuery库

一些jQuery中事件方法的例子:
在这里插入图片描述
jQuery效果

jQuery hide()和show()
通过jQuery可以使用hide()和show()方法来隐藏和显示HTML元素:

$("hide").click(function(){
	$("p").hide();
});

$("show").click(function(){
	$("p").show();
});

语法：$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的speed参数规定隐藏/显示的速度,可以取以下值:“slow”,“fast”,或毫秒.
可选的callback参数是隐藏或显示完成后所执行的函数名称.

jQuery toggle()
通过jQuery,您可以使用toggle()方法来切换hide()和show()方法.显示隐藏的元素,并隐藏显示的元素.
可选参数与hide()和show()一样.

jQuery淡入淡出效果
Fading方法

fadeIn()方法:用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
fadeOut()方法:用于淡出可见元素
$(selector).fadeOut(speed,callback);
fadeToggle()方法:可以再fadeIn()与fadeOut()之间进行切换
$(selector).fadeToggle(speed,callback);
fadeTo()方法:允许渐变为给定的不透明度(值介于0与1之间)
$(selector).fadeTo(speed,opacity,callback);

jQuery滑动效果
(其实虽然介绍说是滑动效果,但是我觉得用伸缩来形容更合适,因为向上滑动后该元素不再出现在页面中)

slideDown():用于向下滑动元素
$(selector).slideDown(speed,callback);
slideUp():用于向上滑动元素
slideToggle():在slideDown()和slideUp之间切换

要注意的是fading和slide效果如果是呈现的过程,元素原来的display属性都是none

jQuery动画
animate()方法用于创建自定义动画.
$(selector).animate({params},speed,callback);
必须的params参数定义形成动画的CSS属性.
可选的speed参数规定效果的时长.他可以取以下值:“slow”,“fast”,毫秒.
可选的callback参数是动画完成后所执行的函数名称.

使用相对值
即使用+= 或 -=;

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

可以把属性的动画值设置为"show",“hide”,“toggle”

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

animate()使用队列功能
如果编写多个animate()调用,jQuery会创建包含这些方法调用的"内部"队列,然后逐一运行这些animate调用
示例:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery stop()方法
jQuery stop()方法用于停止动画或效果在他们完成之前.
stop()方法适用于所有jQuery效果函数,包括滑动\淡入淡出和自定义动画.

$(selector).stop(stopAll,gotoEnd);
可选的stopAll参数规定是否应该清楚动画队列.默认是false,即仅停止当前的动画,而队列后面的动画不受影响.
可选的gotoEnd参数规定是否立即完成当前动画,默认是false.
因此默认的stop()会清除被选元素上指定的当前动画.

jQuery Callback函数
由于JavaScript语句是逐一执行的,所以动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成.
为了避免这种情况,可以以参数的形式添加Callback函数.
典型语法:
$(selector).hide(speed,callback)
callback是一个在hide操作完成后执行的函数

比如以下这段代码会出现错误:

$("p").hide(1000);
alert("The paragraph is now hidden");

因为他会在"p"还没有隐藏的时候弹出提示框.

jQuery Chaining
通过jQuery你可以吧动作/方法连接起来.
Chaining允许我们在一条语句中运行多个jQuery方法(在同一个元素上)

我们在同一个元素上运行多条jQuery命令,可以减少查找元素次数.

下面的例子把css(),slideUp(),and slideDown()链接到一起.“p1"首先会变成红色,然后向上滑动,然后向下滑动:
$(”#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

jQuery HTML
三个简单实用的用于DOM操作的jQuery方法:

text() -设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括HTML标记)
val() -设置或返回表单字段的值

获取属性 - attr()
实例：

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

设置内容 - text() html() val()
其实这里很好理解这三个函数有参数时，参数就是要修改的内容，没有参数时就是获取相应的值。

text() html() val()的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始的值。然后函数返回您希望使用的字符串。
实例：

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

设置属性 attr()
实例：

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

也可以设置多个属性：

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

attr()的回调函数
和text() html()差不多：

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

jQuery添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

通过append()和prepend()方法添加若干新元素
比如下面这个实例:

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

after()和before()用法类似

jQuery删除元素

remove() - 删除被选中元素
empty() - 从被选元素中删除子元素

过滤被删除元素
向remove()中传入参数-选择条件
$(“p”).remove(".italic");
删除clss = “italic” 的所有<p>元素

jQuery操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
1.返回css属性
css(“propertyname”);
$(“p”).css(“background-color”);

2.设置css属性
css(“propertyname”,“value”);
$(“p”).css(“background-color”,“yellow”);

3.设置多个属性
css({“propertyname”:“value”,“propertyname”:“value”,…});
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});

jQuery尺寸方法

width()和height()返回元素的宽度和高度(不包括内边距\边框\外边距)
innerWidth()和innerHeight()返回元素的宽度和高度(包括内边距)
outerWidth()和outerHeight()返回元素的宽度和高度(包括内边距和边框)
outerWidth(true)和outerHeight(true)返回元素的宽度和高度(包括内边距和边框和外边框)

算法题

删除链表节点
给定单向链表的头指针和一个要删除的节点的值，定义一个函数删除该节点。

返回删除后的链表的头节点。

注意：此题对比原题有改动

示例 1:

输入: head = [4,5,1,9], val = 5
输出: [4,1,9]
解释: 给定你链表中值为 5的第二个节点，那么在调用了你的函数之后，该链表应变为 4 -> 1 -> 9.

示例 2:

输入: head = [4,5,1,9], val = 1
输出: [4,5,9]
解释: 给定你链表中值为 1的第三个节点，那么在调用了你的函数之后，该链表应变为 4 -> 5 -> 9.

/**
 * Definition for singly-linked list.
 * public class ListNode {
 *     int val;
 *     ListNode next;
 *     ListNode(int x) { val = x; }
 * }
 */
class Solution {
    public ListNode deleteNode(ListNode head, int val) {
        if(head == null) return head;
        // ListNode dummy = new ListNode(0);
        // dummy.next = head;
        ListNode pos = head;
        if(head.val == val){
            head = head.next;
            return head;
        }
        while(pos != null && pos.next != null){
            if(pos.next.val == val){
                pos.next = pos.next.next;
            }
            pos = pos.next;
        }
        return head;
    }
}

甜饼大酱的老婆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020/8/3前端学习日记

jQueryjQuery语法：$(selector).action()美元符号定义jQuery选择符（selector）“查询”和“查找”HTML元素jQuery的action()执行对元素的操作示例：$(this).hide() 隐藏当前元素$(“p”).hide() 隐藏所有段落$(".test").hide() 隐藏所有class=“test"的元素$(”#test").hide() 隐藏所有id="test"的元素jQuery使用的语法是XPath与CSS选择器语法的组合文
复制链接

扫一扫