12.19笔记

1.正则补充

<script>
let str='<a>diajiji</a>'
let reg=/<([a-z]+)>.*<\/\1>/
</script>

2.jquery

首先要导入jQuery文件

<button></button>
<script>
    $("button").click(function(){
        alert("520")})
</script>

入口函数：等待页面加载完毕后进行

1.1.$(document).ready(function(){

})

1.2.$(function(){

})

$:顶级对象，是jQuery的别称，相当于原生js中的window

对元素进行包装，使其成为jQuery对象，从而可以调用jQuery的方法

jQuery对象和dom对象的区别

jQuery只能使用jQuery方法，不能使用原生js的方法

把jQuery对象转换成dom对象

$("button")[0].style.backgroungColor="pink"

$("button").get(0)

dom对象转换成jQuery对象

$(dom对象)

3.jQuery选择器

$("选择器")

$("选择器").css("属性名","属性值")

隐式迭代：遍历内部dom元素的过程

4.筛选选择器

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>

</ul>
    
<script>
    console.log($("ul li:first))
    //获取第一个li 
    console.log($("ul li:eq(2))
    //获取到的li元素中，索引下标为2的li
    $("ul li:odd").css("backgroundColor","pink") //奇数
    $("ul li:even").css("backgroundColor","pink") //偶数
</script>

5.筛选的方法

<div class="father">
    111
    <div class="son">22222
        <div>66666</div>
    </div>            
    <div class="son">333333</div>
</div>
<script>
    $(".son").parent()
    $(".father").children(".son")                //子代选择器
    $(",father").find("div").css("color","red") //后代选择器
    $("li").sibings("div").css("color","pink")    //查找兄弟节点，不包括自己本身
</script>

6.更改样式

$("div").css(" "," ")

$("div").css({"":"","":""})

$("div").addclass("pink") //对类名进行添加

$("div").removeclass("pink")//移除

$("div").toggleclass（"pink"）//切换

8.显示和隐藏

$("").show         //显示

$("").hide         //隐藏

$("").toggle         //切换

9.滑动

$("").slideDown//滑入

$("").slideUp//滑出

$("").slideToggle//切换

10.淡入淡出

$("").fadeIn//淡入

$("").fadeOut//淡出

$("").fadeToggle//切换

11.自定义动画

animate(想要更改的样式属性，[speed],[easing],[fn])