04-1 jQuery入门+选择器

一、入门

1、一定要在js代码上面引入jQuery文件

image.png

2、原生js中的window.onload 和jQuery中document.ready 都是文档就绪函数,他俩有啥区别(3点)

(1)执行顺序 document.ready 更快

image.png

(2)是否覆盖 document.ready 不覆盖

image.png
image.png

(3)简写写法 document.ready可以简写

image.png
image.png
image.png
image.png

3、原生对象和jQuery对象有啥区别呢

image.png
image.png

image.png

4、原生对象xx和jQuery对象yy转化

原生转jQuery,直接在外面套个$(xx)
jquery 对象转原生 ,既可以yy[0],也可以yy.get(0)
 var oDiv1 = document.getElementById("div1");
        console.log(oDiv1);//原生
        console.log($("#div1")[0]) ;//原生
        console.log($("#div1").get(0)) ;//原生

        console.log($("#div1"));//jquery 对象
        console.log($(oDiv1));//jquery 对象

image.png

二、选择器

image.png

image.png
image.png

(1):first-child 写的时候要和元素间有空格

first-child 和first-of-type的区别

image.png

上面那句话是找id为div1下面子元素是h3 的,而且这个h3必须是div的第一个孩子,要是h3上面有其他元素,就选不中
下面那句话是找id为div1下面子元素是h3 的,这个h3是div里面第一个h3就行,不一定非得是第一个孩子,也就是说上面可以有不是h3的元素

(2)上面那些选择器,都是css/css3里面的选择器,jQuery都支持,那么有哪些是jQuery自己的选择器呢?

image.png

:animated 选择正在执行动画的元素

:eq(x) 选择索引值为x的元素,从0开始计数

:even 选择索引值为偶数的

      :odd  索引值为奇数的

:gt(x) 选中索引值大于x的元素

      :lt(x)     选中索引值小于x的元素

:not() 选中id不是bb的li,也就是排除

image.png
image.png

image.png

image.png

选中表单type属性值为xx的元素

image.png

猜你喜欢

转载自blog.csdn.net/xuehangongzi/article/details/80555857
今日推荐