当前位置: 澳门新濠3559 > 服务器运维 > 正文

澳门新濠3559基本选择器,1、jQuery对象转换成DO

时间:2019-12-26 07:51来源:服务器运维
Jquery选择器 jQuery认识 $和jQuery是一个意思 $(document).ready(function(){});可以简写成$(function(){}); window.onload和$(function(){})的区别: window.onload必须等待页面中所有内容加载完毕后才能执行 $(f

Jquery选择器

jQuery认识

  1. $和jQuery是一个意思
  2. $(document).ready(function(){});可以简写成$(function(){});
  3. window.onload和$(function(){})的区别:
    • window.onload必须等待页面中所有内容加载完毕后才能执行
    • $(function(){})是网页中所有DOM结构绘制完毕后就执行
    • window.onload不能同时编写多个
    • $(function(){})能同时编写多个
  4. 链式操作风格
    $(".level1 > a").click(function(){
    $(this).addClass("current")
    .next().show()
    .parent().siblings().children("a").removeClass("current")
    .next().hide()
    return false;
    });
  5. jQuery对象和DOM对象相互转化
    • jQuery→DOM:
      var $cr = $("#cr");
      var cr = $cr[0];或者
      var cr = $cr.get(0);
    • DOM→jQuery:
      var cr = document.getElementById("cr");
      var $cr = $(cr);

JQuery的常用选择器、过滤器、方法祥细介绍,jquery选择器

1、jQuery对象转换成DOM对象

a.
var $cr = $("#cr"); //jQuery对象
var cr=$cr[0]; //DOM对象
alert(cr.checked); //检测checkbox是否被选中了

b.
var $cr=$("#cr"); //jQuery对象
var cr=$cr.get(0); //DOM对象
alert(cr.checked); //检测checkbox是否被选中了

2.DOM对象转换成jQuery对象
var cr=document.getElementById("cr"); //DOM对象
var $cr=$(cr); //jQuery对象
注:平时用到的jQuery对象都是通过$()函数造出来的,$()函数就是一个jQuery对象的制造工厂

3.jQuery的选择器 
a.$("#test")选取id为test的元素
b.$(".test")选取所有class为test的元素
c.$("p")选取所有的<p>元素
d.$("*")选取所有的元素

e.$("div span")选取<div>里的所有span元素

f.$("div>span")选取<div>元素下元素名是<span>的子元素

g.$(".one+div")选取class为one的下一个<div>元素

h.$("#two~div")选取id为two的元素后面的所有<div>兄弟元素===$("#two").nextAll("div")===$("#two").siblings("div")选取id为two元素的所有同辈div,无论前后位置

4.jQuery的过滤器

a.$("div:first")选取所有<div>元素中的第一个<div>元素

b.$("div:last")选取所有<div>元素中的最后一个<div>元素

c.$("input:not(.myClass)")选取class不是myClass的<input>元素‘

e.$("input:even")选取索引是偶数的<input>元素

f.$("input:odd")选取索引是奇数的<input>元素

g.$("input:eq(1)")选取索引等于1的<input>元素

h.$("input:gt(1)")选取索引大于1的<input>元素(注:大于1,而不包括1)

i.$("input:lt(1)")选取索引小于1的<input>元素(注:小于1,而不包括1)

j.$(":header")选取网页中所有的<h1>、<h2>、<h3>.....

k.$("div:animated")选取正在执行动画的<div>元素

5.内容过滤选择器

a.$("div:contains('我')")选取含有文本'我'的<div>元素

b.$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素

c.$("div:has(p)")选取含有<p>元素的<div>元素

d.$("div:parent")选取拥有子元素(包含文本元素)的<div>元素

6.可见性过滤器

a.$(":hidden")选取所有不可见的元素,包括<input type="hidden"/>、<div style="display:none"></div> 和<div style="visibility:hidden"></div>等元素 b.$("div:visible")选取所有可见的<div>元素

7.属性过滤选择器

a.$("div[id]")选取拥有属性id的元素

b.$("div[title=test]")选取属性title为"test"的<div>元素

c.$("div[title!=test]")选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)

