使用jQuery函数

Posted superjishere

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jQuery函数相关的知识,希望对你有一定的参考价值。

1选择器

1.1说明

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

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

1.2分类

1)选择器是什么?

    * 有特定语法规则(css选择器)的字符串

    * 用来查找某个/些DOM元素: $(selector)

2)分类

①基本

      * #id  id选择器

           *element(标签名) 元素选择器

      *  * 任意标签

      * .class 属性选择器

      * selector1,selector2,selector3  取多个选择器的并集(组合选择器)

      * selector1selector2selector3取多个选择器的交集(相交选择器)

②层次

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

      * selector1>selector2(parent > child): 子元素,在给定的父元素下的子元素中匹配元素

      * selector1 selector2(ancestor descendant): 后代元素,在给定的祖先元素下的后代元素中匹配元素

           * selector1+selector2(prev + next):匹配所有紧接在prev元素后的next元素。不常用

           * selector1~selector2(prev ~ siblings):匹配prev(前面的)元素之后的所有siblings(兄弟姐妹)元素。不常用

③过滤

      * 在原有匹配元素中筛选出其中一些(分为基本、内容、可见性、属性三类)

      * :first

      * :last

      * :eq(index)

      * :lt

      * :gt

      * :odd

      * :even

      * :not(selector)

      * :hidden

      * :visible

      * [attrName]

      * [attrName=value]

④表单

      * :input

      * :text

      * :checkbox

      * :radio

      * :checked: 选中的

基本选择器:

<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB(title="hello")</li>
  <li class="box">CCCCC(class="box")</li>
  <li title="hello">DDDDDD(title="hello")</li>
</ul>
 
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
 
//1. 选择id为div1的元素
  
$(‘#div1‘).css(‘background‘, ‘red‘)
  //2. 选择所有的div元素
  
$(‘div‘).css(‘background‘, ‘red‘)
  //3. 选择所有class属性为box的元素
 
$(‘.box‘).css(‘background‘, ‘red‘)
  //4. 选择所有的div和span元素
  
$(div,span).css(‘background‘, ‘red‘)
  //5. 选择所有class属性为box的div元素
 
$(div.box‘).css(‘background‘, ‘red‘)
  $(‘*‘).css(‘background‘, ‘red‘)
</script>
</body>

层次选择器:

<body>
<ul>
  <li>AAAAA</li>
  <li class="box">CCCCC</li>
  <li title="hello"><span>BBBBB</span></li>
  <li title="hello"><span class="box">DDDD</span></li>
  <span>EEEEE</span>
</ul>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1.
选中ul下所有的的span
 
$(ul span).css(‘background‘, ‘yellow‘)
//2. 选中ul下所有的子元素span
 
$(ul>span).css(‘background‘, ‘yellow‘)
//3. 选中class为box的下一个li
 
$(‘.box+li).css(‘background‘, ‘yellow‘)
//4. 选中ul下的class为box的元素后面的所有兄弟元素
$(ul .box~*‘).css(‘background‘, ‘yellow‘)
</script>
</body>

过滤选择器:

<body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two">BBBBB</li>
  <li style="display:none">我本来是隐藏的</li>
</ul>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  //1. 选择第一个div
  
$(div:first‘).css(‘background‘, ‘red‘)
  //2. 选择最后一个class为box的元素
 
$(‘.box:last‘).css(‘background‘, ‘red‘)
  //3. 选择所有class属性不为box的div
  
$(div:not(.box)‘).css(‘background‘, ‘red‘//没有class属性也可以
  //4. 选择第二个和第三个li元素
  //
$(li:gt(0):lt(3)‘).css(‘background‘, ‘red‘) // 多个过滤选择器不是同时执行, 而是依次
   
   
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
  
   
  
$(li:gt(0):lt(2)‘).css(‘background‘, ‘red‘) // 多个过滤选择器不是同时执行, 而是依次
 
$(li:lt(3):gt(0)‘).css(‘background‘, ‘red‘)
  //5. 选择内容为BBBBB的li
  
$(li:contains("BBBBB")‘).css(‘background‘, ‘red‘)
  //6. 选择隐藏的li
  
console.log($(li:hidden‘).length, $(li:hidden‘)[0])
  //7. 选择有title属性的li元素
  
$(li[title]‘).css(‘background‘, ‘red‘)
  //8. 选择所有属性title为hello的li元素
 
$(li[title="hello"]‘).css(‘background‘, ‘red‘)
</script>
</body>

表单选择器:

<body>
<form>
  用户名: <input type="text"/><br>
  密 码: <input type="password"/><br>
  爱 好:
  <input type="checkbox" checked="checked"/>篮球
  <input type="checkbox"/>足球
  <input type="checkbox" checked="checked"/>羽毛球 <br>
  性 别:
  <input type="radio" name="sex" value=‘male‘/>男
  <input type="radio" name="sex" value=‘female‘/>女<br>
  邮 箱: <input type="text" name="email" disabled="disabled"/><br>
  所在地:
  <select>
    <option value="1">北京</option>
    <option value="2" selected="selected">天津</option>
    <option value="3">河北</option>
  </select><br>
  <input type="submit" value="提交"/>
</form>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  //1.
选择不可用的文本输入框
  
$(‘:text:disabled‘).css(‘background‘, ‘red‘)
  //2. 显示选择爱好 的个数
 
console.log($(‘:checkbox:checked‘).length)
  //3. 显示选择的城市名称
 
$(‘:submit‘).click(function () {
    var city = $(select>option:selected‘).html() // 选择的option的标签体文本
   
city = $(‘select‘).val()  // 选择的option的value属性值
   
alert(city)
  })
</script>
</body>

2工具

$.each(): 遍历数组或对象中的数据

$.trim(): 去除字符串两边的空格

$.type(obj): 得到数据的类型

$.isArray(obj): 判断是否是数组

$.isFunction(obj): 判断是否是函数

$.parseJSON(json) : 解析json字符串转换为js对象/数组

···

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  //1. $.each(): 遍历数组或对象中的数据
 
var obj = {
    name: ‘Tom‘,
    setName: function (name) {
      this.name = name
    }
  }
  $.each(obj, function (key, value) {
    console.log(key, value)
  })
 
  //2. $.trim(): 去除字符串两边的空格
  //3. $.type(obj): 得到数据的类型
 
console.log($.type($)) // ‘function‘
  //4. $.isArray(obj):
判断是否是数组
 
console.log($.isArray($(‘body‘)), $.isArray([])) // false true
  //5. $.isFunction(obj):
判断是否是函数
 
console.log($.isFunction($)) // true
  //6. $.parseJSON(json) :
解析json字符串转换为js对象/数组
 
var json = ‘{"name":"Tom", "age":12}‘  // json对象: {}
  // json对象===>JS对象
 
console.log($.parseJSON(json))
  json = ‘[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]‘ // json数组: []
  // json数组===>JS数组
 
console.log($.parseJSON(json))
  /*
  JSON.parse(jsonString)   json
字符串--->js对象/数组
  JSON.stringify(jsObj/jsArr)  js对象/数组--->json字符串
  */
</script>

以上是关于使用jQuery函数的主要内容,如果未能解决你的问题,请参考以下文章

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

jQuery的DOM操作

26个jQuery代码片段使用技巧

常用的几个JQuery代码片段

几个有用的JavaScript/jQuery代码片段(转)

高效Web开发的10个jQuery代码片段