写代码啦
jQuery的基本使用
回复数(0) 浏览数(52)
{{topic.upvote_count || 0}} 编辑 回复

##jQuery如何获取元素

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元

$('p')  获取所有的<p>元素
$(':header')  获取所有的标题元素:<h1> ~ <h6>
$(':animated')  获取所有的动画元素
$('p:contains(Hello)')  获取所有包含文本为Hello的<p>元素,中间的文本区分大小写
$(':hidden')    获取所有的隐藏元素:width和height为0、display:none、type=hidden、
$('[href]')  属性选择器:获取所有含有属性为href的元素
$('div + p')  每个div相邻的下一个<p>元素
$('div ~ p')  获取跟div同级的所有的<p>元素

##jQuery 的链式操作是怎样的

链式操作的代码:

$('div').find('h3').eq(2).html('Hello');
 $('div') //找到div元素
     .find('h3') //选择其中的h3元素
   .eq(2) //选择第3个h3元素
   .html('Hello'); //将它的内容改为Hello

链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this,把对象再返回回来,对象就可以继续调用方法,实现链式操作。

var 对象 = {
        方法名:function(){
        // …
        return this; // 实现链式编程的核心this,this的关键字,表示当前对象。
    }
 }

##jQuery 如何创建元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

##jQuery 如何移动元素

第一种方法是使用.insertAfter(),把div元素移动p元素后面:

  $('div').insertAfter($('p'));

第二种方法是使用.after(),把p元素加到div元素前面:

  $('p').after($('div'));

##jQuery 如何修改元素的属性

$('h1').html(); 表示获取h1的值
$('h1').html('Hello'); 表示对h1进行赋值
$("div").text()    表示获取div的内容
$("div").text('新的内容')  设置div的内容
$('a').attr('属性名A') 获取属性名A的值
$('a').attr('属性名A','新的属性值') 表示为属性名A设置新的属性值
$("div").width() 表示获取div的宽度
$("div").width(400) 表示设置div的宽度为400px
$("div").height() 表示获取div的高度
$("div").height(400) 表示设置div的高度为400px
$('input')val()  表示获取某个表单元素的值
$('input')val('value')  表示设置某个表单元素的值
{{topic.upvote_count || 0}}

##jQuery如何获取元素

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元

$('p')  获取所有的<p>元素
$(':header')  获取所有的标题元素:<h1> ~ <h6>
$(':animated')  获取所有的动画元素
$('p:contains(Hello)')  获取所有包含文本为Hello的<p>元素,中间的文本区分大小写
$(':hidden')    获取所有的隐藏元素:width和height为0、display:none、type=hidden、
$('[href]')  属性选择器:获取所有含有属性为href的元素
$('div + p')  每个div相邻的下一个<p>元素
$('div ~ p')  获取跟div同级的所有的<p>元素

##jQuery 的链式操作是怎样的

链式操作的代码:

$('div').find('h3').eq(2).html('Hello');
 $('div') //找到div元素
     .find('h3') //选择其中的h3元素
   .eq(2) //选择第3个h3元素
   .html('Hello'); //将它的内容改为Hello

链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this,把对象再返回回来,对象就可以继续调用方法,实现链式操作。

var 对象 = {
        方法名:function(){
        // …
        return this; // 实现链式编程的核心this,this的关键字,表示当前对象。
    }
 }

##jQuery 如何创建元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

##jQuery 如何移动元素

第一种方法是使用.insertAfter(),把div元素移动p元素后面:

  $('div').insertAfter($('p'));

第二种方法是使用.after(),把p元素加到div元素前面:

  $('p').after($('div'));

##jQuery 如何修改元素的属性

$('h1').html(); 表示获取h1的值
$('h1').html('Hello'); 表示对h1进行赋值
$("div").text()    表示获取div的内容
$("div").text('新的内容')  设置div的内容
$('a').attr('属性名A') 获取属性名A的值
$('a').attr('属性名A','新的属性值') 表示为属性名A设置新的属性值
$("div").width() 表示获取div的宽度
$("div").width(400) 表示设置div的宽度为400px
$("div").height() 表示获取div的高度
$("div").height(400) 表示设置div的高度为400px
$('input')val()  表示获取某个表单元素的值
$('input')val('value')  表示设置某个表单元素的值
52
回复 编辑