d.$("div[title^test]")选取属性title以"test"开始的<div>元素

e.$("div[title$=test]")选取属性title以"test"结束的<div>元素

f.$("div[title*=test]")选取属性title含有"test"的<div>元素

g.$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素

8.子元素过滤选择器

a.:nth-child(index/even/odd)选取每个父元素下的第index个子元素或者奇偶元素 :eq(index)只匹配一个元素,并且是总0算起的,而:nth-child将为每一个父元素匹 配子元素,并且:nth-child(index)的index是从1开始的。

b.:first-child只返回单个元素,而:first-child选择符将为每个父元素匹配第一个元素 例如$("ul li:first-child");选取每个<ul>中的第一个<li>元素

c.:last-child选取每个父元素的最后一个子元素,同样:last只返回单个元素,而:last-child 选择符将为每个父元素匹配最后一个子元素 例如$("ul li:last-child")选择每个<ul>中的最后一个<li>元素

d.:only-child如果某个元素师它父元素中唯一的子元素,那么它将会被匹配,如果父元素中含有 其它元素,则不会被匹配

例如:$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素 :nth-child()选择器是很常用的子元素过滤选择器,详细功能如下:

a.:nth-child(even)能选取每个父元素下的索引值是偶数的元素

b.:nth-child(odd)能选取每个父元素下的索引值是奇数的元素

c.:nth-child(2)能选取每个父元素下的索引值等于2的元素

d.:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n从0开始)

e.:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。

(n从0开始) 例如:

a.$('div.one:nth-child(2)').css("background","red")表示改变每个class为one的<div>父元素下 的第二个子元素的背景色

b.$('div.one:first-child').css("background","red")表示改变每个class为one的<div>父元素下的第一个子元素的背景色

c.$('div.one:last-child').css("background","red")表示改变每个class为one的<div>父元素的最后一个子元素的背景色

d.$('div.one:only-child').css("background","red")表示如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色

9.表单对象属性过滤选择器

a.$("#form1 :enabled")选取id为"form1"的表单内所有可用元素

b.$("#form2 :disabled")选取id为"form2"的表单内所有不可用元素

c.$("input:checked")选取所有被选中的<input>元素

d.$("select:selected")选取所有被算中的选项元素

e.$(":input")选取所有<input><textarea><select><button>元素

f.$(":text")选取所有的单行文本框

g.$(":password")选取所有的密码框

h.$(":radio")选取所有的单选框

i.$(":checkbox")选取所有的复选框

j.$(":submit")选取所有的提交按钮

k.$(":image")选取所有的图像按钮

l.$(":reset")选取所有的重置按钮

m.$(":button")选取所有的按钮

n.$(":file")选取所有的上传域

o.$(":hidden")选取所有的不可见元素

  1. $(document).ready(function{}) 表示dom加载完成后出发 window.onload= 只能注册一个方法,必须页面上所有的内容都加载完毕后触发(图片,css,js都加载完毕)

11.节点遍历 next() nextAll() prev() prevAll() siblings() end() andSelf() parent() children()

12.设置样式 css() 设置行内样式 设置标签的style属性 attr("class","c1") 对class属性赋值 设置标签的所有样式 addClass("myClass")(不影响其他样式) class="c1 c2" removeClass("myClass") 移除样式 toggleClass("myClass") 如果存在样式则去掉样式,如果没有样式则添加样式 hasClass("myClass") 判断样式是否存在

13.链式变成 $(this).css("background-color","red").siblings().css("background-color","white");

1、jQuery对象转换成DOM对象 a. var $cr = $("#cr");//jQuery对象 var cr=$cr[0];//DOM对象 alert(...

$.ready

