2018-09-10JQuery基础

JQuery基础

小知识点:

1. 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("");