添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
$( "#btn1" ). click ( function ( ){ //绑定事件监听 alert ($( this ). html ()) //DOM对象转为jQuery对象并调用其方法 $( "<input type=" text " name=" msg3 ">" ). appendTo ( "div" ) //将input塞进div标签内

使用jQuery核心函数

说明:选择器本身只是一个有 特定语法规则 的字符串,没有实质用处。它的基本语法规则使用的就是CSS的选择器语法,并对其进行了扩展,只有调用$,并将选择器字符串作为参数传入才能起作用。

$(selector):根据选择器规则在整个文档中查找所有匹配的标签的数组( ),并封装为jQuery对象

基本选择器

element

.class

selector1selector2selectorN(交集)找含有某种属性的元素

//选择id为div1的元素
$("#div1").css("background","red")//多个用对象.css({})
//选中所有div元素
$("div").css("background","red")
//选择所有class属性为box的元素
$(".box").css("background","red")
//选择所有的div和span元素
$("div,span").css("background","red")
//选择所有class属性为box的div元素
$("div.class").css("background","red")
//所有元素包括body
$("*").css("background","red")

层次选择器

查找子元素,后代元素,兄弟元素的选择器

ancestor descendant

parent > child

prev + next

prev ~ siblings(匹配prev元素之后的所有siblings(兄弟)元素)

//选中ul下的所有span 所有层
$("ul span").css("background","red")
//选择ul下所有的子元素span
$("ul>span").css("background","red")//子元素是ul内第一层的所有span,而不是多层里的
//选中clas为box的下一个li
$(".box + li").css("background","red")
//选中ul下的属性为box的元素后面的所有兄弟元素 
$("ul .box~*").css("background","red")

过滤选择器

在原有选择器匹配器的元素中进一步进行过滤的选择器,多个过滤选择器顺序执行

//选中第一个div
$("div:first").css("background","red")//先选中所有div再过滤出第一个
//选中最后一个class为box的元素
$(".box:last").css("background","red")
//选择所有class不为box的div
$("div:not(.box)").css("background","red")//没有class属性也行
//找某一个
$(".box:eq(index)").css("background","red")
//选择第二个和第三个li
$("li:gt(0):lt(2)").css("background","red")//顺序过滤a:b:c,gt()大于下标的元素,lt()小于下标的元素
//$("li:lt(3):gt(0)").css("background","red")
//选择内容为xxx的li
$("li:contains("xxx")").css("background","red")
//选择隐藏(dispaly:none)的li
console.log($("li:hidden").length,$("li:hidden")[0])//visible
//选择有title属性名的li
$("li[title]").css("background","red")
//选择所有属性为title为hello的li
$("li:[title = "hello"]").css("background","red")//hello双引号可加可不加

表单选择器

  //选择不可用的文本输入框
  $(":text:disabled").css("background","red")
  //选择显式爱好的个数
  $(":checkbox:checked").length
  //显式选择的城市的名称
  $(":submit").click(function(){
      var city = $("select>option:selected").html()
      console.log(city)

jQuery核心对象

理解:jQuery对象内部包含的是DOM元素对象的伪数组(可能只有一个元素),该对象拥有很多有用的属性和方法,让程序员能更加方便的操作DOM

【注】jQuery对象与DOM元素对象方法不一样!

属性/方法

size()/ length :DOM元素个数

[index] / get(index) :根据下标获取对应DOM元素

each():遍历包含的所有DOM元素,注意与$.each()区分

index():得到在所在兄弟元素中的下标

//统计button个数
var $btns = $("button")//伪数组
console.log($btns.length,$btns.size())//4
//取出第二个button
$btns[1].innerHTML//$btns[1],这是DOM元素。已经取出来了,所以能用innerHTML方法
//输出所有button文本
$btns.each(function(inex,domEle){
    console.log(index,domEle.innerHTMLthis)//this是对应DOM元素就等同于domEle
    //简便写法:console.log(this)
//输出某个按钮是所有按钮的第几个
console.log($("#btn3").index())//2
//$.isArray($("a")) false
//$.parseJSON(json)
var json = '{"name":"Tom","age":12}'//json对象
var josn1 = '['{"name":"Tom","age":12}','{"name":"jack","age":12}']'//json数组
//json对象/数组===>js对象/数组
$.parseJSON(json)
JSON.parse(jsonString)//json对象/数组===>js对象/数组
JSON.stringify(jsObject/jsArray)//js对象/数组===>json对象/数组

jQuery对象属性

//读取第一个div的title属性
$('div:first').attr('title')
//给所有div设置name属性
$('div').attr('name''a')
//移除所有div的title属性
$('div').removeAttr('title')//removeProp()
//给所有div设置class='aaa'
$('div').attr('class','aaa')
//给所有div添加class='bbb',bbb对应css中的类名其中可以有样式
$('div').addClass('bbb')//attr是设置会覆盖,添加是累加的过程
//移除所有div的aaa的class
$('div').removeClass('class','aaa')
//得到最后一个li的标签文本
$('li:last').html()//注意是标签体文本,并不是纯文本,可能是<span>asv</span>
//设置第一个li的标签体为"<h1>aaa</h1>"
$('li:first').html('<h1>aaa</h1>')
//得到输入框的value
$(':text').val()//注意与DOM的value方法区分
//将输入框的值设置为abc 
$(':text').val('abc')//读写合一
//点击'全选'按钮,实现全选
//attr():操作属性值不为布尔值的属性
//prop():专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function(){    //property
    $checkboxs.prop('checked',true)
//点击'全不选'按钮,实现全不选
var $checkboxs = $(':checkbox')
$('button:last').click(function(){
    $checkboxs.prop('checked',false)
复制代码
  • 私信