第一章 认识jQuery

jQuery代码风格
$(document).ready(function(){
//...
}); 简化
$(function(){
//...
}); jQuery对象转DOM对象
var $id = $("#id"); //jQuery对象
var id = $id[0]; //DOM对象 $id.get(0); DOM对象转jQuery对象
var id = document.getElementById("id"); //DOM对象
var $id = $(id); //jQuery对象

  

第二章 jQuery选择器

基本选择器
$("*")                        //所有元素
$("#lastname")        //id="lastname" 的元素
$(".intro")           //所有 class="intro" 的元素
$("p,span")           //所有 <p> ,<span>元素 层次选择器
$("ancestor descendant")      //$("div span")选取<div>里的所有<span>元素
$("parent > child")                //$("div > span")选取<div>元素下元素名是<span>的子元素
$('prev + next')                         //$('.one + div')选取.one的下一个<div>元素
$('prev~sibilings')                   //$('#two~div')选取#two的元素后面的所有<div>兄弟元素基本过滤选择器
:first                      //$("div:first")选取所有<div>元素中第一个<div>元素
:last                       //$("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector)      //$("input:not(.myClass)")选取class不是myClass的<input>元素
:even                       //$("input:even")选取索引是偶数的<input>元素
:odd                            //$("input:odd")选取索引是奇数的<input>元素
:eq(index)              //$("input:eq(1)")选取索引等于1的<input>元素
:gt(index)              //$("input:gt(1)")选取索引大于1的<input>元素
:lt(index)              //$("input:lt(1)")选取索引小于1的<input>元素
:header                     //$(":header")所有标题元素<h1> - <h6>
:animated               //$("div:animated")选取所有执行动画的<div>元素内容过滤选择器
:contains(text)             //$("div:contains('W3School')") 选取包含'W3School'的<div>元素
:empty                              //$("div:empty")选取无子(元素)节点的<div>元素
:has(selector)              //$("div:has(p)")选取含有<p>元素的<div>元素
:parent                             //$("div:parent")选取拥有子元素的<div>元素可见性过滤选择器
:hidden                 //$("p:hidden") 所有隐藏的 <p> 元素
:visible                //$("table:visible") 所有可见的表格属性过滤选择器
[attribute]                         //$("div[id]")选取拥有属性id的<div>元素
[attribute=value]              //$("div[title=test]")选取title="test"的<div>元素
[attribute!=value]             //$("div[title!=test]")选取title不等于"test"的<div>元素
[attribute^=value]             //$("div[title^=test]")选取title以"test"开始的<div>元素
[attribute$=value]             //$("div[title^=test]")选取title以"test"结束的<div>元素
[attribute*=value]             //$("div[title^=test]")选取title含有"test"的<div>元素子元素过滤选择器
:nth-child                      //选取每个父元素下的第index个子元素或者奇偶元素
:first-child                    //$(“ul li:first-child”)选取的是每个<ul>中第1个<li>
:last-child                     //$(“ul li:last-child”)选取的是每个<ul>中最后1个<li>
:only-child                     //$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素 表单对象属性过滤选择器
$(":enabled")             //所有激活的 input 元素
$(":disabled")            //所有禁用的 input 元素
$(":selected")            //所有被选取的 input 元素
$(":checked")             //所有被选中的 input 元素  表单选择器 选取对应的所有元素
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden选择器中的空格
$("div :hidden") //带空格的 选取<div>里的隐藏元素
$("div:hidden") //不带空格的 选取隐藏的<div>

  

第三章 jQuery中的DOM操作

