jQuery基础1

最新推荐文章于 2024-09-03 01:23:13 发布

RowanIT3

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量326

点赞数

分类专栏：前端文章标签： jquery 设计思想

本文链接：https://blog.csdn.net/RowanIT3/article/details/50704855

版权

前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

只是把以前自学所记得读书笔记转过来而已回忆下jQuery的基础知识部分博客参考阮一峰老师的《jQuery设计思想》

jQuery的设计思想

① 选择网页元素
② 强大的过滤器
③ 链式操作
④ 取值、赋值同体
⑤ DOM操作
⑥ 事件操作
⑦ 工具方法
⑧ 特殊效果

核心函数

① jQuery([selector,[context]])（selector:用来查找的字符串，context:作为待查找的 DOM 元素集、文档或 jQuery 对象）这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。例：$(“div > p”) 找到所有属于div子集的p元素

② jQuery(html,[ownerDocument]) （html:用于动态创建DOM元素的HTML标记字符串，ownerDocument:创建DOM元素所在的文档）根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。例：$("<div><p>Hello</p></div>")

③ jQuery(callback)（$(document).ready()的简写，callback表示当DOM加载完成后要执行的函数）例： $(function(){alert(1)});
选择网页元素

    $("#div1") // 选择ID为div1的网页元素
    $(".test") // 选择class为test的网页元素
    $("p") // 选择p元素
    $("div,span,p.myClass") //选择多个元素
    $("div span") //选择div下的span元素
    $(document) //选择整个文档对象
    $('div:animated') // 选择当前处于动画状态的div元素....

强大的过滤器

    $("div").first() // 选择第一个div元素
    $("div").eq(2) // 选择第3个div元素
    $("div").not(".test") // 选择class不为test的div元素
    $("div").filter(".test") // 选择class为test的div元素
    $("div").has("sapn") // 选择包含有span元素的div元素....

    $("div").next("span") // 选择div后面第一个同辈span元素
    $("div").prev("p") // 选择div前面紧邻的同辈p元素
    $("div").parent() // 选择div的父元素
    $("div").children() // 选择div所有的子元素
    $("div").siblings() // 选择div的同辈元素
    $("div").closet("form") // 选择离div最近的form父元素....

链式操作

    $('div').find('h1').eq(4).html('RowanIT3');

    分解开来：$('div') // 找到div元素
            .find('h1') // 找到其中的所有h1元素
            .eq(4) // 找到第5个h1元素
            .html('RowanIT3') // 将它的内容改成RowanIT3

取值、赋值同体

    $("div").html() // 取出div的html值
    $("div").html("RowanIT3") // 将div的html值改为RowanIT3

    .html() //取出或设置html内容
　　.text() //取出或设置text内容
　　.attr() //取出或设置某个属性的值
　　.width() //取出或设置某个元素的宽度
　　.height()//取出或设置某个元素的高度
　　.val() //取出某个表单元素的值

DOM操作

    jQuery提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置
    假定我们选中了一个div元素，需要把它移动到p元素后面。
    第一种方法是使用.insertAfter()，把div元素移动p元素后面：
    $('div').insertAfter($('p'));（理解就是把div插到p后面）

    第二种方法是使用.after()，把p元素加到div元素前面：
    $('p').after($('div'));（p后面插入div元素）

    表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

    类似的操作有
    insertBefore() || before() //在现存元素的外部，从前面插入元素
    appendTo() || append() //在现存元素的内部，从后面插入元素
    prependTo() || prepend() //在现存元素的内部，从前面插入元素


    创建新元素： 
    $("<div>RowanIT3</div>") //创建一个内容为RowanIT3的div元素
    $("<p class='test'>RowanIT3</p>") //创建一个class为test的p元素且内容为RowanIT3

    删除元素： 
    .remove() || .detach() 两者区别是前者不保留被删除元素的事件，而后者则保留
    .remove()这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除
    .detach()这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

    复制元素(克隆匹配的DOM元素并且选中这些克隆的副本)：
    .clone()

    清空元素（删除匹配的元素集合中所有的子节点）：
    .empty()

事件操作

    ①页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
    $(function(){alert(1)});

    ②事件绑定 
    .on()/.off()
    .bind()/.unbind()
    .one() //绑定一个一次性的事件处理函数
    .live()/.die()
    .delegate()/.undelegate()
    .trigger() \ .triggerHandler()

    ③事件切换
    .hover() \ toggle()

    ④支持的事件：

    .blur() 表单元素失去焦点。
　　.change() 表单元素的值发生变化
　　.click() 鼠标单击
　　.dblclick() 鼠标双击
　　.focus() 表单元素获得焦点
　　.focusin() 子元素获得焦点
　　.focusout() 子元素失去焦点
　　.hover() 同时为mouseenter和mouseleave事件指定处理函数
　　.keydown() 按下键盘（长时间按键，只返回一个事件）
　　.keypress() 按下键盘（长时间按键，将返回多个事件）
　　.keyup() 松开键盘
　　.load() 元素加载完毕
　　.mousedown() 按下鼠标
　　.mouseenter() 鼠标进入（进入子元素不触发）
　　.mouseleave() 鼠标离开（离开子元素不触发）
　　.mousemove() 鼠标在元素内部移动
　　.mouseout() 鼠标离开（离开子元素也触发）
　　.mouseover() 鼠标进入（进入子元素也触发）
　　.mouseup() 松开鼠标
　　.ready() DOM加载完成
　　.resize() 浏览器窗口的大小发生改变
　　.scroll() 滚动条的位置发生变化
　　.select() 用户选中文本框中的内容
　　.submit() 用户递交表单
　　.toggle() 根据鼠标点击的次数，依次运行多个函数
　　.unload() 用户离开页面

    事件对象包含的属性和方法：

    event.pageX 事件发生时，鼠标距离网页左上角的水平距离
　　event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
　　event.type 事件的类型（比如click）
　　event.which 按下了哪一个键
　　event.data 在事件对象上绑定数据，然后传入事件处理函数
　　event.target 事件针对的网页元素
　　event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
　　event.stopPropagation() 停止事件向上层元素冒泡

工具方法

    ① $.type() //判断数据类型
    ② $.trim() //去掉前后空格
    ③ $.isArray() //测试对象是否为数组
    ④ $.proxy() //改变this指向
    ⑤ **$.noConflict()** //防止冲突($与其他位置的$变量)
    ⑥ $.parseJSON() //解析为真正形式的JSON
    ⑦ $.makeArray() //转化成真正的数组

特殊效果

    基本效果：
    .show() \ .hide()

    滑动：
    .slideUp() \ .slideDown() \ .slideToggle()

    淡入淡出：
    .fadeIn() \ .fadeOut() \ fadeToggle()

    运动：
    .animate() \ .stop() \ .delay()