zoukankan      html  css  js  c++  java
  • JQUERY学习(壹)

    一、jQuery的引言

    1jQuery框架:对JavaScript的封装,简化js开发

    2jQuery框架的好处:

    1)语法简单

    js中:document.getElementById("id");

    jQuery:$("#id");

    2)屏蔽浏览器差异

    3)简化Ajax开发

    4)jQuery提供丰富的插件,提高用户的体验,如:日期

    二、DOM对象和jQuery对象的区别

    1DOM对象:js中使用document.getElementByXXX("");可以调用JavaScript中的方法

    2jQuery对象:通过jQuery的方式,获取到的对象;可以调用jQuery中的方法

    注意:

    1DOM对象和jQuery对象都表示一个html标签

    2、如果使用this作为参数,this是一个DOM对象

    3、一个jQuery对象中封装一个DOM对象

    三、第一个jQuery程序

    1、搭建jQuery的运行环境(jquery-1.8.3.js文件引入到开发的页面中)

    1)创建一个folderjs(保存js文件)jquery-1.8.3.js拷贝到js目录中

    2)在开发的页面中引入jquery-1.8.3.js文件

    2jquery的语法特点

    1)简洁

    2)支持链式调用

    css("","").css("",").css("","").....

    3)方法:

    css("样式属性名","样式属性值")

    jquery对象.text():获得文本节点的内容

    jquery对象.text(""):修改文本节点的内容

    jquery对象.html():获得文本节点的内容

    jquery对象.html(""):修改文本节点的内容 ,如果修改为html标签时,解析html标签,呈现标签的结果。

    四、jquery对象的获得

    1、选择器【重点】

    a)基本选择器

    1)id选择器 :唯一一个可以取到一个jquery对象

    语法:$("#id属性名")

    2)class选择器:通过class属性,获得一组jquery对象,可以在不同html标签中

    语法:$(".class属性名")

    3)标签选择器:通过标签名称获得一组jquery对象

    语法:$("html标签名")

    4)多路选择器:组合id  class  标签,只要匹配一种选择器,可以选择出对应的jquery对象

    语法:$("选择器1,选择器2")

    $("#id,.c1") :id选择的jquery对象+class="c1"选择的jquery对象

    5)全选择器:把当前html页面中的所有标签都选中

    语法:$("*");

    b)层次选择器

    1)后代选择器:选择出所有的后代

    语法:$("选择器1 选择器2")

    2)儿子选择器:选择直接的子节点

    语法:$("选择器1>选择器2")

    3)第一个兄弟选择器:选择出,紧跟其后的第一个兄弟节点

    语法:$("选择1+选择器2")

    4)选择后续所有的兄弟:$("选择器1~选择器2")

    c)过滤选择器:对选出一组jquery对象再次进行过滤

    1)基本过滤选择器

    :first  :last

    2):eq(index)   :lt(index)   :gt(index)

    3):even 选择偶数下标  :odd 奇数下标

    4):not(选择器)

    5)内容过滤选择器

    :contains(text)  :选择包含text的标签

    :has(selector)

    :empty  :选择没有子标签或者文本内容为空的jquery对象

    :parent  选择具有子节点或者有文本的标签

    6)可见性选择器

    :hidden  选择隐藏的或者式属性为hiddenjquery对象

    :visible 选择可见的jquery对象,没有hidden属性或者没有displaynone样式的标签,默认是可见的

    7)属性过滤选择器

    [attribute] :选择具有attribute属性的jquery对象

    [attribute=value]:选择attribute属性为value值的jquery对象

    [attribute!=value]:选择attribute属性不为value值的jquery对象

    8)表单对象选择器

    :checked  :单选按钮或者复选按钮被选中的jquery对象

    :selected  选择下拉菜单中被选中的option

    2、通过DOM对象转化

    语法:$(dom)------>jQuery对象

    应用场景:thisdom对象,$(this) 其他的程序传入如的参数是一个DOM对象,需要使用jQuery中的方法时。

    jQuery对象------->DOM对象

    jQuery对象.get(0)

    3、通过html标签创建

    语法:$("html标签")

    如:var div1 = $("<div class='div1'>yanxj</div>")

    应用场景:修改页面结构,添加页面标签

  • 相关阅读:
    Django开发个人博客网站
    Photoshop界面字体太小解决方案
    [Leetcode]第三题:无重复字符最长子串
    web网站服务(1)
    备份与恢复笔记和实验
    oracle事物和常用数据库对象笔记和实验
    Oracle配置管理实验
    Oracle配置管理笔记
    Oracle体系结构和用户管理实验
    Oracle数据库部署
  • 原文地址:https://www.cnblogs.com/ClassNotFoundException/p/5977339.html
Copyright © 2011-2022 走看看