DOM操作分3方面 DOM Core ,HTML-DOM ,CSS-DOM
$(html) //创建html代码插入节点
append() //元素内部追加新元素
appendTo() //$(A)
.append(B)将A追加到B中 也可以用来移动元素
prepend() //元素前置内容
prependTo() //$(A).prependTo(B)将A前置到B中
after() //元素后面插入内容
insertAfter() //$(A).insertAfter(B)元素后面插入内容
before()    //元素前面插入内容
insertBefore() //$(A).insertBefore(B)元素前面插入内容删除节点
remove()    //删除节点
empty()     //清空节点里的内容复制节点
clone() //true含义是复制元素的同时复制元素绑定的事件替换节点
replaceWith()   //$("p").replaceWith("<strong>123</strong>");
replaceAll()    //$("<strong>123</strong>").replaceAll("p");包裹节点
wrap()      //$("strong").wrap("<b></b>")   <b><strong></strong></b>
wrapAll()   //
wrapInner() //$("strong").wrapInner("<b></b>")  <strong><b></b></strong>属性操作
attr()          //添加修改属性    $("p").attr("属性","值")
removeAttr()    //删除属性样式操作
addClass()      //追加样式
removeClass()   //移除样式
hasClass()      //判断是否含有样式 有true 没有false切换样式
toggle()    //交替一组动作
$toggleBtn.toggle(function(){   //显示元素},function(){//隐藏代码
})toggleClass() //重复切换样式
$("p").toggleClass("class");设置获取html 文本和值
html()  //获取或者修改元素的html代码
text()  //获取或者修改元素的内容
val()   //设置和获取元素的值 可以选中select checkbox radio
focus() //获得焦点
blur()  //失去焦点遍历节点
children()  //取得匹配元素的子元素集合
next()      //取得后面紧邻的同辈元素
prev()      //取得前面紧邻的同辈元素
siblings()  //前后的同辈元素
closest()
find()
filter()
nextAll()
prevAll()
parent()
parents()CSS-DOM操作
css()
$("p").css("color")         //获取<p>元素的样式颜色
$("p").css("color","red") //设置<p>元素的样式颜色
$("p").css({"fontSize":"12px" ,"color":"#999"})           //同时设置字体大小和颜色
height()
width()offset() //获取元素在当前视窗的相对偏移
var offset=$("p").offset();
var left=offset.left;
var top=offset.top;position()  //获取元素属性为relative或absolute的父节点的相对偏移
scrollTop() //元素的滚动条距顶端的距离
scrollLeft()    //元素的滚动条距左侧的距离

  

jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)相关推荐

  1. jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如示例中$("p")会得到一组P标签元素,其中"p"表示CSS中的标签选择器.$()中的() ...

  2. jQuery学习笔记(二)使用选择器一

    jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的 注意,在jQuery中通过各种选择器和方法获取的结果集 ...

  3. jQuery学习笔记(三):选择器总结

    这一节详细的总结jQuery选择器. 一.基础选择器 $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素$('.infoC ...

  4. jQuery学习笔记6:表单选择器

    1    常规选择器 alert($('input').size());      alert($('input').val());  //元素名定位,默认获取第一个    alert($('inpu ...

  5. jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)

    day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...

  6. jQuery学习笔记--目录

    jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

  7. 【转载】jQuery学习笔记

    jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...

  8. jQuery学习笔记02:核心部分

    jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...

  9. javaweb(03) jQuery学习笔记

    javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...

最新文章

  1. LeftoverDataException.
  2. idea怎么把代码放到git_在IDEA中如何初始化Git,把项目推送到Git上
  3. 「镁客早报」蓝色起源完成无人火箭试飞;知名对冲基金做空高通...
  4. Lucene学习笔记
  5. Python文件的操作2
  6. win10获取管理员权限方法
  7. .net下汇总搜索引擎关键字编码
  8. C语言重载谭浩强,(完整)C语言谭浩强学习笔记(50页)-原创力文档
  9. 新装主机测试性能软件,装机必看 如何快速测试电脑性能?
  10. Stata: 快速呈现常用分布临界值表
  11. 中国移动 云MAS平台HTTP2.1(HTTP版)发送普通短信
  12. 项目配置不当引发了数据泄露,人已裂开!!(建议收藏)
  13. 微信支付接口调用之二维码失效时间的设置
  14. 分享马化腾在3Q大战后写给腾讯全体员工的一封信
  15. Spark性能调优案例-多表join优化,减少shuffle
  16. [C语言]——整型的截断与提升
  17. ElasticSearch 利用Java接口创建Mapping
  18. 重生仙侠java游戏_5本好看的重生修仙小说,剧情和口碑皆为一流,书迷大呼过瘾!...
  19. 主流七款web服务器软件点评,7款主流WEB服务器软件.pdf
  20. 天猫用户重复购买预测赛题——赛题理解 + 数据探索

热门文章

  1. 追查连接mysql的客户端
  2. 2017视频监控趋势的一些思考
  3. 陶哲轩实分析 例 1.2.12 洛必达法则使用注意事项
  4. oracle之alter学习笔记
  5. “未能为域创建GPO 出现扩展错误”的解决办法
  6. 【转载】快速升职加薪的10个方法
  7. 17委托异步调用方法
  8. 三大运营商抢夺物联网市场 中国联通物联网连接数突破5000万
  9. canvas画柱状图 和饼图
  10. 关于字符编码 转自廖雪峰的官方网站,至今看到最清晰的讲解