jQuery选择器

  1. jQuery选择器获取的永远是对象,不管该元素存不存在,所有不能用它来判断该元素是否存在,例:
    if($("#tt")){} //错误,应该:
    if($("#tt").length > 0){} 或者
    if($("#tt")[0]){}
  2. 基本选择器,例:
    • $("#test")
    • $(".test")
    • $("p")
    • $("*")
    • $("div, span, p.myClass")
  3. 层次选择器,例:
    • $("div span")
    • $("div > span")
    • $(".one + div") 可以用$(".one").next("div")方法代替
    • $("#two ~ div") 可以用$("#two").nextALL("div")方法代替
      而siblings()方法与位置无关,可以匹配所有同辈元素
  4. 过滤选择器
  • 基本过滤选择器
    • $("div:first") 选取所有div中的第一个子元素
    • $("div:last")
    • $("input:not(.myClass)")
    • 澳门新濠3559基本选择器,1、jQuery对象转换成DOM对象。$("input:even")
    • $("input:odd")
    • $("input:eq(1)")
    • $("input:gt(1)")
    • $("input:lt(1)")
    • $("header")
    • $("div:animated")
    • $(':focus')
  • 内容过滤选择器
    • $("div:contains('我')") 包含“我”的div
    • $("div:empty") 没有子元素的div
    • $("div:has(p)") 有p元素的div
    • $("div:parent") 有子元素的div
  • 可见性过滤选择器
    • $(":hidden") 所有不可见的元素
    • $("visible") 所有可见的元素
  • 属性过滤选择器
    • $("div[id]") 选取拥有属性id的div元素
    • $("div[title = test]") 选取属性title为"test"的div元素
    • $("div[title != test]") 选取属性title不为"test"的div元素,没有title也会被选中
    • $("div[title ^= test]") 选取属性title以"test"开始的div元素
    • $("div[title $= test]") 选取属性title以"test"结束的div元素
    • $("div[title *= test]") 选取属性title含有"test"的div元素
    • $('div[title |= "en"]') 选取属性title等于"en"或以"en"为前缀(en-)的元素
    • $('div[title ~= "uk"]') 选取属性title用空格分割的值中包含字符"uk"的div元素
    • $("div[id][title $= 'test']") 选取拥有属性id并且属性title以"test"结束的div元素
  • 子元素过滤选择器
    • :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素,index从1开始算
    • :first-child 选取每个父元素的第1个子元素
    • :last-child
    • only-child 某个元素是它父元素中唯一的子元素
    • 表单对象属性过滤选择器
      • $("#form1:enabled") 选取id为form1的表单内的所有可用元素
      • $("#form2:disabled") 选取id为form2的表单内的所有不可能元素
      • $("input:checked") 选取所有被选中的input元素
      • $("select option:selected") 选取所有被选中的选项元素

$

jQuery中的DOM操作

  1. 查找元素节点
    var $li = $("ul li:eq(1)");
    alert($li.text());
  2. 查找属性节点
    var $li = $("ul li:eq(1)");
    alert($li.attr("title"));
  3. 创建元素 + 文本 + 属性节点
    var $li = $("<li title='香蕉'>香蕉</li>");
  4. 插入节点
  • append() 内部后置
  • appendTo()
  • prepend() 内部前置
  • prependTo()
  • after() 外部后置
  • insertAfter()
  • before() 外部前置
  • insertBefore()
  1. 删除节点
  • remove() 节点的方法会被删除,后代节点同时也被删除,返回被删除的节点的引用
  • detach() 节点的方法会被保留,
  • empty() 清空元素中的所有后代节点
  1. 复制节点
  • clone() 参数为true时还复制元素绑定的事件
  1. 替换节点
  • replaceWith() 之前绑定的事件会消失
  • replaceAll()
  1. 包裹节点
  • wrap() 所有匹配到的节点单独包裹
  • wrapAll() 把所有匹配到的节点一起包裹
  • wrapInner() 包裹元素的内容
  1. 获取和设置属性
  • attr()
  1. 删除属性
  • removeAttr()
  1. 追加样式
  • addClass()
  1. 移除样式
  • removeClass()
  1. 切换样式
  • toggleClass()
  1. 判断是否含有某个样式
  • hasClass() 返回布尔值
  1. html() 读取或设置某个元素中的HTML内容
  2. text() 读取或设置某个元素中的文本内容
  3. val() 读取或设置某个元素的值
  4. 遍历节点
  • children() 取得匹配元素的子元素集合
  • next() 取得匹配元素后面紧邻的同辈元素
  • prev() 取得匹配元素前面紧邻的同辈元素
  • siblings() 取得匹配元素前后所有的同辈元素
  • closest() 取得最近的匹配元素,先检查自身,再向上查找
  • parent() 取得元素的父元素
  • parents() 取得元素的祖先元素
  1. css() 取得或设置某个元素的样式
  2. height()/width() 取得或设置某个元素的实际高/宽
  3. offset() 取得元素在当前视窗的相对偏移,有top/left属性
  4. position() 取得元素相对于最近的一个设置为absolute或者relative的祖父节点的相对偏移
  5. scrollTop/scrollLeft 取得或设置元素的滚动条的位置

