jQuery基础之二

jQuery基础之二

jQuery的中文文档十分详细,并且权威.
W3C的jQuery文档更加简单实用。



jQuery 1.9.0

jQuery中文文档
W3C的jQuery文档


jQuery操作DOM元素

元素本身

attr()
    获得元素的某项属性,更改或添加元素的属性值
    实例
        var className= $("div").attr("class")
        获得元素的类名

        attr("property",‘value1‘)  更改一项属性
        attr({property1: ‘value1‘,
            property2: ‘value2‘ }) 更改多项属性

css()
    为元素添加或修改某项或多项属性
    var className= $("div").css("propertyName")
    css("propertyname","value")  更改一项属性
    $("div").css({"background":"red","width":"100px"}) 多项属性
    注意:
        多项属性时之间要用","隔开
        且与attr()的不同,设置多个属性时其类名也加上引号

addClass()
    为元素添加新类名,来改变样式
    $("div").addClass("red")
    为div元素添加样式

    注意:
        为元素添加新样式时不取消原有样式。
        addClass()的中类名不再加"."
        一次添加多项样式时之间要用" "空格隔开
removeClass()
    反 addClass()

removeAttr()
    反 css(),无需加属性值

clone()
    复制元素整体
    $(selector).clone()

    实例
        var a=$("#div1").clone()
        将id为div1的元素赋值给变量a

包裹元素和内容

wrap()
    用于包裹元素本身
    $(selector).wrap(wrapper)
    实例
    $("#div1").wrap("<div></div>")
    id为div1的元素整体被div标签包裹

wrapInner()
    实例
    $("#div1").wrapInner("<div id="div2"></div>")
    id为div1的元素的所有子元素被div2包裹,而div2又被div1包裹

元素的子元素

append(content)
    向指定的元素中追加内容,被追加的content参数,
    可以是字符 HTML元素标记还可以是字符串的标记

    默认在该元素的子元素的最后面

    实例
    js:
    $html="<p class="green">asdawdasdwadsawdsa</p>"
    $("div").append($html)

    相当于在div元素内部又加入p标签

appendTo()
    用法
        $(content).appendTo(selector)
    实例
        js:
        $html="<p class="green">asdawdasdwadsawdsa</p>"
        $($html).appendTo("div")

        将p标签加入到div标签的末尾处

remove()
    删除所选元素本身和子元素
    实例
        <span class="green">asd</span>
        <span class="red">asd</span>
        js:
            $("span").remove(".red")
            删除span标签中类名为red的元素,此时该span标签不再存在

empty()
    删除元素的所有子元素
    实例
    <span class="green">asd</span>
    js:
        $("span").empty()
        知识删除了asd文本节点span标签依然存在

层级之内

before()和 after()
    在元素的前后插入内容

    $(selector).before(content)
    $(selector).after(content)

替换内容

replaceWith() 和 replaceAll()
    格式
        $(selector).replaceWith(content)

        $(content).replaceAll(selector)
    实例
        $("#div1").replaceWith("<p>asdwsadaw</p>")
        把id为#div1的整个元素换为p标签

遍历元素

each()
    格式:$(selector).each(function(index))

    实例:
        <span class="green1"></span>
        <span class="green2"></span>
        <span class="green3"></span>
        <span class="green4"></span>

        js:

        $("span").each(function(){
            if(index==2){
                $(this).addClass("red")
            }
        }))

        为类为 green4的span元素添加red样式

        注意
            this的使用$(this)此时不加双引号

jQuery事件与应用

jQuery并没有创建太多新的事件,而是为绑定事件时提供了方便。

注意:这里得事件名称没有‘on‘,绑定鼠标点击事件时只需click即可

新事件

ready事件

    ready事件类似于onLoad事件,但前者只要页面的DOM结构
    加载后便触发,而后者必须在页面全部元素加载成功才触发,
    ready()可以写多个,按顺序执行。
    注意:
        $(document).ready(function(){})等价于$(function(){});

focus和blur事件

    文本框的focus和blur事件
    focus事件:当点击文本框时,触发该事件
    blur事件:当文本框失去焦点时,触发该事件

change 事件

    当一个元素的值(value)发生改变时,将触发该事件
    实例:
        当改变下拉列表框的opnion时,将触发该事件

绑定事件的方法

