JavaScript第二十天 jQuery入门

最新推荐文章于 2024-04-27 02:33:39 发布

aZF1997

最新推荐文章于 2024-04-27 02:33:39 发布

阅读量132

点赞数

分类专栏：学习文章标签： js-jq

本文链接：https://blog.csdn.net/aZF1997/article/details/100675678

版权

学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

认识jQuery

jQuery是一个优秀的JavaScript库，凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。

$ 就是jQuery的一个简写形式。
1.$(document).ready() 方法和window.onload 有什么区别？

页面加载

window.onload与ready的区别
1.window.onload会覆盖之前的
ready的区别，不会覆盖，会叠加
2.window.onload等文档和资源都加载完成以后调用
ready只要文档加载完成以后就会调用

jQuery对象转成DOM对象

var  cr=$('#cr'); //jQuery对象
var c=cr[0]     //DOM对象  方法一
var c= cr.get(0) //DOM对象 方法二

DOM对象转成jQuery对象

只需要用 $() 把DOM对象包装起来，就可以获得一个jQuery对象了。

jQuery和其他库的冲突

1，jQuery库在其他库之后导入

2，自定义一个快捷方式

  var $j=jQuery.noConflict();//自定义一个快捷方式
            $j(function(){//使用jQuery，利用自定义快捷方式 $j
                $j('p'.click(function(){
                    alert($j(this).text())
                }))
            })
            //$('pp').()   //别的库就可以使用$了

3,将$的控制权让渡出来

 jQuery.noConflict();//将$控制权让渡出来
            (function($){
                $(function(){
                    $('p').click(function(){
                        alert($(this).text())
                    })
                })
            })(jQuery)
            //$('pp').()  //别的库就可以使用$了

jQuery选择器

基本选择器

id名、类名、标签名

层次选择器

	$('ul  li')  // 子孙节点
	$('ul > li') 	//子节点
	$('#li1 + li')  //下一个兄弟节点    next()可以代替
	$('#li1 ~ li')	//下面所有兄弟元素	nextAll()可以代替

过滤选择器

//基本过滤选择器
$('li:')  //第一个
$('li:last')//最后一个
$('li:not(.box)')//排除
$('li:even')//索引偶数
$('li:odd')//索引奇数
$('li:eq(2)')//索引2的元素
$('li:gt(2)')//索引大于2的元素
$('li:lt(2)')//索引小于2的元素
//内容过滤选择器
$('li:contains(我)')//选取文本包含"我"的li元素
$(':empty')//  选取不包含子元素或者文本的空元素
$('li:has(span)')//选取包含选择器匹配的元素的元素
$('li:parent')//选取含有子元素或者文本的元素
//可见性过滤选择器
$('li:hidden')//选取所有不可见元素
$('li:visible')//选取所有可见的li元素
//属性过滤选择器
$('li[title]')//有title属性的
$('li[title=you]')//属性是  you 的
$('li[title！=you]')//属性不是  you 的
$('li[title^=a]')//属性以a开头
$('li[title$=u]')//属性以u结尾
$('li[title*=u]')//属性包含u
//子元素过滤选择器
$('ul:nth-child(1)')  //下标从1开始
$('ul:nth-child(even)')  //偶数
$('ul:nth-child(odd)')  //奇数
$('ul:nth-child(3n+1)')  //公式
$('ul:first-child')  // 父元素下第一个子元素
$('ul:last-child')  //父元素下最后一个子元素
//表单对象属性过滤选择器
$('input:enabled')// 选取所有可用元素
$('input:disabled')//选取所有不可用元素
$('checkbox:checked')//选取所有被选中的元素
$('select:selected')//获取下拉框选中的元素

表单选择器

$(':input')//选取所有input textarea select  button元素
$(':text')//所有单行文本框   type=‘text’
$(':password')//密码框
$(':radio')//单选框
$(':checkbox')//多选框
$(':submit')//提交按钮
$(':reset')//重置按钮
$(':button')//普通按钮
$(':file')//上传域