如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象

jQuery中的事件和动画

  1. 加载DOM
  • $(window).load(function(){}) 等价于 window.onload = function(){}
  • 也可用于某个特定元素
  1. 事件绑定
  • bind(type, [, data], fn); 第二个参数是作为event.data属性传递给事件对象的额外数据对象
  • 简写的绑定事件:$("selector").[click, mousemove, ...](function(){})
  • 合成事件1:$("selector").hover(function(){//鼠标移入}, function(){//鼠标移出})
  • 合成事件2:$("selector").toggle(function(){//第一次点击}, function(){//第二次点击},function(){//第三次点击}, ...)
  • toggle()的另一个作用是切换元素的可见状态,例:
    <code>
    $(function(){
    $("selector").toggle(function(){
    $(this).next().toggle();
    }, function(){
    $(this).next().toggle();
    })
    });
    </code>
  1. 事件对象(基本上兼容所有浏览器)
  • 直接用event就行了
  • 停止事件冒泡:event.stopPropagation();
  • 阻止默认行为:event.preventDefault();
  • 同时调用时简写:return false;
  • jQuery不支持事件捕获
  • event.type
  • event.target 获取触发事件的元素
  • event.relatedTarget 获取相关元素
  • event.pageX、event.pageY 获取鼠标相对于页面的x、y坐标
  • event.which 获取鼠标或者键盘按键
  • event.metaKey 获取<ctr>键
  1. 移除事件
  • $("selector").unbind([type], [data]);
    第一个参数是事件类型,第二个参数是将要移出的函数
  • one() 为元素绑定一次处理函数
  1. 模拟操作
  • $("selector").trigger("click"); 简写为 $("selector").click(); 作用是页面加载完就执行选择器的click事件
  • trigger()也可以触发自定义名称的事件
  • trigger(type, [data]):传递参数
    第一个参数是要触发的事件类型
    第二个参数是要传递给事件处理函数的附加数据,以数组的形式传递
  • trigger()触发事件后,会执行浏览器默认操作
  • triggerHandler()则不会
  1. bind()的其他好处
  • 添加事件命名空间,便于管理
    <code>
    $(function(){
    $("selector").bind("click.yeta", function(){});
    $("selector").bind("mousemove.yeta", function(){});
    $("selector").unbind(".yeta", );
    });
    </code>
  • 相同事件名称,不同命名空间执行方法
    <code>
    $(function(){
    $("div").bind("click", function(){}); ①
    $("div").bind("click.yeta", function(){}); ②
    $("button").click(function(){
    $("div").trigger("click!"); !的作用是匹配不在命名空间中的click方法,所有执行的是①
    $("div").trigger("click"); 执行①②
    });
    });
    </code>
  1. 动画
  • show()/hide() 会改变宽高、透明度
  • fadeIn()/fadeOut() 只改变透明度
  • slideUp()/slideDown() 只改变高度到显示或者隐藏
  • animate(params, speed, callback);
    params:样式集合
    speed:速度
    callback:动画完成时执行的函数
  • stop([clearQueue], [gotoEnd]);
    clearQueue:布尔值,是否要清空未执行完的动画队列
    gotoEnd:布尔值,是否直接将正在执行的动画跳转到末状态
  • is(":animated"):判断元素是否处于动画状态
  • delay():延迟动画
  • toggle()
  • slideToggle()
  • fadeTo()
  • fadeToggle()

选择器

jQuery表单、表格

  1. disabled和checked这些属性应该用prop()方法,例:
    $("#checkbox").prop("disabled"); 返回true/false

1,判断页面是否存在某元素:if{} 或者if{};

Ajax

  1. 是什么?
  • 异步JavaScript和XML,利用了一系列交互式网页应用相关的技术所形成的结合体,无刷新更新页面。.
  1. 优势:
  • 不需要插件支持
  • 不刷新页面更新数据
  • 通过XHR对象向服务器提交数据,提高Web程序的性能
  • 减轻服务器和带宽的负担
  1. 不足:
  • 浏览器对XHR对象的支持不足
  • 破坏浏览器的前进、后退功能
  • 对搜索引擎的支持不足
  • 开发和调试工具

2, 基本选择器

$ 选择id为test的元素

$选择class为test的所有元素

$选择所有的

标签

$选择页面上的所有元素

$选择页面上所有的标签和id为two的元素

澳门新濠3559,3, 层次选择器

$表示选取div中的所有的span元素

$选取parent下所有children的子元素

$选取class为one的下一个span元素

$选取class为one的后面的所有的div兄弟元素

$等价于$

$等价于$.nextAll

$.siblings 选取class为one的所有的兄弟元素div,无论前后

4, 过滤选择器

基本的过滤器

$选取所有div元素中第一个div元素

$选取所有div元素最后一个div元素

$”)选取class不是myClass的input元素

$选取索引是偶数的input元素

$选取索引时奇数的input元素

$选取索引等于1的input元素

$选取索引大于1的input元素

$选取索引小于1的input元素

$选取网页中所有的h1、h2……

$选取正在执行动画的div元素

内容过滤器

$选取含有文字“我”的div元素

$选取不包含子元素的div空元素

$选取含有p元素的div元素

$选取拥有子元素的div元素

可见性过滤选择器

$选取所有不可见的元素。包括,

等元素。如果只想选取元素,可以使用$

$选取所有可见的

元素

属性过滤选择器

$选取拥有属性id的元素

$选取属性title为test的div元素

$选取属性title不是test的div元素

$选取属性title以test开始的div元素

$选取属性title以test结束的div元素

$选取属性title包含test的div元素

$(“div[id][title$='test']”)选取拥有属性id,并且属性title以test结束的div元素

子元素过滤选择器

:eq只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child的index是从1开始的,而:eq是从0算起的

:first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素。

例如$选取每个ul中第一个li元素

:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素

$在ul中选取是唯一子元素的li元素

:nth-child()选择器是很常用的子元素过滤选择器,详细功能如下:

1.:nth-child能选取每个父元素下的索引值是偶数的元素

  1. :nth-child能选取每个父元素下的索引值的奇数的元素

3.:nth-child能选取每个父元素下索引值等于2的元素

4.nth-child能选取每个父元素下的索引值是3的倍数的元素

5.nth-child能选取每个父元素下的索引值是

表单对象属性过滤选择器

$选取id为form1的表单内的所有可用元素

$选取id为“form2”的表单内的所有不可用元素

$选取所有被选中的input元素

$(“select :selected”.text选取所有被选中的选项元素

5.表单选择器

$选取所有input、textarea、select和button元素

$选取所有的单行文本框

$选取所有的密码框

$选取所有的单选框

$选取所有的复选框

$选取所有的提交按钮

$选取所有的图像按钮

$选取所有的重置按钮

$选取所有的按钮

$选取所有的上传域

$选取所有不可见元素

Dom操作

Dom core、HTML-DOM和CSS-DOM

1. 插入节点的方法

append.append

test

appendTo.appendTo

test

prepend. prepend

test

prependTo. prependTo

test

After. after

insertAfter()

$. insertAfter

Before. before

insertBefore()

$. insertBefore

2. 删除节点

Remove清空节点

3. 复制节点

Clone.appendTo

复制元素的同时复制元素中所绑定的事件

4. 替换节点

replaceWith.replaceWith;

replaceAll. replaceAll ;

5. 包裹节点

Wrap.wrap;ssss

wrapAll. wrapAll ;ssss

ssss

wrapInner.wrapInner ;ssss

6. 属性操作

Attr.attr({“title”:”dd”,”name”:”myp”})

removeAttr()移除属性

7. 样式操作

获取和设置样式

Attr()

追加样式

addClass()

移除样式

removeClass() removeClass

切换样式

toggle()主要控制行为上的重复切换

toggleClass()样式上的重复切换

判断是否含有某个样式

hasClass

8.设置和获取html、文本和值

html()

读取或者设置某个元素中的HTML内容

text()

读取或者设置某个元素中文本内容

val()

设置和获取元素的值defaultValue初始值

9.遍历节点

Children()

取得匹配元素的子元素的集合,只考虑子元素不考虑后代元素

Next()

取得匹配元素后面紧邻的同辈元素

Prev()

取得匹配元素前面紧邻的同辈元素

Siblings()

取得匹配元素前后所有的同辈元素

Closest()

取得最近的匹配元素

还有很多遍历方法:find,prevAll等

CSS-DOM操作

获取样式

$

设置样式

$.css

$.css({“opacity”:”0.5”,”background-color”:”blue”})

Height.height.height

$,设置:$.width

Offset()

获取元素在当前视窗的相对偏移,包括top和left

Position()

获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,它返回的对象也包括两个属性,即top和left

ScrollTop()

获取和设置元素的滚动条距顶端的距离

ScrollLeft()

获取和设置元素的滚动条距左侧的距离

事件和动画

事件

绑定事件

bind;

参数:type:事件类型,也可以自定义名称

data:作为event.data属性值传递给事件对象的额外数据对象

fn:用来绑定的处理函数

绑定多个事件类型

Ex:$.bind(“mouseover mouseout”,function.toggleClass

合成事件

Hover;

用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个函数;当光标移除这个元素时,会触发指定的第二个函数

toggle;

用户模拟鼠标连续单击事件。第一次单击元素,触发指定的第一个函数;当在次单击同一个元素时,则触发指定的第二个函数;如果有更多的函数,则依次触发,知道最后一个。

冒泡事件

假设网页上有2个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素也绑定了click事件,当点击最里面元素的事件时,同时其它事件也会触发。从内向外

停止事件冒泡的方法:stopPropagation.bind(“click”,function{

Var txt=$+”

内层span元素被单击

”;

$;

Event.stopPropagation

停止表单默认提交:event.preventDefault()==return false;

移除事件

Unbind;

Type:事件类型

Data:将要移除的函数

触发一次函数

One;

事件触发后立即解除

动画

Show()

Slow:600毫秒、normal:400毫秒、fast:200毫秒

Hide

在指定的一段时间内降低元素的不透明度,直到元素完全消失

fadeout()

和上相反

slideUp()

与下相反

slideDown()

元素将由上之下延伸显示

自定义动画animate

语法结构:animate(params,speed,callback);

参数说明如下:

1.Params:一个包含样式属性及值的映射,比如{property1:“value1”,property2:”value2”,….}

2.Speed:速度参数,可选。

Callback:在动画完成时执行的函数,可选

就暂时先添加这点吧,以后再慢慢完善吧!

编辑:服务器运维 本文来源:澳门新濠3559基本选择器,1、jQuery对象转换成DO

关键词: