JQuery基础
小知识点:
- instanceof 函数
判断对象是否是某种类型的实例。
下载
image.png
下载链接： https://code.jquery.com/jquery-3.3.1.js
引用
<script src="js/jquery-3.1.0.js" type="text/javascript"></script>
基础语法
弹出提示框
<script>
$(document).ready(function(){
alert("在诚品书店，时间会过的很慢很慢，生活会盛得很满很满");
})
</sccript>
$(document).ready()与window.onload的区别
image.png
$(document).ready()要先于window.onload加载，并且同一个页面可以写多个
- $（selector）.action();
- 工厂函数$():将DOM对象转化为JQuery对象
- 选择器selector：获取需要操作的DOM元素
- 方法action():JQuery中提供的方法
$ 等同于 jQuery
在JQuery可以连续书写
$(""h2".css("background-color","#CCFFFF").next().css("display","block"));
JQuary对象
使用jQuary包装DOM对象后产生的对象能够使用jQuery中的方法。
image.png
将DOM对象转化为jQuery对象
image.png
一般请款下，jQuery对象我们用$开头
将jQuery对象转化为DOM对象
jQuery对象类似于数组，可以通过索引来得到相应的DOM对象。
image.png
image.png
JQuery选择器
jQuery选择器分类：
- 类似CSS选择器
- 基本选择器
- 标签选择器[$("h2")]
- 类选择器[$(".title")]
- ID选择器[$("#title")]
- 并集选择器[$("tltle1,。ttitle2")]
- 交集选择器[$("title1.title2")]
- 全局选择器[$("*")]
- 层次选择器
- 后代选择器[$("#menu span")]
- 子选择器[$("#menu>span")]直接子元素
- 相邻选择器[$("h1+div1"]（选取的是h1之后的第一个兄弟元素div1)
- 同辈选择器[$("h1~div1")](选取h1之后的所有兄弟元素)
- 属性选择器
$("[href = "abc"]")(选取所有href属性值为abc的元素)
$("[href^='aa]")(选取所有href属性值为aa开头的元素)
$("[href("[href*='aa']")(选取所有href属性中含有aa的元素)
$("li[id][title = '新闻']")（选取所有含有id属性并且title属性的值为”新闻“的元素）
- 基本选择器
- 过滤选择器
- 基本过滤选择器
- ：fist（选取第一个元素）
- ：last (选取最后一个元素)
- ：even(选取索引是偶数的所有元素)
- ： odd（选取索引是奇数的所有元素）
- ：eq(index)(选取索引等于index的元素)
- ：gt(index)(选取索引大于index的元素)
- ：it(index)(选取索引小于index的元素)
- ：not(selector)(选取除与给定选择器匹配的所有元素)
- ： header(选取所有的标题元素，h1~h6)
- ：focus（选取当前获取焦点的所有元素）
- 可见性过滤选择器
- ：visible (选取所有可见)
- ： hidden（选取所有隐藏元素）
- 基本过滤选择器
("p:visible").hide();获取显示的p元素，使其隐藏
选择器中的特殊符号需要使用双反斜杠来转义
JQuery样式设置
直接设置
css(name,value)
$(this).css("border","5px solid #fffccc") ;
追加样式
addClass(class)或addClass(class1 class2 ... classN)
移除样式
removeClass("sytle2")或removeClass("sytle1 style2")
#####################################
toggleClasss()
它模拟了addClass()与removeClass()实现样式切换的过程
即点击一下添加样式，在点击一下移除样式
#####################################
html()类似于innerHTML,可以对HTML代码进行操作
text()可以获取设置元素的文本内容
举例子：
<div class="btn1">jaja</div>
<div class="btn2">jianjian</div>
<script>
$(".btn1").html("<a href='####'>超链接</a>");
$(".btn2").text("<a href='####'>超链接</a>");
</script>
效果：
image.png
val()可以获取或设置元素的value属性值 (只适用与有value属性的标签)
$(this).val("");