bind() 方法

    通过bind()方法可以为获得的DOM对象绑定任意的事件

    $(selector).bind(event,[data],function)

    实例
        $("#btntest").bind("click mouseout",function(){
            $(this).attr("value","OK")
        })
        当鼠标点击id为btntest的按钮时改变其值为OK

    注意:
        事件要加引号
        多个事件一起绑定时当中空格隔开

绑定事件新方法

one() 方法

    $(selector).one(event,func)

    可以绑定任何有效的事件,但该事件函数只会触发一次

hover() 方法

    $(selector).hover(function1,function2)

    当鼠标移到所选元素上时,执行的function1,鼠标移出时执行function2

toggle() 方法

    $(seleector).toggle(func1,func2,func3,funcN)

    当第一次点击元素对象时执行func1,第二次点击元素对象时执行func2..
    当执行完最后一个函数时,再次点击将返回执行的第一个函数

卸载绑定事件方法

unbind() 方法

    可以移除元素已经绑定的事件

    $(selector).unbind(event[,fun])

    注意:
        若fun没有指定将移除所有的触发函数

模拟事件的触发

trigger() 方法

    该方法可以直接触发元素指定的事件

    $(selector).trigger(event)

    实例
        $("#form1 input:submit").trigger("click")

        当执行该语句是相当于点击提交按钮,表单元素将被提交

精彩集锦

1.this指针的使用
$("span").each(function(){
    if(index==2){$(this).addClass("red")}})
2.易错点睛
    var speed=‘24px’ 或var speed=24
    不可以 var speed=24px

相关标签:JavaScript

记录一下依稀记得的。来自《锋利的jQuery》第二章的总结

第一类:基本选择器(最常见的选择器)
①$("#id") ②$(".classname") ③ $("element") ④$("selector1,selector2,……,selectorN")

第二类:层次选择器
①$("ancestor descendant") 后代选择器 ② $("parent>child") 子代选择器
③$("prev+next") 紧接在prev后的next元素
④ $("prev~siblings") prev后的所有siblings元素

第三类:过滤选择器
①基本过滤选择器
②内容过滤选择器
③可见性过滤选择器
④属性过滤选择器
⑤子元素过滤选择器
⑥表单对象过滤选择器

Ps:私以为过滤选择器分类太细,应总结常用的几个过滤选择器,方便记忆。

第四类:表单选择器

$(":input")、$(":text")、$(":password")、$(":radio")、$(":image")
$(":checkbox")、$("submit")、$(":reset")、$(":button")、$(":file")
Ps:还是觉得表单选择器也挺细的,不知道常用的是哪几个

书中有段话:jQuery选择器的写法与CSS选择器的写法十分类似,只不过两者的作用效果不同,css选择器找到元素后是添加样式,而jQuery选择器找到样式后是添加行为。

作者: 慕粉1464062117 
链接:http://www.imooc.com/article/16236
来源:慕课网

时间: 2024-11-05 15:49:54

jQuery基础之二的相关文章

Jquery基础(二)

简介: jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments.events.实现动画效果,并且方便地为网站提供AJAX交互. Jquery的语法与js和css的区别与联系: 1.选择器 css选择器: 基本选择器:* # . p 组合选择器:p,h p h p+h p>h 属性选择器:[class='aaa'] div[id] js中DOM节点查找: 直接查找 导航属性查找 6种 children parentElement firstEleme

jQuery基础学习(二)&mdash;jQuery选择器

一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   

jquery基础 笔记二

动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement("select"); select.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2", "value2");

jQuery基础---Ajax基础教程(二)

jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中,我们了解了最基本的异步处理方式.本篇来了解一下 Ajax 的一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超过一定时间的请求, 用户就会变得不再耐烦而关闭页面. 而如果在请求期间能给用户一些提示,比如:“正在

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

Jquery基础之选择器

选择器是JQuery的根基,在JQuery中对事件处理.选择遍历Dom.ajax操作都依赖选择器.JQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器 1.ID选择器$("#ID") 页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素.选择结果为单个元素. 2.类选择器$(".class"

jQuery基础---Ajax进阶

原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中,我们了解了最基本的异步处理方式.本篇来了解一下 Ajax 的一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超过一定时间的请求, 用户就会变得不再耐烦而关闭页面. 而如果在请求期间能给用户一些提示,比如:

RequireJS基础(二)

上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义模块. 新建目录结构如下 这次新建了一个子目录js,把main.js和selctor.js放入其中,require.js仍然和index.html在同一级目录. HTML 如下 <!doctype html> <html> <head> <title>requi

Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)

Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title> <li