jQuery基础(一)

很害羞哦这是本人第一次写博客记录我的学习前端之路,有什么问题欢迎留言砸评论,谢谢大家哈 !!

 学习笔记:
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

1、将jquery对象转成DOM对象
(1)数组下标读取jQuery中的DOM
例:HTML中:

     <div>星期一</div>
     <div>星期二</div>
     <div>星期三</div>

JavaScript中:

  var txt=$div[0];            //转换成DOM对象
  var $txt=$("div")[0];       //jQuery对象
  txt.style.width="100px"      //操作DOM属性

(2)通过jQuery自带的get()方法

var $txt=$("div");
var txt=$div.get[0];

2、DOM对象转换成jQuery对象
例;
var txt=document.getElementsByTagName(“div”);
//获取DOM对象

 var $txt=$(div);        //jQuery对象
 var $first=$txt.first(); //找到第一个div元素
 $first.css("color","blue");//给第一个元素设置样式

3、jQuery选择器
(1)id选择器

<div id=one>
  <p>你今天真美</p>
</div>

原生JavaScript:

 var txt=document.getElementBYId("#one");
 txt.style.border="1px solid silver"

jQuery写法:

$("#one").css("border","1px solid silver");   //注意为#one

(2)类选择器:

<div class=one>
  <ul class=ul_list>
    <li class=li_list>周一</li>
    <li class=li_list>周二</li>
    <li class=li_list>周三</li>
    <li class=li_list>周四</li>
 </ul>
</div>

原生JavaScript:

var txt=document.getElementsByClassName("li_list");
for(var i=0;i<txt.length;i++){
    txt[i].style.color="yellow";

}

jQuery写法:

$(".li_list").css("color","blue");     //注意为.li_list

(3)元素选择器

<div class=one>
  <ul class=ul_list>
    <li class=li_list>周一</li>
    <li class=li_list>周二</li>
    <li class=li_list>周三</li>
    <li class=li_list>周四</li>
 </ul>
</div>

原生JavaScript:

var txt=document.getElementsByTagName("li");
for(var i=0;i<txt.length;i++){
    txt[i].style.color="yellow";

}

jQuery写法:

$("li").css("color","blue");

(4)全选择器
$(“*”)

兼容性说明:
1、IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的2、getElementById的参数在IE8及较低的版本不区分大小写
3、IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A
4、IE8及较低的版本,浏览器不支持getElementsByClassName
(5)层级选择器

 ">"大于号:子选择器;$("div>p") //所有div下的第一层的p元素
 " "空格:后代选择器:$("div p")     //所有div元素下的所有p元素
 "+"加号:相邻兄弟选择器:$("div+p")      //紧跟div元素后面的p元素
 "~"波浪线:一般兄弟选择器:$("div~p")1  //div同层紧接着后面的所有p元素
 ","逗号:选择器组合:$("div p,span p")  //div下的p节点和span下的p节点

(6)基本筛选选择器

如图
* :eq(); //全称为equal”相等”
* :lt(); //全称为less than “小于”
* :gt(); //全称为greater than “大于”
(7)内容筛选选择器
如图
注意:
* :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
* 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
* :parent与:empty是相反的,两者所涉及的子元素,包括文本节点
(8)可见性筛选选择器
这里写图片描述
隐藏元素的几种方式:
* CSS display的值是none。
* type=”hidden”的表单元素。
*宽度和高度都显式设置为0。//不可见的:visible值为0如果给其加上border并设置有效值则可见;
*一个祖先元素是隐藏的,该元素是不会在页面上显示
* CSS visibility的值是hidden //可见的:visible值为1
* CSS opacity的指是0 //可见的:visible值为1
注意:
*如果元素中占据文档中一定的空间,元素被认为是可见的。
*可见元素的宽度或高度,是大于零。
*元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。
可见的:#div:visible取到的元素长度为1,#div:hiddle取不到元素,则为0;
不可见的:#div:hiddle取到的元素长度为1,#div:visible取不到元素则为0
注意:
display:none 你看不到 JQ也看不到

width:0 height:0 (行内元素) 你看得到 JQ看不到

opacity:0 (就是经常用的模糊度,=0就是完全隐藏) 你看不到 JQ看得到
(9)属性筛选选择器
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值